vue 基础2(表单，自定义指令，计算属性，侦听器，过滤器的用法)
1：表单的基本操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) { height: auto; } form div span:first-child { display: inline-block; width: 100px; } </style> </head> <body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名：</span> <span> <input type="text" v-model='uname'> </span> </div> <div> <span>性别：</span> <span> <input type="radio" id="male" value="1" v-model='gender'> <label for="male">男</label> <input type="radio" id="female" value="2" v-model='gender'> <label for="female">女</label> </span> </div> <div> <span>爱好：</span> <input type="checkbox" id="ball" value="1" v-model='hobby'> <label for="ball">篮球</label> <input type="checkbox" id="sing" value="2" v-model='hobby'> <label for="sing">唱歌</label> <input type="checkbox" id="code" value="3" v-model='hobby'> <label for="code">写代码</label> </div> <div> <span>职业：</span> <select v-model='occupation' multiple> <option value="0">请选择职业...</option> <option value="1">教师</option> <option value="2">软件工程师</option> <option value="3">律师</option> </select> </div> <div> <span>个人简介：</span> <textarea v-model='desc'></textarea> </div> <div> <input type="submit" value="提交" @click.prevent='handle'> </div> </form> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 表单基本操作 */ var vm = new Vue({ el: '#app', data: { uname: 'lisi', gender: 2, hobby: ['2','3'], // occupation: 3 occupation: ['2','3'], desc: 'nihao' }, methods: { handle: function(){ // console.log(this.uname) // console.log(this.gender) // console.log(this.hobby.toString()) // console.log(this.occupation) console.log(this.desc) } } }); </script> </body> </html>
2：表单修饰符的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model.number='age'> <input type="text" v-model.trim='info'> <input type="text" v-model.lazy='msg'> <div>{{msg}}</div> <button @click='handle'>点击</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 表单域修饰符 */ var vm = new Vue({ el: '#app', data: { age: '', info: '', msg: '' }, methods: { handle: function(){ // console.log(this.age + 13) // console.log(this.info.length) } } }); </script> </body> </html>
3：自定义指令的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-focus> <input type="text"> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令 */ Vue.directive('focus', { inserted: function(el){ // el表示指令所绑定的元素 el.focus(); } }); var vm = new Vue({ el: '#app', data: { }, methods: { handle: function(){ } } }); </script> </body> </html>
4：带参数的自定义指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-color='msg'> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令-带参数 */ Vue.directive('color', { bind: function(el, binding){ // 根据指令的参数设置背景色 // console.log(binding.value.color) el.style.backgroundColor = binding.value.color; } }); var vm = new Vue({ el: '#app', data: { msg: { color: 'blue' } }, methods: { handle: function(){ } } }); </script> </body> </html>
5：局部指令的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-color='msg'> <input type="text" v-focus> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令-局部指令 */ var vm = new Vue({ el: '#app', data: { msg: { color: 'red' } }, methods: { handle: function(){ } }, directives: { color: { bind: function(el, binding){ el.style.backgroundColor = binding.value.color; } }, focus: { inserted: function(el) { el.focus(); } } } }); </script> </body> </html>
6：计算属性的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <div>{{reverseString}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 计算属性 */ var vm = new Vue({ el: '#app', data: { msg: 'Nihao' }, computed: { reverseString: function(){ return this.msg.split('').reverse().join(''); } } }); </script> </body> </html>
7：计算属性与反方的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{reverseString}}</div> <div>{{reverseString}}</div> <div>{{reverseMessage()}}</div> <div>{{reverseMessage()}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存 */ var vm = new Vue({ el: '#app', data: { msg: 'Nihao', num: 100 }, methods: { reverseMessage: function(){ console.log('methods') return this.msg.split('').reverse().join(''); } }, computed: { //依赖data中的数据做缓存，如果数据相同，多次调用执行一次，而方法不同 reverseString: function(){ console.log('computed') // return this.msg.split('').reverse().join(''); var total = 0; for(var i=0;i<=this.num;i++){ total += i; } return total; } } }); </script> </body> </html>
8：侦听器的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div> <span>名：</span> <span> <input type="text" v-model='firstName'> </span> </div> <div> <span>姓：</span> <span> <input type="text" v-model='lastName'> </span> </div> <div>{{fullName}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 侦听器 */ var vm = new Vue({ el: '#app', data: { firstName: 'Jim', lastName: 'Green', // fullName: 'Jim Green' }, computed: { fullName: function(){ return this.firstName + ' ' + this.lastName; } }, watch: { // firstName: function(val) { // this.fullName = val + ' ' + this.lastName; // }, // lastName: function(val) { // this.fullName = this.firstName + ' ' + val; // } } }); </script> </body> </html>
9：侦听器的案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div> <span>用户名：</span> <span> <input type="text" v-model.lazy='uname'> </span> <span>{{tip}}</span> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 侦听器 1、采用侦听器监听用户名的变化 2、调用后台接口进行验证 3、根据验证的结果调整提示信息 */ var vm = new Vue({ el: '#app', data: { uname: '', tip: '' }, methods: { checkName: function(uname) { // 调用接口，但是可以使用定时任务的方式模拟接口调用 var that = this; setTimeout(function(){ // 模拟接口调用 if(uname == 'admin') { that.tip = '用户名已经存在，请更换一个'; }else{ that.tip = '用户名可以使用'; } }, 2000); } }, watch: { uname: function(val){ // 调用后台接口验证用户名的合法性 this.checkName(val); // 修改提示信息 this.tip = '正在验证...'; } } }); </script> </body> </html>
10：过滤器的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model='msg'> <div>{{msg | upper}}</div> <div>{{msg | upper | lower}}</div> <div :abc='msg | upper'>测试数据</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 过滤器 1、可以用与插值表达式和属性绑定 2、支持级联操作 */ // Vue.filter('upper', function(val) { // return val.charAt(0).toUpperCase() + val.slice(1); // }); Vue.filter('lower', function(val) { return val.charAt(0).toLowerCase() + val.slice(1); }); var vm = new Vue({ el: '#app', data: { msg: '' }, filters: { upper: function(val) { return val.charAt(0).toUpperCase() + val.slice(1); } } }); </script> </body> </html>
11：实例的生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <button @click='update'>更新</button> <button @click='destroy'>销毁</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* Vue实例的生命周期 */ var vm = new Vue({ el: '#app', data: { msg: '生命周期' }, methods: { update: function(){ this.msg = 'hello'; }, destroy: function(){ this.$destroy(); } }, beforeCreate: function(){ console.log('beforeCreate'); }, created: function(){ console.log('created'); }, beforeMount: function(){ console.log('beforeMount'); }, mounted: function(){ console.log('mounted'); }, beforeUpdate: function(){ console.log('beforeUpdate'); }, updated: function(){ console.log('updated'); }, beforeDestroy: function(){ console.log('beforeDestroy'); }, destroyed: function(){ console.log('destroyed'); } }); </script> </body> </html>
12：变异方法和替换数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div> <span> <input type="text" v-model='fname'> <button @click='add'>添加</button> <button @click='del'>删除</button> <button @click='change'>替换</button> </span> </div> <ul> <li :key='index' v-for='(item,index) in list'>{{item}}</li> </ul> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* Vue数组操作 1、变异方法：会影响数组的原始数据的变化。 2、替换数组：不会影响原始的数组数据，而是形成一个新的数组。 */ var vm = new Vue({ el: '#app', data: { fname: '', list: ['apple','orange','banana'] }, methods: { add: function(){ this.list.push(this.fname); }, del: function(){ this.list.pop(); }, change: function(){ this.list = this.list.slice(0,2); } } }); </script> </body> </html>
13：动态响应是数据处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for='item in list'>{{item}}</li> </ul> <div> <div>{{info.name}}</div> <div>{{info.age}}</div> <div>{{info.gender}}</div> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 动态处理响应式数据 */ var vm = new Vue({ el: '#app', data: { list: ['apple', 'orange', 'banana'], info: { name: 'lisi', age: 12 } }, }); // vm.list[1] = 'lemon'; // Vue.set(vm.list, 2, 'lemon'); vm.$set(vm.list, 1, 'lemon'); // vm.info.gender = 'male'; vm.$set(vm.info, 'gender', 'female'); </script> </body> </html>
