看到了很多，关于vue.js安装教程，有点心烦了，后来直接引用了官方的链接，开始撸代码了，算了直接放代码了。自己编程能力太差，还是要多撸代码。
第一个helloworld：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>helloWord</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{message}} 11 </div> 12 <script> 13 new Vue({ 14 el:'#app', 15 data:{ 16 message:'helloWorld' 17 } 18 }) 19 </script> 20 </body> 21 </html>
第二个test01：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>helloWord</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{message}} 11 </div> 12 <script> 13 new Vue({ 14 el:'#app', 15 data:{ 16 message:'helloWorld' 17 } 18 }) 19 </script> 20 </body> 21 </html>
第三个双向绑定1：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>双向绑定1</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p> 11 {{message}} 12 </p> 13 <input v-model="message" /> 14 </div> 15 16 <script> 17 new Vue({ 18 el:'#app', 19 data:{ 20 message:'hello Vue.js' 21 } 22 }) 23 </script> 24 </body> 25 </html>
第四个双向绑定2：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>双向绑定2</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app2"> 10 <p> 11 {{message}} 12 </p> 13 <input v-model="message" /> 14 </div> 15 16 <script> 17 new Vue({ 18 el:'#app2', 19 data:{ 20 message: 'hello Vue.js' 21 } 22 }) 23 </script> 24 </body> 25 </html>
第五个用户处理：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>渲染列表</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p> 11 {{message}} 12 </p> 13 </div> 14 15 <script> 16 new Vue({ 17 el:'#app', 18 data:{ 19 message:'helloVue.js' 20 }, 21 methods:{ 22 reverseMessage:function(){ 23 this.message=this.message.split('').reverse().join('') 24 } 25 } 26 }) 27 </script> 28 </body> 29 </html>
第六个用户处理2：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用户处理2</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app2"> 10 <p> 11 {{message}} 12 </p> 13 <button v-on:click="reverseMessage">点击</button> 14 </div> 15 16 <script> 17 new Vue({ 18 el:'#app2', 19 data:{ 20 message:'helloVue.js' 21 }, 22 methods:{ 23 reverseMessage:function(){ 24 this.message=this.message.split('').reverse().join('') 25 } 26 } 27 }) 28 </script> 29 </body> 30 </html>
第七个渲染列表：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>渲染列表</title> 6 <!--<script src="https://unpkg.com/vue"></script>--> 7 <script src="https://unpkg.com/vue"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <ul> 12 <li v-for="todo in todos"> 13 {{todo.text}} 14 </li> 15 </ul> 16 </div> 17 18 <script> 19 new Vue({ 20 el:'#app', 21 data:{ 22 todos:[ 23 {text:'我未来的那个人，你在哪里？'}, 24 {text:'饿不饿，有没有吃饭，天下雨有没有忘记带伞，不知道出生了没有？'}, 25 {text:'我不在日子里，一定要好好照顾自己！'} 26 ] 27 } 28 }) 29 </script> 30 </body> 31 </html>
第八个综合：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>综合练习</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input v-model="newTodo" v-on:keyup.enter="addTodo" /> 11 <ul> 12 <li v-for="todo in todos"> 13 <span>{{todo.text}}</span> 14 <button v-on:click="removeTodo($index)">移除</button> 15 </li> 16 </ul> 17 </div> 18 19 <script> 20 new Vue({ 21 el:'#app', 22 data:{ 23 newTodo:'', 24 todos:[{ 25 text:'增加一个样式' 26 }] 27 }, 28 methods:{ 29 addTodo:function(){ 30 var text=this.newTodo.trim() 31 if(text){ 32 this.todos.push({text:text}) 33 this.newTodo='' 34 } 35 }, 36 removeTodo:function(index){ 37 this.todos.splice(index,1) 38 } 39 } 40 }) 41 </script> 42 </body> 43 </html>