Vue学习第一天
学习记录使用
目录：
1、vue介绍
1_1)：vue介绍
1_2)：库和框架的区别
1_3)：后端的mvc和前端的mvvm的区别
2、vue的基本代码
3、vue的插值表达式
4、跑马灯案例
5、事件修饰符
6、v-model以及使用v-model实现简易计算器
7、vue中样式
7_1)：class
7_2)：style
8、vue中for循环
8_1)：循环遍历普通数组
8_2)：循环遍历对象数组
8_3)：循环遍历对象属性
8_4)：循环指定次数
8_5)：循环中key的使用
9、vue中v-if和v-show的使用
1、Vue介绍
1_1)：vue介绍
以前没用类似vue这种框架的时候，经常要在页面使用jq或者js操作dom元素，这就很恼火，代码很杂，冗余，然后这个vue解决的最大的问题就是我们不需要再去操作dom，而是只操作数据，不关心dom的操作。
1_2)：库和框架的区别
库是类似于一个插件，提供某一部分的功能。
框架是一整套的解决方案。
1_3)：后端MVC和前端MVVM的区别
首先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>Titletitle> 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>Titletitle> 6 7 <style type="text/css"> 8 [v-cloak] { 9 display: none; 10 } 11 style> 12 head> 13 <body> 14 15 <div id="app"> 16 17 <p v-cloak>===={{msg}}====p> 18 19 <p v-text="msg">======p> 20 21 <p v-text="msg2">p> 22 23 <p v-html="msg2">p> 24 28 <input type="button" v-bind:value="msg3" v-bind:title="msg3 + '是msg3变量的值'">input> 29 <br><br> 30 31 <input type="button" :value="msg3" :title="msg3 + '是msg3变量的值'">input> 32 33 34 <button v-on:click="showAlert" :title="msg4">测试事件button> 35 <br><br> 36 37 <button @click="showAlert">测试事件button> 38 39 <button type="button" v-bind:title="msg4">测试v-bindbutton> 40 41 <button type="button" :title="msg4">测试v-bindbutton> 42 43 <button type="button" :title="msg4" v-on:click="showAlert">测试v-onbutton> 44 45 <button type="button" :title="msg4" v-on:click="showAlert">测试v-onbutton> 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: "我是msg2
", 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>Titletitle> 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>Documenttitle> 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 36 39 40 45 46 47 52 55 56 62 63 64 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 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>Documenttitle> 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中样式
7_1)：class
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Documenttitle> 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 23 24 25 26 27 28 29 30 31 32 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>
7_2)：style
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Documenttitle> 6 <style>style> 7 head> 8 <body> 9 <div id="app"> 10 11 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中的循环
8_1)：循环遍历数组
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Documenttitle> 6 head> 7 <body> 8 <div id="app"> 9 10 11 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>Documenttitle> 6 head> 7 <body> 8 <div id="app"> 9 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>Documenttitle> 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>Documenttitle> 6 head> 7 <body> 8 <div id="app"> 9 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>Documenttitle> 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 17 18 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>Documenttitle> 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 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>