视频地址：由于要有flash才能看，所以用了qq浏览器观看。
一.基本语法
第2讲初见Vue.js
1.vue的基本代码
1）插值表达式
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 10 <!-- 1. 导入Vue的包 --> 11 <!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> --> 12 <script src="./lib/vue-2.4.0.js"></script> 13 </head> 14 15 <body> 16 <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 插值 表达式 --> 17 <div id="app"> 18 <p>{{ msg }}</p> 19 <p>{{ msg2 }}</p> 20 <p>{{ msg3 }}</p> 21 <p>{{ msg4 }}</p> 22 </div> 23 24 <script> 25 // 2. 创建一个Vue的实例 26 // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数 27 var vm = new Vue({ 28 el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域 29 data: { // data 属性中，存放的是 el 中要用到的数据 30 msg: 'Hello Vue33!', // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】 31 msg2: 'Hello Vue2224422!', 32 msg3: 'Hello Vue33!', 33 msg4: 'Hello Vue244!' 34 } 35 }) 36 </script> 37 </body> 38 39 </html>
2.v-cloak的学习
1)v-cloak：解决网络慢时显示为插值表达式，原理是数据没有传给插值表达式的时候，先将其隐藏（style设置为display:none）
2)v-text：将页面上原来的值覆盖掉
3）v-html：可以传递html标签，覆盖掉原值
4）v-bind：绑定input按钮
5）v-on：绑定事件，比如v-on:click，可以缩写为@click
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 <style> 10 [v-cloak] { 11 display: none; 12 } 13 </style> 14 </head> 15 16 <body> 17 <div id="app2"> 18 <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 --> 19 <!-- <p v-cloak>{{ msg }}</p> --> 20 21 <!-- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把整个元素的内容清空 --> 22 <!-- <h4 v-text="msg">==================</h4> 23 <div>{{msg2}}</div> 24 <div v-text="msg2"></div> 25 <div v-html="msg2">1212112</div> --> 26 27 <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 --> 28 <input type="button" value="按钮" v-bind:title="mytitle + 'qqqqqqqqqqqqq'"> 29 <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 --> 30 <!-- v-bind 中，可以写合法的JS表达式 --> 31 32 <!-- Vue 中提供了 v-on: 事件绑定机制 --> 33 <input type="button" value="按钮" :title="mytitle" v-on:click="show2"> 34 <input type="button" value="按钮@" @click="show3"> 35 </div> 36 37 <script src="./lib/vue-2.4.0.js"></script> 38 39 <script> 40 var vm = new Vue({ 41 el: '#app2', 42 data: { 43 msg: '123', 44 msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>', 45 mytitle: '这是一个自己定义的title111111111' 46 }, 47 methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法 48 show2: function () { 49 alert('Hello') 50 }, 51 show3(){ 52 alert('Hello3333'); 53 } 54 } 55 }) 56 </script> 57 </body> 58 59 </html> 60 61 <!-- 1. 如何定义一个基本的Vue代码结构 --> 62 <!-- 2. 插值表达式 和 --> 63 <!-- 3. v-cloak --> 64 <!-- 4. v-text 和 v-html --> 65 <!-- 5. v-bind Vue提供的属性绑定机制 缩写是 : --> 66 <!-- 6. v-on Vue提供的事件绑定机制 缩写是 @ -->
3.事件修饰符
1）使用 .stop 阻止冒泡，例：@click.stop
2）使用 .prevent 阻止默认行为
3） 使用 .capture 实现捕获触发事件的机制
4）使用 .self 实现只有点击当前元素时候，才会触发事件处理函数
5）使用 .once 只触发一次事件处理函数
6）.stop 和 .self 的区别：.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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 <style> 11 .inner { 12 height: 150px; 13 background-color: darkcyan; 14 } 15 16 .outer { 17 padding: 40px; 18 background-color: red; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div id="app"> 25 <!-- 使用 .stop 阻止冒泡 26 <div class="inner" @click="div1Handler"> 27 <input type="button" value="戳他" @click.stop="btnHandler"> 28 </div> --> 29 30 <!-- 使用 .prevent 阻止默认行为 --> 31 <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> --> 32 33 <!-- 使用 .capture 实现捕获触发事件的机制 --> 34 <!-- <div class="inner" @click.capture="div1Handler"> 35 <input type="button" value="戳他" @click="btnHandler"> 36 </div> --> 37 38 <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 --> 39 <!-- <div class="inner" @click.self="div1Handler"> 40 <input type="button" value="戳他" @click="btnHandler"> 41 </div> --> 42 43 <!-- 使用 .once 只触发一次事件处理函数 --> 44 <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> --> 45 46 47 <!-- 演示： .stop 和 .self 的区别 --> 48 <!-- <div class="outer" @click="div2Handler"> 49 <div class="inner" @click="div1Handler"> 50 <input type="button" value="戳他" @click.stop="btnHandler"> 51 </div> 52 </div> --> 53 54 <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 --> 55 <div class="outer" @click="div2Handler"> 56 <div class="inner" @click.self="div1Handler"> 57 <input type="button" value="戳他" @click="btnHandler"> 58 </div> 59 </div> 60 61 </div> 62 63 <script> 64 // 创建 Vue 实例，得到 ViewModel 65 var vm = new Vue({ 66 el: '#app', 67 data: {}, 68 methods: { 69 div1Handler() { 70 console.log('这是触发了 inner div 的点击事件') 71 }, 72 div2Handler() { 73 console.log('这是触发了 outer div 的点击事件') 74 }, 75 btnHandler() { 76 console.log('这是触发了 btn 按钮 的点击事件') 77 }, 78 linkClick() { 79 console.log('触发了连接的点击事件') 80 } 81 } 82 }); 83 </script> 84 </body> 85 86 </html>
第3讲Vue.js基础
4.v-model指令的学习
1）v-bind单向绑定，v-model双向绑定
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- v-bind 只能实现数据的单向绑定，无法实现数据的双向绑定 --> 15 <input type="text" v-bind:value="msg" style="100%;"> 16 17 <!-- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 --> 18 <!-- 注意： v-model 只能运用在 表单元素中 --> 19 <!-- input select textarea --> 20 <!-- <input type="text" style="100%;" v-model="msg"> --> 21 </div> 22 23 <script> 24 // 创建 Vue 实例，得到 ViewModel 25 var vm = new Vue({ 26 el: '#app', 27 data: { 28 msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！' 29 }, 30 methods: { 31 } 32 }); 33 </script> 34 </body> 35 36 </html>
5.vue中样式-class
1）第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定
2）在数组中使用三元表达式
3）在数组中使用 对象来代替三元表达式，提高代码的可读性
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-2.4.0.js"></script> 10 <style> 11 .red { 12 color: red; 13 } 14 15 .thin { 16 font-weight: 200; 17 } 18 19 .italic { 20 font-style: italic; 21 } 22 23 .active { 24 letter-spacing: 0.5em; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div id="app"> 31 <!-- <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1> --> 32 33 <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 --> 34 <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> 35 36 <!-- 在数组中使用三元表达式 --> 37 <!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> --> 38 39 <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 --> 40 <!-- <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> --> 41 42 <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符 --> 43 <!-- <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1> --> 44 45 46 </div> 47 48 <script> 49 // 创建 Vue 实例，得到 ViewModel 50 var vm = new Vue({ 51 el: '#app', 52 data: { 53 flag: true, 54 classObj: { red: true, thin: true, italic: false, active: false } 55 }, 56 methods: {} 57 }); 58 </script> 59 </body> 60 61 </html>
6.vue中样式-style
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- 对象就是无序键值对的集合 --> 15 <!-- <h1 :style="styleObj1">这是一个h1</h1> 16 17 <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1> --> 18 </div> 19 20 <script> 21 // 创建 Vue 实例，得到 ViewModel 22 var vm = new Vue({ 23 el: '#app', 24 data: { 25 styleObj1: { color: 'red', 'font-weight': 200 }, 26 styleObj2: { 'font-style': 'italic' } 27 }, 28 methods: {} 29 }); 30 </script> 31 </body> 32 33 </html>
7.v-for循环普通数组
1）普通方法是挨个列出，但是数量过多时就比较麻烦
2）v-for遍历，例如：v-for="item in list"
3）带索引的v-for遍历，例如：v-for="(item, i) in list"
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <p>{{list[0]}}</p> 15 <p>{{list[1]}}</p> 16 <p>{{list[2]}}</p> 17 <p>{{list[3]}}</p> 18 <p>{{list[4]}}</p> 19 20 <!-- <p v-for="item in list">{{item}}</p> --> 21 <!-- <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p> --> 22 23 </div> 24 25 <script> 26 // 创建 Vue 实例，得到 ViewModel 27 var vm = new Vue({ 28 el: '#app', 29 data: { 30 list: [0, 2, 4, 6, 8] 31 }, 32 methods: {} 33 }); 34 </script> 35 </body> 36 37 </html>
8.v-for循环对象数组
1）v-for遍历，引用时用对象.属性来获取值，例如：v-for="(user, i) in list"
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p> 15 </div> 16 17 <script> 18 // 创建 Vue 实例，得到 ViewModel 19 var vm = new Vue({ 20 el: '#app', 21 data: { 22 list: [ 23 { id: 1, name: 'zs1' }, 24 { id: 2, name: 'zs2' }, 25 { id: 3, name: 'zs3' }, 26 { id: 4, name: 'zs4' } 27 ] 28 }, 29 methods: {} 30 }); 31 </script> 32 </body> 33 34 </html>
9.v-for循环对象
1）v-for="(val, key, i) in user"
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 --> 15 <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p> 16 </div> 17 18 <script> 19 // 创建 Vue 实例，得到 ViewModel 20 var vm = new Vue({ 21 el: '#app', 22 data: { 23 user: { 24 id: 1, 25 name: '托尼·屎大颗', 26 gender: '男' 27 } 28 }, 29 methods: {} 30 }); 31 </script> 32 </body> 33 34 </html>
10.v-for迭代数字
1）迭代数字从1开始，例：v-for="count in 10"
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 --> 15 <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --> 16 <p v-for="count in 10">这是第 {{ count }} 次循环</p> 17 </div> 18 19 <script> 20 // 创建 Vue 实例，得到 ViewModel 21 var vm = new Vue({ 22 el: '#app', 23 data: {}, 24 methods: {} 25 }); 26 </script> 27 </body> 28 29 </html>
11.v-for循环中key属性的使用
1）在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值。例：v-for="item in list" :key="item.id"。
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 15 <div> 16 <label>Id: 17 <input type="text" v-model="id"> 18 </label> 19 20 <label>Name: 21 <input type="text" v-model="name"> 22 </label> 23 24 <input type="button" value="添加" @click="add"> 25 </div> 26 27 <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string --> 28 <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 --> 29 <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 --> 30 <p v-for="item in list" :key="item.id"> 31 <input type="checkbox">{{item.id}} --- {{item.name}} 32 </p> 33 </div> 34 35 <script> 36 // 创建 Vue 实例，得到 ViewModel 37 var vm = new Vue({ 38 el: '#app', 39 data: { 40 id: '', 41 name: '', 42 list: [ 43 { id: 1, name: '李斯' }, 44 { id: 2, name: '嬴政' }, 45 { id: 3, name: '赵高' }, 46 { id: 4, name: '韩非' }, 47 { id: 5, name: '荀子' } 48 ] 49 }, 50 methods: { 51 add() { // 添加方法 52 this.list.push({ id: this.id, name: this.name }) 53 console.log(this.id); 54 console.log(this.name) 55 } 56 } 57 }); 58 </script> 59 </body> 60 61 </html>
12.v-if和v-show的使用
1）v-if和v-show的区别
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 15 <!-- <input type="button" value="toggle" @click="toggle"> --> 16 <input type="button" value="toggle" @click="flag=!flag"> 17 18 <!-- v-if 的特点：每次都会重新删除或创建元素 --> 19 <!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --> 20 21 <!-- v-if 有较高的切换性能消耗 --> 22 <!-- v-show 有较高的初始渲染消耗 --> 23 24 <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show --> 25 <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if --> 26 <h3 v-if="flag">这是用v-if控制的元素</h3> 27 <h3 v-show="flag">这是用v-show控制的元素</h3> 28 29 </div> 30 31 <script> 32 // 创建 Vue 实例，得到 ViewModel 33 var vm = new Vue({ 34 el: '#app', 35 data: { 36 flag: false 37 }, 38 methods: { 39 /* toggle() { 40 this.flag = !this.flag 41 } */ 42 } 43 }); 44 </script> 45 </body> 46 47 </html>
二.实例
1.品牌列表案例
1)列表的加载以及基本的增删查
2）:key="item.id
3)Array.findIndex()
4)Array.splice()
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-2.4.0.js"></script> 10 <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> 11 <!-- 需要用到Jquery吗？？？ --> 12 </head> 13 14 <body> 15 <div id="app"> 16 17 <div class="panel panel-primary"> 18 <div class="panel-heading"> 19 <h3 class="panel-title">添加品牌</h3> 20 </div> 21 <div class="panel-body form-inline"> 22 <label> 23 Id: 24 <input type="text" class="form-control" v-model="id"> 25 </label> 26 27 <label> 28 Name: 29 <input type="text" class="form-control" v-model="name"> 30 </label> 31 32 <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --> 33 <input type="button" value="添加" class="btn btn-primary" @click="add()"> 34 35 <label> 36 搜索名称关键字： 37 <input type="text" class="form-control" v-model="keywords"> 38 </label> 39 </div> 40 </div> 41 42 43 44 <table class="table table-bordered table-hover table-striped"> 45 <thead> 46 <tr> 47 <th>Id</th> 48 <th>Name</th> 49 <th>Ctime</th> 50 <th>Operation</th> 51 </tr> 52 </thead> 53 <tbody> 54 <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 --> 55 <!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 --> 56 <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 --> 57 <tr v-for="item in search(keywords)" :key="item.id"> 58 <td>{{ item.id }}</td> 59 <td v-text="item.name"></td> 60 <td>{{ item.ctime }}</td> 61 <td> 62 <a href="" @click.prevent="del(item.id)">删除</a> 63 </td> 64 </tr> 65 </tbody> 66 </table> 67 68 69 70 </div> 71 72 <script> 73 // 创建 Vue 实例，得到 ViewModel 74 var vm = new Vue({ 75 el: '#app', 76 data: { 77 id: '', 78 name: '', 79 keywords: '', // 搜索的关键字 80 list: [ 81 { id: 1, name: '奔驰', ctime: new Date() }, 82 { id: 2, name: '宝马', ctime: new Date() }, 83 { id: 3, name: 'TPshop', ctime: new Date() } 84 ] 85 }, 86 methods: { 87 add() { // 添加的方法 88 // console.log('ok') 89 // 分析： 90 // 1. 获取到 id 和 name ,直接从 data 上面获取 91 // 2. 组织出一个对象 92 // 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中 93 // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上； 94 95 // 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作； 96 97 var car = { id: this.id, name: this.name, ctime: new Date() } 98 this.list.push(car) 99 this.id = this.name = '' 100 }, 101 del(id) { // 根据Id删除数据 102 // 分析： 103 // 1. 如何根据Id，找到要删除这一项的索引 104 // 2. 如果找到索引了，直接调用 数组的 splice 方法 105 106 /* this.list.some((item, i) => { 107 if (item.id == id) { 108 this.list.splice(i, 1) 109 // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环 110 return true; 111 } 112 }) */ 113 114 115 var index = this.list.findIndex(item =>item.id == id) 116 alert(index); 117 // console.log(index) 118 this.list.splice(index, 1) 119 }, 120 search(keywords) { // 根据关键字，进行数据的搜索 121 /* */ 122 var newList = [] 123 this.list.forEach(item => { 124 if (item.name.indexOf(keywords) != -1) { 125 console.log(item.name) 126 newList.push(item) 127 } 128 }) 129 return newList 130 131 // 注意： forEach some filter findIndex 这些都属于数组的新方法， 132 // 都会对数组中的每一项，进行遍历，执行相关的操作； 133 /* 134 135 136 137 var arr_list = this.list.filter(item => { 138 139 if (item.name.includes(keywords)) { 140 return item 141 } 142 }) 143 return arr_list 144 */ 145 /* 146 var arr_list = this.list.filter(item => item.name.includes(keywords)) 147 return arr_list; 148 */ 149 /* 150 var arr_list = this.list.filter(item => true) 151 return arr_list; 152 */ 153 // return newList 154 } 155 } 156 }); 157 </script> 158 </body> 159 160 </html>
2.品牌列表案例2
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-2.4.0.js"></script> 10 <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> 11 <!-- 需要用到Jquery吗？？？ --> 12 </head> 13 14 <body> 15 <div id="app"> 16 17 <div class="panel panel-primary"> 18 <div class="panel-heading"> 19 <h3 class="panel-title">添加品牌</h3> 20 </div> 21 <div class="panel-body form-inline"> 22 <label> 23 Id: 24 <input type="text" class="form-control" v-model="id"> 25 </label> 26 27 <label> 28 Name: 29 <input type="text" class="form-control" v-model="name"> 30 </label> 31 32 <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --> 33 <input type="button" value="添加" class="btn btn-primary" @click="add()"> 34 35 <label> 36 搜索名称关键字： 37 <input type="text" class="form-control" v-model="keywords"> 38 </label> 39 </div> 40 </div> 41 42 43 44 <table class="table table-bordered table-hover table-striped"> 45 <thead> 46 <tr> 47 <th>Id</th> 48 <th>Name</th> 49 <th>Ctime</th> 50 <th>Operation</th> 51 </tr> 52 </thead> 53 <tbody> 54 <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 --> 55 <!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 --> 56 <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 --> 57 <tr v-for="item in search(keywords)" :key="item.id"> 58 <td>{{ item.id }}</td> 59 <td v-text="item.name"></td> 60 <td>{{ item.ctime }}</td> 61 <td> 62 <a href="" @click.prevent="del(item.id)">删除</a> 63 </td> 64 </tr> 65 </tbody> 66 </table> 67 68 69 70 </div> 71 72 <script> 73 // 创建 Vue 实例，得到 ViewModel 74 var vm = new Vue({ 75 el: '#app', 76 data: { 77 id: '', 78 name: '', 79 keywords: '', // 搜索的关键字 80 list: [ 81 { id: 1, name: '奔驰', ctime: new Date() }, 82 { id: 2, name: '宝马', ctime: new Date() }, 83 { id: 3, name: 'TPshop', ctime: new Date() } 84 ] 85 }, 86 methods: { 87 add() { // 添加的方法 88 // console.log('ok') 89 // 分析： 90 // 1. 获取到 id 和 name ,直接从 data 上面获取 91 // 2. 组织出一个对象 92 // 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中 93 // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上； 94 95 // 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作； 96 97 var car = { id: this.id, name: this.name, ctime: new Date() } 98 this.list.push(car) 99 this.id = this.name = '' 100 }, 101 del(id) { // 根据Id删除数据 102 // 分析： 103 // 1. 如何根据Id，找到要删除这一项的索引 104 // 2. 如果找到索引了，直接调用 数组的 splice 方法 105 106 /* this.list.some((item, i) => { 107 if (item.id == id) { 108 this.list.splice(i, 1) 109 // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环 110 return true; 111 } 112 }) */ 113 114 115 var index = this.list.findIndex(item =>item.id == id) 116 alert(index); 117 // console.log(index) 118 this.list.splice(index, 1) 119 }, 120 search(keywords) { // 根据关键字，进行数据的搜索 121 /* */ 122 var newList = [] 123 this.list.forEach(item => { 124 if (item.name.indexOf(keywords) != -1) { 125 console.log(item.name) 126 newList.push(item) 127 } 128 }) 129 return newList 130 131 // 注意： forEach some filter findIndex 这些都属于数组的新方法， 132 // 都会对数组中的每一项，进行遍历，执行相关的操作； 133 /* 134 135 136 137 var arr_list = this.list.filter(item => { 138 139 if (item.name.includes(keywords)) { 140 return item 141 } 142 }) 143 return arr_list 144 */ 145 /* 146 var arr_list = this.list.filter(item => item.name.includes(keywords)) 147 return arr_list; 148 */ 149 /* 150 var arr_list = this.list.filter(item => true) 151 return arr_list; 152 */ 153 // return newList 154 } 155 } 156 }); 157 </script> 158 </body> 159 160 </html>
3.过滤器的基本使用
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p> 15 </div> 16 17 <script> 18 // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat 19 Vue.filter('msgFormat', function (msg, arg, arg2) { 20 // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则 21 return msg.replace(/单纯/g, arg + arg2) 22 }) 23 24 Vue.filter('test', function (msg) { 25 return msg + '========' 26 }) 27 // 创建 Vue 实例，得到 ViewModel 28 var vm = new Vue({ 29 el: '#app', 30 data: { 31 msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人' 32 }, 33 methods: {} 34 }); 35 </script> 36 </body> 37 38 </html>
4.生命周期函数演示
1）beforeCreate()：表示实例完全被创建出来之前，会执行它
2）created()：在 created 中，data 和 methods 都已经被初始化好了！
3）beforeMount()：表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
4）mounted()：表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
5）beforeUpdate()：表示 我们的界面还没有被更新
6）updated()：页面和 data 数据已经保持同步了，都是最新的
7）beforeDestroy:实例销毁前
8) destroyed:实例销毁后
总结：实例创建前后；模板挂载后；页面更新前后；实例销毁前后
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-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <input type="button" value="修改msg" @click="msg='No'"> 15 <h3 id="h3">{{ msg }}</h3> 16 </div> 17 18 <script> 19 // 创建 Vue 实例，得到 ViewModel 20 var vm = new Vue({ 21 el: '#app', 22 data: { 23 msg: 'ok' 24 }, 25 methods: { 26 show() { 27 console.log('执行了show方法') 28 } 29 }, 30 beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它 31 // console.log(this.msg) 32 // this.show() 33 // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化 34 }, 35 created() { // 这是遇到的第二个生命周期函数 36 // console.log(this.msg) 37 // this.show() 38 // 在 created 中，data 和 methods 都已经被初始化好了！ 39 // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作 40 }, 41 beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中 42 // console.log(document.getElementById('h3').innerText) 43 // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串 44 }, 45 mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 46 // console.log(document.getElementById('h3').innerText) 47 // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动 48 }, 49 50 // 接下来的是运行中的两个事件 51 beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】 52 // console.log('界面上元素的内容：' + document.getElementById('h3').innerText) 53 // console.log('data 中的 msg 数据是：' + this.msg) 54 // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步 55 }, 56 updated() { 57 // console.log('界面上元素的内容：' + document.getElementById('h3').innerText) 58 // console.log('data 中的 msg 数据是：' + this.msg) 59 // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的 60 } 61 }); 62 </script> 63 </body> 64 65 </html>
5.vue-resource基本使用
1）get 请求
2）post 请求
3）JSONP 请求
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-2.4.0.js"></script> 10 <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意 --> 11 <!-- this.$http.jsonp --> 12 <script src="./lib/vue-resource-1.3.4.js"></script> 13 </head> 14 15 <body> 16 <div id="app"> 17 <input type="button" value="get请求" @click="getInfo"> 18 <input type="button" value="post请求" @click="postInfo"> 19 <input type="button" value="jsonp请求" @click="jsonpInfo"> 20 </div> 21 22 <script> 23 // 创建 Vue 实例，得到 ViewModel 24 var vm = new Vue({ 25 el: '#app', 26 data: {}, 27 methods: { 28 getInfo() { // 发起get请求 29 // 当发起get请求之后， 通过 .then 来设置成功的回调函数 30 this.$http.get('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1').then(function (result) { 31 // 通过 result.body 拿到服务器返回的成功的数据 32 console.log(result.body) 33 }) 34 }, 35 postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded 36 // 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了 37 // 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式 38 this.$http.post('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1', {}, { emulateJSON: true }).then(result => { 39 console.log(result.body) 40 }) 41 }, 42 jsonpInfo() { // 发起JSONP 请求 43 this.$http.jsonp('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1').then(result => { 44 console.log(result.body) 45 }) 46 } 47 } 48 }); 49 </script> 50 </body> 51 52 </html>