 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="./lib/vue-2.4.0.js"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     {{msg}}
12 </div>
13 
14 <script>
15     /*需要创建一个Vue实例，*/
16     // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
17     //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
18     var vm = new Vue({
19         el: "#app",  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
20         // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
21         data: { // data 属性中，存放的是 el 中要用到的数据
22             msg: "学习Vue的第一天" // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
23         }
24     });
25 </script>
26 </body>
27 </html>

vue的基本代码

3、Vue的插值表达式

　　1、{{表达式}}

　　2、v-cloak：解决文字闪动，就是数据没出来时来个display:none

　　3、v-text：会覆盖元素中原有内容，一样可以解决文字闪动

　　4、v-html：内容会被当成HTML代码被解析

　　5、v-bind:属性名，绑定元素的属性为我们指定的表达式，例如v-bind:title，可以简写为例如:title

　　6、v-on:事件名，绑定事件，事件写在vue参数的mehods中，例如v-on:click，可以简写为@click

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--    <script src="lib/vue-2.4.0.js"></script>-->
 7     <style type="text/css">
 8         [v-cloak] {
 9             display: none;
10         }
11     </style>
12 </head>
13 <body>
14 
15 <div id="app">
16     <!--v-cloak可以解决文字闪动，就是在标签数据未填充的时候给这个元素设置样式为display:none-->
17     <p v-cloak>===={{msg}}====</p>
18     <!--v-text会覆盖元素上原有数据,可以和v-cloak一样的效果-->
19     <p v-text="msg">======</p>
20     <!--v-text不会将数据看作html-->
21     <p v-text="msg2"></p>
22     <!--v-html会将数据看作html-->
23     <p v-html="msg2"></p>
24     <!--
25     v-bind:属性名    绑定一个数据，数据改变了以后，对应绑定的标签属性值也会跟着改变-,
26     v-bind中可以写合法的表达式，因为他是把绑定的值当作一个变量
27     -->
28     <input type="button" v-bind:value="msg3" v-bind:title="msg3 + '是msg3变量的值'"></input>
29     <br><br>
30     <!--v-bind:属性名可以简写为 :属性名-->
31     <input type="button" :value="msg3" :title="msg3 + '是msg3变量的值'"></input>
32 
33     <!--v-on:事件='js'，绑定事件-->
34     <button v-on:click="showAlert" :title="msg4">测试事件</button>
35     <br><br>
36     <!--可以简写为:@事件='js',也就是可以把v-on:简写为@-->
37     <button @click="showAlert">测试事件</button>
38 
39     <button type="button" v-bind:title="msg4">测试v-bind</button>
40     <!--v-bind:可以简写为:-->
41     <button type="button" :title="msg4">测试v-bind</button>
42     <!--v-on:事件名-->
43     <button type="button" :title="msg4" v-on:click="showAlert">测试v-on</button>
44     <!--可以简写为@事件名-->
45     <button type="button" :title="msg4" v-on:click="showAlert">测试v-on</button>
46 
47 </div>
48 <script src="lib/vue-2.4.0.js"></script>
49 <script>
50     new Vue({
51         el: "#app",
52         data: {
53             msg: "数据",
54             msg2: "<h1>我是msg2</h1>",
55             msg3: "数据3",
56             msg4: "测试事件的按钮"
57         }, methods: {
58             /*定义的方法*/
59             showAlert: function () {
60                 alert("测试事件")
61             }
62         }
63     });
64 </script>
65 
66 </body>
67 </html>

Vue的插值表达式

4、跑马灯案例

核心就是来一个定时器，定时的把字符串的第一位放到最后一位去，然后需要注意的就是重复开启定时器，使用一个标志来判断就好了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <button @click="lang">浪起来</button>
10     <button @click="stop">低调</button>
11     <p v-text="content" style="font-weight: bold"></p>
12 </div>
13 <script src="lib/vue-2.4.0.js"></script>
14 <script>
15     new Vue({
16         el: '#app',
17         data: {
18             content: "一二三四五六七八九十！",
19             interId: null
20         }, methods: {
21             lang() {
22                 /*
23                 * 定时任务，如果使用() =>{}的方式来实现匿名方法，那么内部的this就是外部的this
24                 * */
25                 if (this.interId == null) {
26                     this.interId = setInterval(() => {
27                         var pre = this.content.substring(0, 1);
28                         var end = this.content.substring(1);
29                         this.content = end + pre;
30                     }, 100);
31                 }
32             },
33             stop() {
34                 clearInterval(this.interId);
35                 this.interId = null;
36             }
37 
38         }
39     });
40 </script>
41 </body>
42 </html>

