11、v-for 操作对象与数值：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-for操作对象与数值</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <!--item:表示值、key:表示键、index:表示下标--> 13 <li v-for="(item, key, index) in user"> 14 {{index}} - {{key}} - {{item}} 15 </li> 16 <table border="1" width="50%"> 17 <tr v-for="v in 20"> 18 <td>{{v}}</td> 19 </tr> 20 </table> 21 </div> 22 </body> 23 <script> 24 var vm = new Vue({ 25 el: '#app', 26 data: { 27 user: { 28 name: '向军', 29 age: '22', 30 sex: 'boy' 31 } 32 } 33 }); 34 </script> 35 </html>
12、v-for与computed结合功能实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-for与computed结合功能实例</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <li v-for="v in stus"> 13 {{v.name}} - {{v.sex}} 14 <input type="radio" v-model="type" value="all" /> 全部 15 <input type="radio" v-model="type" value="girl"/> 女孩 16 <input type="radio" v-model="type" value="boy"/> 男孩 17 </li> 18 </div> 19 </body> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 computed: { 24 stus () { 25 if (this.type == 'all') { 26 return this.user 27 } else { 28 return this.user.filter((v) => { 29 return v.sex == this.type 30 }) 31 } 32 } 33 }, 34 data: { 35 type: 'all', 36 user: [ 37 {name: '小明', sex: 'boy'}, 38 {name: '小丽', sex: 'girl'}, 39 {name: '小强', sex: 'boy'}, 40 {name: '小花', sex: 'girl'} 41 ] 42 } 43 }) 44 </script> 45 </html>
13、变异方法push的留言版实例的实现：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>变异方法push的留言版实例讲解</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <div v-for="v in comments"> 13 <span>{{v.content}}</span> 14 </div> 15 <textarea v-model="current_content" cols="30" rows="10"></textarea> 16 <button v-on:click="push">发表</button> 17 </div> 18 </body> 19 <script> 20 var vm = new Vue({ 21 el: '#app', 22 data: { 23 //当前用户输入内容 24 current_content:'', 25 comments: [ 26 {content: '你好世界！'}, 27 {content: '我来了！你呢？'} 28 ] 29 }, 30 methods: { 31 push() { 32 var content = {content:this.current_content}; 33 this.comments.push(content); 34 this.current_content = '' 35 } 36 } 37 }) 38 </script> 39 </html>
14、变异方法unshit&pop&shift的实例应用：
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>变异方法push的留言版实例讲解</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <li v-for="v in comments"> 13 {{v.content}} 14 </li> 15 <textarea v-model="current_content" cols="30" rows="10"></textarea> <br /> 16 <button v-on:click="push('end')">发表到后面</button> 17 <button v-on:click="push('pre')">发表到前面</button> 18 <br /> 19 <button v-on:click="del('last')">删除最后一条</button> 20 <button v-on:click="del('first')">删除第一条</button> 21 </div> 22 </body> 23 <script> 24 var vm = new Vue({ 25 el: '#app', 26 data: { 27 //当前用户输入内容 28 current_content:'', 29 comments: [ 30 {content: '你好世界！'}, 31 {content: '我来了！你呢？'} 32 ] 33 }, 34 methods: { 35 push(type) { 36 var content = {content:this.current_content}; 37 switch (type) { 38 case 'end': 39 this.comments.push(content); 40 this.current_content=""; 41 break; 42 case 'pre': 43 this.comments.unshift(content); 44 this.current_content=""; 45 break; 46 } 47 }, 48 del(type) { 49 switch (type) { 50 case 'last': 51 this.comments.pop(); 52 break; 53 case 'first': 54 this.comments.shift(); 55 break; 56 } 57 } 58 } 59 }) 60 </script> 61 </html>
15、变异方法splice的实例应用：
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>变异方法push的留言版实例讲解</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <li v-for="(v,k) in comments"> 13 {{v.content}} <button v-on:click="remove(k)">删除</button> 14 </li> 15 <textarea v-model="current_content" cols="30" rows="10"></textarea> <br /> 16 <button v-on:click="push('end')">发表到后面</button> 17 <button v-on:click="push('pre')">发表到前面</button> 18 <br /> 19 <button v-on:click="del('last')">删除最后一条</button> 20 <button v-on:click="del('first')">删除第一条</button> 21 </div> 22 </body> 23 <script> 24 var vm = new Vue({ 25 el: '#app', 26 data: { 27 //当前用户输入内容 28 current_content:'', 29 comments: [ 30 {content: '你好世界！'}, 31 {content: '我来了！你呢？'} 32 ] 33 }, 34 methods: { 35 remove(k){ 36 this.comments.splice(k,1); 37 }, 38 push(type) { 39 var content = {content:this.current_content}; 40 switch (type) { 41 case 'end': 42 this.comments.push(content); 43 break; 44 case 'pre': 45 this.comments.unshift(content); 46 break; 47 } 48 }, 49 del(type) { 50 switch (type) { 51 case 'last': 52 this.comments.pop(); 53 break; 54 case 'first': 55 this.comments.shift(); 56 break; 57 } 58 } 59 } 60 }) 61 </script> 62 </html>
16、变异方法sort与reverse的实例应用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>变异方法sort与reverse的留言版实例讲解</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <li v-for="(v,k) in comments"> 13 {{v.id}} - {{v.content}} <button v-on:click="remove(k)">删除</button> 14 </li> 15 <textarea v-model="current_content" cols="30" rows="10"></textarea> <br /> 16 <button v-on:click="push('end')">发表到后面</button> 17 <button v-on:click="push('pre')">发表到前面</button> 18 <br /> 19 <button v-on:click="del('last')">删除最后一条</button> 20 <button v-on:click="del('first')">删除第一条</button> 21 <button v-on:click="del()">删除全部</button> 22 <br /> 23 <button v-on:click="reverse()">反转顺序</button> 24 <button v-on:click="sort()">按照编号排序</button> 25 26 </div> 27 </body> 28 <script> 29 const vm = new Vue({ 30 el: '#app', 31 data: { 32 //当前用户输入内容 33 current_content:'', 34 comments: [ 35 {id:2,content: '你好世界！'}, 36 {id:4,content: '我来了！你呢？'}, 37 {id:1,content: '快活吧！'}, 38 {id:3,content: '真的？'}, 39 ] 40 }, 41 methods: { 42 sort() { 43 this.comments.sort((a, b) => { 44 return a.id<b.id; 45 }); 46 }, 47 reverse() { 48 this.comments.reverse(); 49 }, 50 remove(k){ 51 this.comments.splice(k,1); 52 }, 53 push(type) { 54 const id = this.comments.length + 1; 55 const content = {id,content:this.current_content}; 56 switch (type) { 57 case 'end': 58 this.comments.push(content); 59 this.current_content = ""; 60 break; 61 case 'pre': 62 this.comments.unshift(content); 63 this.current_content = ""; 64 break; 65 } 66 }, 67 del(type) { 68 switch (type) { 69 case 'last': 70 this.comments.pop(); 71 break; 72 case 'first': 73 this.comments.shift(); 74 break; 75 default: 76 this.comments = ""; 77 } 78 } 79 } 80 }) 81 </script> 82 </html>
解释：里面的 sort 方法有点问题。
17、变异方法filter与regexp实现搜索功能：
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>变异方法filter与regexp实现搜索功能</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <li v-for="(v,k) in comments"> 13 {{v.id}} - {{v.content}} <button v-on:click="remove(k)">删除</button> 14 </li> 15 <textarea v-model="current_content" cols="30" rows="10"></textarea> <br /> 16 <button v-on:click="push('end')">发表到后面</button> 17 <button v-on:click="push('pre')">发表到后面</button> 18 <br /> 19 <button v-on:click="del('last')">删除最后一条</button> 20 <button v-on:click="del('first')">删除第一条</button> 21 <br /> 22 <button v-on:click="sort()">按照编号排序</button> 23 <button v-on:click="reverse()">反转顺序</button> 24 <br /> 25 <input type="text" v-on:keyup.enter="search" v-model="search_content" /> 26 </div> 27 </body> 28 <script> 29 var vm = new Vue({ 30 el: '#app', 31 data: { 32 //搜索内容 33 search_content:'', 34 //当前用户输入内容 35 current_content:'', 36 comments: [ 37 {id:2,content: '你好世界！'}, 38 {id:4,content: '我来了！你呢？'}, 39 {id:1,content: '快活吧！'}, 40 {id:3,content: '真的？'}, 41 ] 42 }, 43 methods: { 44 search() { 45 // this.comments = this.comments.filter(function (item) { 46 // console.log(this.search_content); 这个this并没有指向当前的vm,所以这里使用ES6的语法，就会指向当前的vm 47 // }) 48 this.comments = this.comments.filter((item) => { 49 var reg = new RegExp(this.search_content); 50 return reg.test(item.content); 51 }) 52 }, 53 sort() { 54 this.comments.sort(function (a, b) { 55 return a.id>b.id; 56 }) 57 }, 58 reverse() { 59 this.comments.reverse(); 60 }, 61 remove(k){ 62 this.comments.splice(k,1); 63 }, 64 push(type) { 65 var id = this.comments.length + 1; 66 var content = {id,content:this.current_content}; 67 switch (type) { 68 case 'end': 69 this.comments.push(content); 70 break; 71 case 'pre': 72 this.comments.unshift(content); 73 break; 74 } 75 }, 76 del(type) { 77 switch (type) { 78 case 'last': 79 this.comments.pop(); 80 break; 81 case 'first': 82 this.comments.shift(); 83 break; 84 } 85 } 86 } 87 }) 88 </script> 89 </html>
18、vue的基本点击事件：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的基本点击事件</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <li v-for="(v,k) in comments"> 13 <!--v-on:click 的简写：@click--> 14 {{k}} - {{v.content}} <button @click="remove(k)">删除</button> 15 </li> 16 </div> 17 </body> 18 <script> 19 var vm = new Vue({ 20 el: '#app', 21 data: { 22 comments: [ 23 {id:2,content: '你好世界！'}, 24 {id:4,content: '我来了！你呢？'}, 25 {id:1,content: '快活吧！'}, 26 {id:3,content: '真的？'}, 27 ] 28 }, 29 methods: { 30 remove(k) { 31 alert("删除："+k); 32 this.comments.splice(k,1) 33 } 34 } 35 }) 36 </script> 37 </html>
19、事件修饰符之使用$event与prevent修饰符操作表单：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件修饰符之使用$event与prevent修饰符操作表单</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <!--设置表单提交的时候，不刷新页面（默认行为）--> 13 <!--方式一：--> 14 <!--<form action="" @submit="post('php',$event)"> 15 <h1>{{times}}</h1> 16 <button>提交</button> 17 </form>--> 18 <!--方式二：--> 19 <form action="" @submit.prevent="post('php')"> 20 <h1>{{times}}</h1> 21 <button>提交</button> 22 </form> 23 </div> 24 </body> 25 <script> 26 var vm = new Vue({ 27 el: '#app', 28 data: { 29 times: new Date() 30 }, 31 methods: { 32 /*方式一：*/ 33 /*post(num,event) { 34 event.preventDefault(); 35 alert(num); 36 }*/ 37 /*方式二：*/ 38 post(num) { 39 alert(num); 40 } 41 } 42 }) 43 </script> 44 </html>
20、事件修饰之stop&capture&self实例详解：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件修饰之stop&capture&self实例详解</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <div @click="box" :style="{border:'solid 2px red'}"> 13 <!--prevent:阻止默认行为，即可以阻止 a 标签的跳转行为--> 14 <!--stop:阻止冒泡行为，函数支持链式调用 once:动作只执行一次，一次后就失效--> 15 <a href="http://jquery.cuishifeng.cn/load.html" @click.prevent.stop.once="link">百度</a> 16 </div> 17 18 <!--self:只有点击自己的时候才有效果，冒泡是没有效果的--> 19 <div @click.self="box" :style="{border:'solid 2px red'}"> 20 <!--prevent:阻止默认行为，即可以阻止 a 标签的跳转行为--> 21 <!--stop:阻止冒泡行为，函数支持链式调用--> 22 <a href="http://jquery.cuishifeng.cn/load.html" @click.prevent="link">百度</a> 23 </div> 24 25 <!--capture:捕获行为--> 26 <div @click.capture="box" :style="{border:'solid 2px red'}"> 27 <!--prevent:阻止默认行为，即可以阻止 a 标签的跳转行为--> 28 <!--stop:阻止冒泡行为，函数支持链式调用--> 29 <a href="http://jquery.cuishifeng.cn/load.html" @click.prevent="link">百度</a> 30 </div> 31 </div> 32 </body> 33 <script> 34 var vm = new Vue({ 35 el: '#app', 36 data: {}, 37 methods: { 38 box () { 39 alert('div') 40 }, 41 links () { 42 alert('baidu.com') 43 } 44 } 45 }) 46 </script> 47 </html>