Vue学习第一天
学习记录使用
目录：
1、Vue介绍
1_1)：vue介绍
以前没用类似vue这种框架的时候，经常要在页面使用jq或者js操作dom元素，这就很恼火，代码很杂，冗余，然后这个vue解决的最大的问题就是我们不需要再去操作dom，而是只操作数据，不关心dom的操作。
库是类似于一个插件，提供某一部分的功能。
框架是一整套的解决方案。
首先mvc是后端的概念，mvvm是前端的概念。
mvc但是model、view，controller，mvvm是model、view、viewModel
前端mvvm的意思就是将页面和数据分离，model就代表这数据，view就代表着页面，viewModel就是控制model和view之间的关系(如将model中某些数据显示到view中)。
2、Vue的基本代码
1、导入vue的js
2、写一个div作为根容器，搞一个id为app
3、写js代码，创建一个new Vue，参数为一个json串，json串内有el属性，代表着需要接管的区域，然后data属性就是数据。
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>
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>
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>
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>
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>
7、vue中样式
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>
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>
8、vue中的循环
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>
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>
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>
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>
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>
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>