跑马灯案例

5、事件修饰符

　　1、.stop：阻止冒泡，例如我在现在的button上的click上写这么一个修饰符，那么就代表阻止该button后面的所有冒泡事件

　　2、.prevent：阻止默认行为，比如说我们的a标签默认行为就是跳转，当我们在a标签上放置一个click事件以后，click事件会被触发，但是a标签默认的跳转行为仍然会执行如果加上了prevent修饰符，那么改标签原来的行为就会被阻止。

　　 3、.capture：捕获触发事件的机制,例如原本我们这里应该是冒泡机制，也就是先打印btnMethod，然后打印innerMethod，但是用了capture这个修饰符以后，事件的机制就被改变，就变成了先打印innerMethod，然后打印btnMethod。

　　 4、.once：只触发一次事件处理函数。比如说.prevent，它可以阻止事件的默认行文，那么我们可以这样，让他第一次点击的时候阻止它的默认行为，后面就不阻止。例如a标签，第一次点击的时候，让他的a标签行为被阻止，然后后面就让不阻止它a标签的默认行为。

　　5、.self：阻止自身的冒泡行为

.stop和.self的不同：

stop是阻止后面的所有的冒泡行为

self是阻止自己身上的冒泡行为

  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     <title>Document</title>
  8     <style>
  9         * {
 10             margin: 0px;
 11             padding: 0px;
 12         }
 13 
 14         .inner {
 15             margin: 20px;
 16             width: 100%;
 17             height: 300px;
 18             background-color: #007acc;
 19         }
 20         .inner2 {
 21             margin: 20px;
 22             width: 100%;
 23             height: 500px;
 24             background-color: #cd6121;
 25         }
 26     </style>
 27 </head>
 28 
 29 <body>
 30     <div id="app" >
 31         <!-- 冒泡机制：子元素中的事件触发后，父元素中的事件也会被触发。 -->
 32         <!-- 
 33             事件修饰符： 
 34             .stop：阻止冒泡，例如我在现在的button上的click上写这么一个修饰符，那么就代表阻止该button后面的所有冒泡事件。
 35         -->
 36         <!-- <div class="inner" @click="innerMethod">
 37             <button @click.stop="btnMethod" style="margin: 20px;padding: 20px;font-size: 30px;">这是一个按钮</button>
 38         </div> -->
 39         
 40         <!-- 
 41             事件修饰符：
 42             .prevent：阻止默认行为，比如说我们的a标签默认行为就是跳转，当我们在a标签上放置一个click事件以后，click事件会被触发，但是a标签默认的跳转行为仍然会执行
 43                       如果加上了prevent修饰符，那么改标签原来的行为就会被阻止。
 44          -->
 45          <!-- <a href="http://www.baidu.com" @click.prevent="toBadidu">去往百度</a> -->
 46 
 47          <!-- 事件修饰符：
 48               .capture：捕获触发事件的机制,
 49                 例如原本我们这里应该是冒泡机制，也就是先打印btnMethod，然后打印innerMethod，但是用了capture这个修饰符以后，
 50                 事件的机制就被改变，就变成了先打印innerMethod，然后打印btnMethod。
 51          -->
 52         <!-- <div class="inner" @click.capture="innerMethod">
 53             <button type="button" style="margin: 20px;padding: 20px;font-size: 30px;" @click="btnMethod">我是按钮</button>
 54         </div> -->
 55         
 56         <!-- 
 57             事件修饰符：
 58             .once：只触发一次事件处理函数。
 59             比如说.prevent，它可以阻止事件的默认行文，那么我们可以这样，让他第一次点击的时候阻止它的默认行为，后面就不阻止。
 60             例如a标签，第一次点击的时候，让他的a标签行为被阻止，然后后面就让不阻止它a标签的默认行为。
 61         -->
 62         <!-- <a href="http://www.baidu.com" @click.prevent.once="toBadidu">去百度</a> -->
 63         
 64         <!-- 事件修饰符：
 65             .self：阻止自身的冒泡行为
 66             
 67             .stop和.self的不同：
 68                 stop是阻止后面的所有的冒泡行为
 69                 self是阻止自己身上的冒泡行为
 70         -->
 71         <div class="inner2" @click="innerMethod2">
 72             <div class="inner" @click.self="innerMethod">
 73                 <button type="button" style="margin: 20px;padding: 20px;font-size: 30px;" @click="btnMethod">我是按钮</button>
 74              </div>
 75          </div>
 76 
 77     </div>
 78 </body>
 79 <script src="lib/vue-2.4.0.js"></script>
 80 <script>
 81     new Vue({
 82         el: "#app",
 83         data: {
 84 
 85         },
 86         methods: {
 87             innerMethod(){
 88                 console.log("innerMethod");
 89             }, 
 90             btnMethod(){
 91                 console.log("btnMethod");
 92             },
 93             innerMethod2(){
 94                 console.log("innerMethod2");
 95             },
 96             toBadidu(){
 97                 console.log("去百度了");
 98             }
 99 
100         }
101     });
102 </script>
103 
104 </html>

