21、键盘修饰符的实例讲解：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>键盘修饰符的实例讲解</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <!--单击空格键才触发事件--> 13 <input type="text" @keyup.space="keyEvent" /> 14 <!--ctrl、alt、shift键要结合某个键才能触发，比如 ctrl+a 才触发的事件--> 15 <input type="text" @keyup.ctrl.65="keyEvent" /> 16 </div> 17 </body> 18 <script> 19 var vm = new Vue({ 20 el: '#app', 21 data: {}, 22 methods: { 23 keyEvent () { 24 alert('单击空格键触发') 25 } 26 } 27 }) 28 </script> 29 </html>
22、鼠标事件处理修饰符实例讲解：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>鼠标事件处理修饰符实例讲解</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <!--单击鼠标右键触发,加上prevent阻止默认行为，即点击右键时弹出的菜单--> 13 <div :style="style" @contextmenu.prevent="keyEvent('右')"></div> 14 <!--单击鼠标左键的时候触发--> 15 <div :style="style" @click.left="keyEvent('左')"></div> 16 <!--单击鼠标中间键的时候触发--> 17 <div :style="style" @click.middle="keyEvent('中')"></div> 18 </div> 19 </body> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 style: { 25 border: "solid 2px red", 26 height: "300px", 27 "200px" 28 } 29 }, 30 methods: { 31 keyEvent: function(where) { 32 alert("单击鼠标"+where+"键"); 33 } 34 } 35 }) 36 </script> 37 </html>
23、表单控件的基本使用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单控件的基本使用</title> 6 <script src="./lib/vue.js"></script> 7 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 8 <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 9 <style> 10 </style> 11 </head> 12 <body> 13 <div id="app"> 14 <form action="" class="form-horizontal"> 15 <div class="panel panel-default"> 16 <div class="panel-heading"> 17 <h3 class="panel-title">文章栏目</h3> 18 </div> 19 <div class="panel-body"> 20 <div class="form-group"> 21 <label for="" class="col-sm-2 control-label">标题</label> 22 <div class="col-sm-10"> 23 <input type="text" class="form-control" v-model="field.title"/> 24 </div> 25 </div> 26 <div class="form-group"> 27 <label for="" class="col-sm-2 control-label">栏目</label> 28 <div class="col-sm-10"> 29 <select v-model="field.cid" class="form-control" multiple> 30 <option value="">==请选择栏目==</option> 31 <option v-for="v in category" :value="v.cid">{{v.title}}</option> 32 </select> 33 {{field.cid}} 34 </div> 35 </div> 36 <div class="form-group"> 37 <label for="" class="col-sm-2 control-label">属性</label> 38 <div class="col-sm-10"> 39 <div class="checkbox-inline" v-for="v in flag"> 40 <input type="checkbox" v-model="field.flag" :value="v.name"/> {{v.title}} 41 </div> 42 </div> 43 {{field.flag}} 44 </div> 45 <div class="form-group"> 46 <label for="" class="col-sm-2 control-label">点击数</label> 47 <div class="col-sm-10"> 48 <input type="text" class="form-control" v-model="field.click"/> 49 </div> 50 </div> 51 <div class="form-group"> 52 <label for="" class="col-sm-2 control-label">链接</label> 53 <div class="col-sm-10"> 54 <input type="text" class="form-control" v-model="field.url"/> 55 </div> 56 </div> 57 <div class="form-group"> 58 <label for="" class="col-sm-2 control-label">摘要</label> 59 <div class="col-sm-10"> 60 <textarea name="" class="form-control" v-model="field.description"></textarea> 61 </div> 62 </div> 63 <div class="form-group"> 64 <label for="" class="col-sm-2 control-label">类型</label> 65 <div class="col-sm-10"> 66 <div class="checkbox-inline" v-for="v in draft"> 67 <input type="radio" name="draft" class="form-control" v-model="field.draft" :value="v.name"/> {{v.title}} 68 </div> 69 </div> 70 </div> 71 72 </div> 73 </div> 74 <button class="btn btn-primary col-sm-offset-2">保存</button> 75 </form> 76 </div> 77 </body> 78 <script> 79 var vm = new Vue({ 80 el: '#app', 81 data: { 82 flag: [ 83 {name:'hot',title:'热门'}, 84 {name:'recommend',title:'推荐'} 85 ], 86 draft: [ 87 {name:'draft',title:'草稿'}, 88 {name:'send',title:'发布'}, 89 {name:'times',title:'延时发布'} 90 ], 91 category: [ 92 {cid:1,title:'高等代数'}, 93 {cid:2,title:'数学分析'}, 94 {cid:3,title:'解析几何'}, 95 {cid:4,title:'数据模型'} 96 ], 97 field: { 98 title: '后盾人 人人做后盾', 99 click: 339, 100 url: 'houdunren.com', 101 description: '这是内容摘要', 102 drag: 'send', 103 flag: [], 104 cid: [] 105 } 106 }, 107 methods: {} 108 }) 109 </script> 110 </html>
24、表单控件处理之表单修饰符 .lazy、.number、.trim实例详解：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单控件处理之表单修饰符 .lazy、.number、.trim实例详解</title> 6 <script src="./lib/vue.js"></script> 7 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 8 <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 9 <style> 10 </style> 11 </head> 12 <body> 13 <div id="app"> 14 <form action="" class="form-horizontal"> 15 <div class="panel panel-default"> 16 <div class="panel-heading"> 17 <h3 class="panel-title">文章栏目</h3> 18 </div> 19 <div class="panel-body"> 20 <div class="form-group"> 21 <label for="" class="col-sm-2 control-label">标题</label> 22 <div class="col-sm-10"> 23 <!-- 24 .trim:可以实现截取前后的空格，即不将空格计算到表单中 25 .lazy:懒加载，只有当鼠标移开的时候才同步数据 26 --> 27 <input type="text" class="form-control" v-model.trim.lazy="field.title"/> 28 </div> 29 </div> 30 <div class="form-group"> 31 <label for="" class="col-sm-2 control-label">栏目</label> 32 <div class="col-sm-10"> 33 <select v-model="field.cid" class="form-control" multiple> 34 <option value="">==请选择栏目==</option> 35 <option v-for="v in category" :value="v.cid">{{v.title}}</option> 36 </select> 37 </div> 38 </div> 39 <div class="form-group"> 40 <label for="" class="col-sm-2 control-label">属性</label> 41 <div class="col-sm-10"> 42 <div class="checkbox-inline" v-for="v in flag"> 43 <input type="checkbox" v-model="field.flag" :value="v.name"/> {{v.title}} 44 </div> 45 </div> 46 </div> 47 <div class="form-group"> 48 <label for="" class="col-sm-2 control-label">点击数</label> 49 <div class="col-sm-10"> 50 <!-- 51 .number:可以让数据以number的形式输出。 52 html输出的数据都是字符串类型的,所以 type="number":只能限制用户输入的是数字类型的字符串 53 --> 54 <input type="number" class="form-control" v-model.number="field.click"/> 55 </div> 56 </div> 57 <div class="form-group"> 58 <label for="" class="col-sm-2 control-label">链接</label> 59 <div class="col-sm-10"> 60 <input type="text" class="form-control" v-model="field.url"/> 61 </div> 62 </div> 63 <div class="form-group"> 64 <label for="" class="col-sm-2 control-label">摘要</label> 65 <div class="col-sm-10"> 66 <textarea name="" class="form-control" v-model="field.description"></textarea> 67 </div> 68 </div> 69 <div class="form-group"> 70 <label for="" class="col-sm-2 control-label">类型</label> 71 <div class="col-sm-10"> 72 <div class="checkbox-inline" v-for="v in draft"> 73 <input type="radio" name="draft" class="form-control" v-model="field.draft" :value="v.name"/> {{v.title}} 74 </div> 75 </div> 76 </div> 77 78 </div> 79 </div> 80 <button class="btn btn-primary col-sm-offset-2">保存</button> 81 </form> 82 </div> 83 </body> 84 <script> 85 var vm = new Vue({ 86 el: '#app', 87 /*监听数据的变化*/ 88 watch: { 89 'field.click': function (n, o) { 90 console.log(typeof(n)); 91 }, 92 'field.title': function (n, o) { 93 console.log(n); 94 } 95 }, 96 data: { 97 flag: [ 98 {name:'hot',title:'热门'}, 99 {name:'recommend',title:'推荐'} 100 ], 101 draft: [ 102 {name:'draft',title:'草稿'}, 103 {name:'send',title:'发布'}, 104 {name:'times',title:'延时发布'} 105 ], 106 category: [ 107 {cid:1,title:'高等代数'}, 108 {cid:2,title:'数学分析'}, 109 {cid:3,title:'解析几何'}, 110 {cid:4,title:'数据模型'} 111 ], 112 field: { 113 title: '后盾人 人人做后盾', 114 click: 339, 115 url: 'houdunren.com', 116 description: '这是内容摘要', 117 drag: 'send', 118 flag: [], 119 cid: [] 120 } 121 }, 122 methods: {} 123 }) 124 </script> 125 </html>
25、定义组件的方式：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>定义组件的方式</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <slide></slide> 13 <news></news> 14 </div> 15 </body> 16 <script> 17 /*定义全局组件，全局组件必须放在主组件 #app 的前面，否则没有效果*/ 18 Vue.component('slide',{ 19 template: '<h1>baidu.com</h1>' 20 }); 21 var news = { 22 template: "<h2>世界，你好</h2>" 23 }; 24 new Vue({ 25 el: '#app', 26 /*定义局部组件*/ 27 components: { 28 /*news 相当于 news:news*/ 29 news 30 } 31 }) 32 </script> 33 </html>
26、组件之子组件中data使用实例与text/x-template的使用方法：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件之子组件中data使用实例与text/x-template的使用方法</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <news></news> 13 <hr/> 14 <news></news> 15 <hr/> 16 <news></news> 17 </div> 18 <!-- 19 为什么把模板放在 <script type="text/x-template" id="news"> 中，而不放在一个 div 中？ 20 答：如果放在div中，浏览器会识别解析它，所以在vue还没解析之前，浏览器就解析了，这样{{v.title}}就会原样输出了。 21 而定义在 <script type="text/x-template" id="news"> 中，x-template 会使浏览器忽略它，然后vue再解析它。 22 --> 23 <script type="text/x-template" id="news"> 24 <div> 25 <li v-for="(v,k) in news" > 26 {{v.title}} 27 <button @click="del(k)">删除</button> 28 </li> 29 </div> 30 </script> 31 </body> 32 <script> 33 var lists = { 34 news: [ 35 {title: '数学分析'}, 36 {title: '高等代数'} 37 ] 38 }; 39 var news = { 40 template: '#news', 41 data(){ 42 /*这样返回的话，所有子组件的公用一个数据， 43 所以这样只要有一个子组件删除数据，其他子组件的数据也会跟着减少*/ 44 /*return lists;*/ 45 /*把数据放到return里面，这样每个子组件的数据都不一样了，这样它们的数据就不会相互影响了*/ 46 return { 47 news: [ 48 {title: '数学分析'}, 49 {title: '高等代数'} 50 ] 51 } 52 }, 53 methods: { 54 del(k) { 55 this.news.splice(k,1); 56 } 57 } 58 }; 59 new Vue({ 60 el: '#app', 61 /*定义局部组件*/ 62 components: {news}, 63 data:{} 64 }) 65 </script> 66 </html>
27、组件与组件之间的数据参props的使用实例操作：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件与组件之间的数据参props的使用实例操作</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <!--lists：对应的 news 是字符串，如果在前面加上 ：,即 :lists，则对应的 news 就是表达式--> 13 <news php="abc" cms="你好世界" :show-del-button="true" :lists="news"></news> 14 </div> 15 <!-- 16 为什么把模板放在 <script type="text/x-template" id="news"> 中，而不放在一个 div 中？ 17 答：如果放在div中，浏览器会识别解析它，所以在vue还没解析之前，浏览器就解析了，这样{{v.title}}就会原样输出了。 18 而定义在 <script type="text/x-template" id="news"> 中，x-template 会使浏览器忽略它，然后vue再解析它。 19 --> 20 <script type="text/x-template" id="news"> 21 <div> 22 {{php}} - {{cms}} - {{showDelButton}} 23 <li v-for="(v,k) in lists" > 24 {{v.title}} 25 <button @click="del(k)" v-if="showDelButton">删除</button> 26 </li> 27 </div> 28 </script> 29 </body> 30 <script> 31 var news = { 32 template: '#news', 33 /*在 props 定义的变量，子组件中就可以使用这些变量了*/ 34 props:['php','cms','showDelButton','lists'], 35 data(){ 36 /*把数据放到return里面，这样每个子组件的数据都不一样了，这样它们的数据就不会相互影响了*/ 37 return {} 38 }, 39 methods: { 40 del(k) { 41 this.lists.splice(k,1); 42 } 43 } 44 }; 45 new Vue({ 46 el: '#app', 47 /*定义局部组件*/ 48 components: {news}, 49 data:{ 50 news: [ 51 {title:'数学分析'}, 52 {title:'解析几何'}, 53 {title:'高等代数'} 54 ] 55 } 56 }) 57 </script> 58 </html>
28、组件之props数据的多种验证机制实例详解：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件之props数据的多种验证机制实例详解</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <news :show-del-button="true" php="php学习" cms="cms学习" :lists="news"></news> 13 </div> 14 <!-- 15 为什么把模板放在 <script type="text/x-template" id="news"> 中，而不放在一个 div 中？ 16 答：如果放在div中，浏览器会识别解析它，所以在vue还没解析之前，浏览器就解析了，这样{{v.title}}就会原样输出了。 17 而定义在 <script type="text/x-template" id="news"> 中，x-template 会使浏览器忽略它，然后vue再解析它。 18 --> 19 <script type="text/x-template" id="news"> 20 <div> 21 {{php}} - {{cms}} - {{showDelButton}} 22 <li v-for="(v,k) in lists" > 23 {{v.title}} 24 <button @click="del(k)" v-if="showDelButton">删除</button> 25 </li> 26 </div> 27 </script> 28 </body> 29 <!--验证类型：String Number Boolean Function Object Array --> 30 <script> 31 var news = { 32 template: '#news', 33 /*在 props 定义的变量，子组件中就可以使用这些变量了*/ 34 props:{ 35 showDelButton: { 36 /*主组件传过来的参数必须是 Boolean、Number 类型才可以，否则就报错*/ 37 type: [Boolean, Number], 38 /*主组件必须传 showDelButton 的参数过来，否则就报错*/ 39 /*required: true,*/ 40 /*如果没有传 showDelButton 的参数过来，就设置默认值为 false*/ 41 default: false 42 }, 43 /*使用函数的方式验证*/ 44 /*showDelButton: { 45 validator(v) { 46 return v===1 || v===0; 47 } 48 }*/ 49 php:'', 50 cms:'', 51 lists: { 52 type: Array, 53 default() { 54 return [{title:'数据模型'}] 55 } 56 } 57 }, 58 data(){ 59 /*把数据放到return里面，这样每个子组件的数据都不一样了，这样它们的数据就不会相互影响了*/ 60 return {} 61 }, 62 methods: { 63 del(k) { 64 this.news.splice(k,1); 65 } 66 } 67 }; 68 new Vue({ 69 el: '#app', 70 /*定义局部组件*/ 71 components: {news}, 72 data:{ 73 news: [ 74 {title:'数学分析'}, 75 {title:'解析几何'}, 76 {title:'高等代数'} 77 ] 78 } 79 }) 80 </script> 81 </html>
29、组件之子组件使用$emit事件触发父组件实现购物车的功能：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件之子组件使用$emit事件触发父组件实现购物车的功能</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <news :lists="goods" @sum="total"></news> 13 总计：{{totalPrice}}元 14 </div> 15 <!-- 16 为什么把模板放在 <script type="text/x-template" id="news"> 中，而不放在一个 div 中？ 17 答：如果放在div中，浏览器会识别解析它，所以在vue还没解析之前，浏览器就解析了，这样{{v.title}}就会原样输出了。 18 而定义在 <script type="text/x-template" id="news"> 中，x-template 会使浏览器忽略它，然后vue再解析它。 19 --> 20 <script type="text/x-template" id="news"> 21 <table border="1" width="50%"> 22 <tr> 23 <th>商品名称</th> 24 <th>商品价格</th> 25 <th>商品数量</th> 26 </tr> 27 <tr v-for="(v,k) in lists"> 28 <td>{{v.title}}</td> 29 <td>{{v.price}}</td> 30 <td> 31 <!--@blur：当失焦的时候触发该事件--> 32 <input type="text" v-model="v.num" @blur="sum" /> 33 </td> 34 </tr> 35 </table> 36 </script> 37 </body> 38 <!--验证类型：String Number Boolean Function Object Array --> 39 <script> 40 var news = { 41 template: '#news', 42 /*在 props 定义的变量，子组件中就可以使用这些变量了*/ 43 props: ['lists'], 44 methods: { 45 sum () { 46 /*$emit('sum')调用父组件的sum方法*/ 47 this.$emit('sum') 48 } 49 } 50 } 51 new Vue({ 52 el: '#app', 53 /*定义局部组件*/ 54 components: {news}, 55 /*当vue处理页面完成后，该挂载点就会自动触发*/ 56 mounted () { 57 this.total() 58 }, 59 data: { 60 totalPrice: 0, 61 goods: [ 62 {title: 'iphone7Plus', price: 200, num: 2}, 63 {title: '华为', price: 100, num: 1} 64 ] 65 }, 66 methods: { 67 total () { 68 this.totalPrice = 0 69 this.goods.forEach((v) => { 70 this.totalPrice += v.num * v.price 71 }) 72 } 73 } 74 }) 75 </script> 76 </html>
30、组件之使用.sync修饰符与computer计算属性超简单的实现美团购物车原理：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件之使用.sync修饰符与computer计算属性超简单的实现美团购物车原理</title> 6 <style> 7 </style> 8 <script src="./lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <!--②：.sync的作用：当 lists 发生改变的时候，lists 就会赋值给 goods，因此 goods 也会做出相应的改变--> 13 <news :lists.sync="goods"></news> 14 总计：{{totalPrice}}元 15 </div> 16 <!-- 17 为什么把模板放在 <script type="text/x-template" id="news"> 中，而不放在一个 div 中？ 18 答：如果放在div中，浏览器会识别解析它，所以在vue还没解析之前，浏览器就解析了，这样{{v.title}}就会原样输出了。 19 而定义在 <script type="text/x-template" id="news"> 中，x-template 会使浏览器忽略它，然后vue再解析它。 20 --> 21 <script type="text/x-template" id="news"> 22 <table border="1" width="50%"> 23 <tr> 24 <th>商品名称</th> 25 <th>商品价格</th> 26 <th>商品数量</th> 27 </tr> 28 <tr v-for="(v,k) in lists"> 29 <td>{{v.title}}</td> 30 <td>{{v.price}}</td> 31 <td> 32 <!--@blur：当失焦的时候触发该事件--> 33 <!--①：当修改 v.num 的值的时候，lists就会做出相应的改变--> 34 <input type="text" v-model="v.num" /> 35 </td> 36 </tr> 37 </table> 38 </script> 39 </body> 40 <!--验证类型：String Number Boolean Function Object Array --> 41 <script> 42 var news = { 43 template: '#news', 44 /*在 props 定义的变量，子组件中就可以使用这些变量了*/ 45 props: ['lists'] 46 }; 47 new Vue({ 48 el: '#app', 49 /*定义局部组件*/ 50 components: {news}, 51 /*③：当this.goods发生改变的时候，就是触发computed计算属性重新计算一次*/ 52 computed:{ 53 totalPrice() { 54 var sum = 0; 55 this.goods.forEach((v)=>{ 56 sum+=v.num*v.price; 57 }); 58 return sum; 59 } 60 }, 61 data: { 62 goods: [ 63 {title: 'iphone7Plus', price: 200, num: 2}, 64 {title: '华为', price: 100, num: 1} 65 ] 66 } 67 }) 68 </script> 69 </html>