vue入门案例

1、技术在迭代，有时候你为了生活没有办法，必须掌握一些新的技术，可能你不会或者没有时间造轮子，那么就先把利用轮子吧。

 1 
 2 
 3 
 4 "UTF-8">
 5 
 6 
 7 
 8 
 9 
10 
11 
12 
"app">{{message}}
13 
14 
23 
24 

 2、挂载点，模板，实例之前的关系：

 1 
 2 
 3 
 4 "UTF-8">
 5 
 6 
 7 
 8 
 9 
10 
11 
12 
13 
14 
15 
16 
"app">
17 
18 
19 
"app2">{{message}}
20 
21 
40 
41 

 3、Vue中方法的使用以及属性的改变，Vue实例中的数据，事件，方法。

 1 
 2 
 3 
 4 "UTF-8">
 5 
 6 
 7 
 8 
 9 
10 
11 
12 
13 
14 
15 
16 
"app">
17 
18 
19 
"app2">{{message}}
20 
21 
22 
23 
24 
25 
"app3">
26     
27     
"()=>{alert('world vue!!!')}">{{msg}}
28     
"handleClick">{{msg}}
29     
30     
"handleClick2">{{msg}}
31 
32 
33 
34 
70 
71 

4、vue中属性绑定和双向数据绑定。1）、v-bind:等同于:。2）、v-on:等同于@。3）、双向绑定v-model。

 1 
 2 
 3 
 4 "UTF-8">
 5 
 6 
 7 
 8 
 9 
10 
11 
12 
"app1">
13     
"title">{{msg}}
14     
"'I am biehl , ' + title">{{msg}}
15     
16     "text" name="userName" v-bind:value="content">
17     
{{content}}
18     
19     "password" name="password" v-model="password">
20     
{{password}}
21 
22 
23 
24 
25 
37 
38     

5、Vue中计算属性和侦听器。

 1 
 2 
 3 
 4 "UTF-8">
 5 
 6 
 7 
 8 
 9 
10 
11 
12 
"app1">
13     
"title">{{msg}}
14     
"'I am biehl , ' + title">{{msg}}
15     
16     "text" name="userName" v-bind:value="content">
17     
{{content}}
18     
19     "password" name="password" v-model="password">
20     
{{password}}
21 
22 
23 


24 
25 
26 
"app2">
27     姓："text" name="firstName" v-model="firstName" />

28     名："text" name="lastName" v-model="lastName" />    

29     
30     姓名：{{firstName}}{{lastName}}    

31     姓名：{{fullName}}

32 
33     
{{count}}
34     
"count">
35     
"count">
36 
37     
38 
39 
40 
41 
42 
43 
84 
85     

6、Vue中的v-if、v-for、v-show命令。

 1 
 2 
 3 
 4 "UTF-8">
 5 
 6 
 7 
 8 
 9 
10 
11 
12 
"app1">
13     
14     
if="show">{{msg}}
    
15     "button" @click="handleClick">toggle
16 
17     


18 
19     
20     
"show">{{msg}}
    
21     "button" @click="handleClick2">toggle
22 
23     
24     

25         
26         
for="(item,index) of list" :key="item">{{item}}
27     
28 
29 
30 
31 
32 
53 
54         

 7、Vue的全局组件、局部组件。

 1 
 2 
 3 
 4 "UTF-8">
 5 
 6 
 7 
 8 
 9 
10 
11 
"app1">
12     

13         
14         "text" name="userName" v-model="inputValue"/>    
15         
16         "handleClick">提交
17         
21 
22         
23         
26 
27         
28         

29             for="(item,index) of list" :key="index" :content="item">{{item}}
30         
31 
32     
33 
34 
35 
36 
76