Vue的事件修饰符

6、v-model以及使用v-model实现简易计算器

v-model(只能应用到表单元素中):

双向数据绑定，

vm的嘛，v是视图，m是model，m中修改了v中就会修改，v中修改了m中也会修改

通俗的话，比如我们的v-model写在了input中，我们代码中对绑定的数据就行修改了，那么input上也会相应的更改数据的显示

我们在input中输入了东西，那么Vue实例中绑定的数据也会相应的更改。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>v-mode使用</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!-- 
10             v-model(只能应用到表单元素中):
11                 双向数据绑定，
12                 vm的嘛，v是视图，m是model，m中修改了v中就会修改，v中修改了m中也会修改
13                 通俗的话，比如我们的v-model写在了input中，我们代码中对绑定的数据就行修改了，那么input上也会相应的更改数据的显示
14                          我们在input中输入了东西，那么Vue实例中绑定的数据也会相应的更改。
15                 
16                 可以在console中进行测试：
17                    > window.vue.name
18                    < "这是一个name"
19                    > window.vue.name
20                    < "这是一个name啊啊按时啊啊"
21                    > window.vue.name="哈哈"
22                    < "哈哈"
23          -->
24          <input type="text" name="" v-model="name">
25     </div>
26 <script src="lib/vue-2.4.0.js"></script>
27 <script>
28     var vue = new Vue({
29         el: "#app",
30         data: {
31             name: "这是一个name"
32         },methods:{
33             
34         }
35     });
36 </script>
37 </body>
38 </html>

v-model使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10     <div id="app">
11         <input type="number" v-model="num1">
12         <select v-model="opt">
13             <option value="+">+</option>
14             <option value="-">-</option>
15             <option value="*">*</option>
16             <option value="/">/</option>
17         </select>
18         <input type="number" v-model="num2">
19         =
20         <input type="text" v-model="result">
21         <button @click="calcute">计算</button>
22     </div>
23 </body>
24 <script src="lib/vue-2.4.0.js"></script>
25 <script>
26     var vue = new Vue({
27         el: "#app",
28         data: {
29             num1: 0,
30             num2: 0,
31             result: 0,
32             opt: "+"
33         }, methods: {
34             calcute() {
35                 switch (this.opt) {
36                     case "+":
37                         this.result = parseInt(this.num1) + parseInt(this.num2)
38                         break;
39                     case "-":
40                         this.result = parseInt(this.num1) - parseInt(this.num2)
41                         break;
42                     case "*":
43                         this.result = parseInt(this.num1) * parseInt(this.num2)
44                         break;
45                     case "/":
46                         this.result = parseInt(this.num1) / parseInt(this.num2)
47                         break;
48                     default:
49                         break;
50                 }
51             }
52         },
53     });
54 </script>
55 
56 </html>

使用v-model实现简易计算器

7、vue中样式

