看到了很多，关于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>
View Code
第二个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>
View Code
第三个双向绑定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>
View Code
第四个双向绑定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>
View Code
第五个用户处理：
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>
View Code
第六个用户处理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>
View Code
第七个渲染列表：
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>
View Code
第八个综合：
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>
View Code
