vue.js 初级之一

vue.js 是一个构建数据驱动的 web 界面渐进式驱动框架。

引用的话，直接使用script标签引入就可以了；

最简单的，创建一个vue对象，怎样引入到页面中呢？

1. 在调用vue对象时，要先创建对象，然后才调用，下面window.onload 使用的是es6的箭头函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/vue.js"></script>
10     <script>
11        
12         window.onload = () => {
13             // 创建第一个vue对象
14             new Vue({
15                 el: '#box',
16                 data: {
17                     name: 'huanying2015',
18                     age: 25,
19                     sex: 'man'
20                 }
21             });
22             // 创建第二个vue对象
23             new Vue({
24                 el: '#box1',
25                 data: {
26                     name: '路人甲',
27                     age: 23,
28                 }
29             });
30             new Vue({
31                 el: '.box',
32                 data: {
33                     card: '身份证',
34                 }
35             });
36 
37         }
38     </script>
39 </head>
40 
41 <body>
42     <!-- 调用第一个Vue对象中的数据 -->
43     <div id="box">
44         {{name}} <br/> {{age}} <br/> {{sex}}
45     </div>
46     <!-- 调用第二个vue对象中的数据 -->
47     <div id="box1">
48         <p>
49             {{name}}<br/> {{age}}
50         </p>
51         <p>
52             {{name}}<br/> {{age}}
53         </p>
54     </div>
55     <!-- 调用第三个vue对象中的数据 -->
56     <div class="box">
57         {{card}}
58     </div>
59 </body>
60 
61 </html>

运行结果：

2. vue 中绑定事件：在new Vue 中增加一个methods 属性，在methods 属性中增加方法，这样就可以在html行间增加行间事件，进行事件绑定了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/vue.js"></script>
10     <script>
11         window.onload = () => {
12             new Vue({
13                 el: 'body',
14                 methods: {
15                     show2() {
16                         alert('hello,你已经调用过vue了');
17                     },
18                     show() {
19                         alert("显示使用的函数是es6 的简写方式");
20                         this.show2();
21                     }
22                 }
23             });
24         }
25     </script>
26 </head>
27 
28 <body>
29     <!-- 绑定vue 的点击事件，使用的是在行间添加 行间事件 ，关键字 v-on:click  -->
30     <input type="button" value="点击触发事件" v-on:click="show();">
31 </body>
32 
33 </html>

运行结果：

3. vue中属性，事件的调用：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/vue.js"></script>
10     <script>
11         window.onload = () => {
12             new Vue({
13                 el: 'body',
14                 data: {
15                     name: 'huanying2015',
16                 },
17                 methods: {
18                     show1(n1, n2) {
19                         alert(n1 + n2);
20                     },
21                     show2(n1 = 100, n2 = 200) {
22                         alert(n1 + n2);
23                     },
24                     showName() {
25                         alert(this.name);
26                     }
27                 }
28             });
29         }
30     </script>
31 </head>
32 
33 <body>
34     <!-- 绑定vue 的点击事件，使用的是在行间添加 行间事件 ，关键字 v-on:click  -->
35     <input type="button" value="显示结果1" v-on:click="show1(100,200)">
36     <input type="button" value="显示结果2" v-on:click="show2(10,20)">
37     <input type="button" value="显示姓名" v-on:click="showName()">
38 </body>
39 
40 </html>

运行结果：

4. vue 中data属性中的其他数据格式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue.js"></script>
 9     <script>
10         window.onload = () => {
11             new Vue({
12                 el: 'body',
13                 data: {
14                     name: 'huanying2015',
15                     age: 25,
16                     userlist: ['zhangsan', 'lisi', 'wanger'],
17                     colorlist: {
18                         0: 'red',
19                         1: 'blue',
20                         2: 'yellow'
21                     },
22                     flag: true,
23                 },
24 
25             });
26         }
27     </script>
28 </head>
29 <body>
30     <div id="box">
31         {{name}}<br> 
32         {{age}}<br> 
33         {{userlist}}<br> 
34         {{colorlist}}<br> 
35         {{flag}}<br>
36     </div>
37 </body>
38 </html>

运行结果：

5. vue 中输出对象的时候，需要使用 v-for 进行循环，才能输出

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue.js"></script>
 9     <script>