7_1)：class

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         /* 随便来两个样式 */
 8         .style1{
 9             color: red;
10         }
11         .style2{
12             font-size: 50px;
13         }
14         .style3{
15             font-weight: 100;
16             /* font-family: "微软雅黑"; */
17         }
18     </style>
19 </head>
20 <body>
21     <div id="app">
22         <!-- 原先HTML中给元素增加样式的话话，直接使用class属性，多个样式使用空格区分 -->
23         <!-- <h1 class="style1 style2">这是一段h1的文字</h1> -->
24         
25         <!-- 在vue中给元素增加样式，可以直接使用v-bind把class绑定，然后进行指定样式 -->
26         <!-- 1、直接传递一个数组，需要注意因为我们传入的是数组，也就是使用了vue的方式，所以要给class绑定 -->
27         <!-- <h1 :class="['style1','style2','style3']">我应用了三个样式</h1> -->
28         <!-- 2、我们还可以在里面编写三元表达式，注意这里的flag是在data中的数据，不要给他加单引号 -->
29         <!-- <h1 :class="['style1','style2',flag?'style3':'']">我使用了三元表达式</h1> -->
30         <!-- 3、我们还可以使用对象来代替三元表达式，使用方法就是把数组中的一个元素更改为 {'样式名':表达式} -->
31         <!-- <h1 :class="['style1','style2',{'style3':flag}]">我使用了对象来代替三元表达式</h1> -->
32         <!-- 4、还可以直接写一个变量 -->
33         <h1 :class="h1Obj">我的样式直接被写了一个变量，这个变量的值就是我的样式，变量在data中</h1>
34     </div>
35 </body>
36 <script src="lib/vue-2.4.0.js"></script>
37 <script>
38     var vue = new Vue({
39         el: "#app",
40         data: {
41             flag: true,
42             h1Obj: { style1: true, style2: true, style3: true }
43         },methods: {
44             
45         },
46     });
47 </script>
48 </html>

class

7_2)：style

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style></style>
 7 </head>
 8 <body>
 9     <div id="app">
10         <!-- 上一个是直接绑定class，我们其实还可以直接绑定style，因为绑定的内容会被当做表达式，所以我们也是直接在data中书写style的内容 -->
11         <!-- <h1 :style="h1Style">我的style被绑定了！</h1> -->
12         <!-- 上面我们只绑定了一个，我们还可以用数组来绑定多个 -->
13         <h1 :style="[h1Style,h1Style2]">我的style被绑定了多个</h1>
14     </div>
15 </body>
16 <script src="lib/vue-2.4.0.js"></script>
17 <script >
18     var vue = new Vue({
19         el: "#app",
20         data:{
21             h1Style: {'font-size':'50px' },
22             h1Style2: {color: 'red'}
23         },methods: {
24             
25         },
26     });
27 </script>
28 </html>

style

8、vue中的循环

8_1)：循环遍历数组

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!-- 语法：v-for="每一项 in 表达式(可以是数组,可以是变量,可以是方法)" -->
10         <!-- <h4 v-for="item in list1">{{item}}</h4> -->
11         <!-- 我们通常都需要获取每次循环的当前index， -->
12         <h4 v-for="(item,index) in list1">值:{{item}} 下标:{{index}}</h4>
13     </div>
14 <script src="lib/vue-2.4.0.js"></script>
15 <script>
16     var vue = new Vue({
17         el: "#app",
18         data: {
19             list1:["张三","李四","王麻子","赵六呀"]
20         },methods: {
21             
22         },
23     });
24 </script>
25 </html>

循环遍历数组

8_2)：循环对象数组

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!-- for循环遍历对象数组和遍历普通数组的方式完全一样，只是遍历的数据不一样而已 -->
10         <h1 v-for="(item,index) in list1">
11             内容:{{item.name}} 下标:{{index}}
12         </h1>
13     </div>
14 </body>
15 <script src="lib/vue-2.4.0.js"></script>
16 <script>
17     var vue = new Vue({
18         el: "#app",
19         data:{
20             list1: [
21                 {name:"张三"},{name:"李四"},{name:"王五"}
22             ]
23         },methods: {
24             
25         },
26     });
27 </script>
28 </html>

循环遍历对象数组

8_3)：循环对象属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!-- 如果是这种遍历，那么就可以有三个参数，第一个为遍历出来的值，第二个为键，第三个为下标 -->
10         <h1 v-for="(item,key,i) in obj">
11             第{{i+1}}个属性的名字为{{key}}，值是:{{item}}
12         </h1>
13     </div>
14 </body>
15 <script src="lib/vue-2.4.0.js"></script>
16 <script>
17     var vue = new Vue({
18         el: "#app",
19         data: {
20             obj: { name: "赵六", gender: "男", age: 20}
21         },methods: {
22             
23         },
24     })
25 </script>
26 </html>

循环遍历对象属性

8_4)：循环指定次数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!-- 前面说过in后面的是一个表达式，那么就代表着也可以是一个数字 -->
10         <h1 v-for="count in 10">这是第{{count}}次循环</h1>
11     </div>
12 </body>
13 <script src="lib/vue-2.4.0.js"></script>
14 <script>
15     var vue = new Vue({
16         el: "#app",
17         data:{
18 
19         },methods: {
20             
21         },
22     })
23 </script>
24 </html>

循环指定次数

8_5)：循环中key的使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         id:
10         <input type="text" v-model="id">
11         name:
12         <input type="text" v-model="name">
13         <button @click="add">添加</button>
14         <br>
15         <!-- 如果就这样运行会出现一个问题，当我们选中了第一个以后，添加一次，那么选中就会变成新添加的那个，而我们原来选中的就不会被选中 -->
16         <!-- <h4 v-for="item in list"> -->
17             <!-- 针对这种情况，我们就可以使用key来标识当前列，这样就就不会出现上面的情况了， -->
18             <!-- 需要注意的是，key是需要v-bind绑定的，而且只能为number或者string -->
19         <h4 v-for="item in list" :key="item.id">
20             <input type="checkbox" >{{item.id}}----{{item.name}}
21         </h4>
22     </div>
23 </body>
24 <script src="lib/vue-2.4.0.js"></script>
25 <script>
26     var vue = new Vue({
27         el: "#app",
28         data:{
29             id:'',
30             name:'',
31             list:[
32                 {id:1,name:"张三"},
33                 {id:2,name:"李四"},
34                 {id:3,name:"王五"},
35                 {id:4,name:"赵六"},
36                 {id:5,name:"田七"}
37             ]
38         },methods: {
39             add(){
40                 /*添加到集合的顶部*/
41                 this.list.unshift({id:this.id,name:this.name});
42             }
43         }
44     })
45 </script>
46 </html>

循环中kye的使用

9、v-if和v-show的使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <button @click="flag=!flag">切换</button>
10         <h1 v-if="flag">使用v-if的</h1>
11         <h1 v-show="flag">使用v-show的</h1>
12         <!-- 当我们点击切换的时候会发现，
13             当flag为false时：
14                 v-if的元素就不存在
15                 v-show的元素而是给它加了一个display:none达到不显示的效果
16             当flag为true时：
17                 v-if的元素被创建
18                 v-show的元素依然被创建，只是display:none被删除
19             得出结论：
20                 当元素会被频繁的切换的时候，使用v-show，因为v-show只是修改style属性，而v-if则是直接删除/创建元素。
21                 当元素仅仅是判断是否显示的时候，使用v-if，如果使用v-show，那么元素仍然被创建，只是利用display:none达到不显示的效果    
22         -->
23     </div>
24 </body>
25 <script src="lib/vue-2.4.0.js"></script>
26 <script>
27     var vue = new Vue({
28         el: "#app",
29         data: {
30             flag: true
31         },methods: {
32             
33         },
34     });
35 </script>
36 </html>

v-if和v-show 的使用

查看全文

相关阅读:
手机微信浏览器手动清楚浏览器缓存
 CSS 图像精灵怎么用(css sprites定位技术）图标定位
 电商平台应该分析哪些数据？具体怎么去分析？
酷家乐装修方案
 字体识别（根据图片截图识别字体）求字体
 酿造系列：自己酿造夏日饮用的低度甜酒好喝吗？如何酿造？
xcode Xcode_9.2.xip 官方离线下载地址
 nginx给server增加日志配置
 用monit监控mongodb，崩溃后自动重启mongdb
电商产品经理进阶一：电商基础流程

原文地址：https://www.cnblogs.com/daihang2366/p/12753236.html