10         window.onload = () => {
11             new Vue({
12                 el: 'body',
13                 data: {
14                     name: 'huanying2015',
15                     age: 25,
16                     userlist: ['zhangsan', 'lisi', 'wanger'],
17                     colorlist: {
18                         0: 'red',
19                         1: 'blue',
20                         2: 'yellow'
21                     },
22                     persons: {
23                         name1: '赵子龙',
24                         name2: '关云长',
25                         name3: '张翼德'
26                     },
27                     flag: true,
28                 },
29 
30             });
31         }
32     </script>
33 </head>
34 <body>
35     <div id="box">
36         <ul>
37             <li v-for="val in colorlist">{{val}}</li>
38         </ul>
39         <ul>
40             <li v-for="v in colorlist">{{v}}</li>
41         </ul>
42         <ul>
43             <li v-for="v in colorlist">{{$index}}---->{{v}}</li>
44         </ul>
45         <ul>
46             <li v-for="v in userlist">{{v}}</li>
47         </ul>
48         <ul>
49             <li v-for="v in userlist">{{$index}}---->{{v}}</li>
50         </ul>
51         <ul>
52             <li v-for="p in persons">{{$key}}--->{{$index}}---->{{p}}</li>
53         </ul>
54         <ul>
55             <li v-for="(k,v) in persons">{{k}}--->{{v}}---->{{$key}}--->{{$index}}</li>
56         </ul>
57 
58     </div>
59 </body>
60 </html>

运行结果：数组和对象

6. v-model 同步改变vue的data 值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/vue.js"></script>
10     <script>
11         window.onload = () => {
12             new Vue({
13                 el: '#box',
14                 data: {
15                     name: 'huanying2015',
16                     age: 25,
17                 },
18 
19             });
20         }
21     </script>
22 </head>
23 
24 <body>
25     <div id="box">
26         <input type="text" v-model="name">
27         <input type="text" v-model="name">
28         <br>
29         <p>{{name}}</p>
30         <p>{{name}}</p>
31     </div>
32 </body>
33 
34 </html>

运行结果：改变输入框的内容，可以同步显示在网页上

7. 修改数组的值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue.js"></script>
 9     <script>
10         window.onload = () => {
11             new Vue({
12                 el: '#box',
13                 data: {
14                     userList: ['zhangsan', 'lisi', 'wanger']
15                 },
16                 methods: {
17                     add() {
18                         this.userList.push("mazi");
19                     }
20                 }
21             });
22         }
23     </script>
24 </head>
25 <body>
26     <div id="box">
27         <input type="button" value="点击添加" v-on:click="add();">
28         <ul>
29             <li v-for="v in userList" track-by="$index">{{$index}}---->{{v}}</li>
30             <hr>
31             <hr>
32 
33             <li v-for="v in userList">{{$index}}---->{{v}}</li>
34         </ul>
35     </div>
36 </body>
37 </html>

运行结果：可以看出，点击添加的时候，循环输出是，没有加入track-by="$index"的循环，会把原来前面添加的覆盖，不再输出

8. vue中显示影藏的实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue.js"></script>
 9     <style>
10         div {
11             width: 300px;
12             height: 300px;
13             background: red;
14         }
15         [v-cloak] {
16             display: none;
17         }
18     </style>
19     <script>
20         window.onload = () => {
21             new Vue({
22                 el: '#box',
23                 data: {
24                     flag: false
25                 },
26                 methods: {
27                     tooglebg() {
28                         this.flag = !this.flag;
29                     }
30                 }
31             });
32         }
33     </script>
34 </head>
35 <body>
36     <ul id="box">
37         <input type="button" value="显示影藏" v-on:click="flag=!flag;">
38         <input type="button" value="使用方法操作显示影藏" v-on:click="tooglebg();">
39         <div v-show="flag" v-cloak> zheli </div>
40     </ul>
41 </body>
42 </html>

运行结果：在这里 v- show 是一个显示隐藏的开关，为false是隐藏，为true时显示

而 v-cloak 没有太多的作用，主要是为了预防闪动而增加的，预防在加载时出现闪动

posted on 2018-02-26 17:16 huanying2015 阅读(201) 评论(0) 编辑收藏举报