初学vue2

科技2025-08-23 5

初学vue2

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://www.baidu.com"> <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="hobbies"> <label for="ball">篮球</label> <input type="checkbox" id="sing" value="2" v-model="hobbies"> <label for="sing">唱歌</label> <input type="checkbox" id="code" value="3" v-model="hobbies"> <label for="code">写代码</label> </div> <div> <span>职业：</span> <select multiple v-model="occupation"> <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="提交" v-on:click.prevent="handle"> </div> </form> </div> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript"> // /* 表单基本操作 */ var vm = new Vue({ el: '#app', data: { uname: 'lisi', gender: 2, hobbies: ['1', '2', '3'], occupation: ['1', '2', '3'], desc: '你好' }, methods: { handle() {} } }); </script> </body> </html>

2.表单域修饰符

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" id="" v-model.number="age"> <input type="text" id="" v-model.trim="info"> <input type="text" id="" v-model.lazy="msg"> <div>{{msg}}</div> <button @click="handle">点击</button> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { age: '', info: '', msg: '' }, methods: { handle() {} } }) </script> </body> </html>

3.自定义指令

全局自定义指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-focus> <input type="text" v-focus> </div> <script src="../vue.js"></script> <script> // /* 自定义指令 */ Vue.directive('focus', { inserted: function(el) { // el表示指令绑定的元素 el.focus(); } }); var vm = new Vue({ el: "#app", data: { }, methods: { } }) </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-color="msg"> </div> <script src="../vue.js"></script> <script> // /* 自定义指令 */ Vue.directive('color', { bind: function(el, binding) { //根据指令的参数设置背景色 console.log(binding); console.log(binding.value.color); // el.value = binding.value el.style.backgroundColor = binding.value.color; } }); var vm = new Vue({ el: "#app", data: { msg: { color: 'orange' } }, methods: { } }) </script> </body> </html>

局部自定义指令

4、计算属性

5、监听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 src="../vue.js"></script> <script> // /* 侦听器 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>

6、过滤器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 src="../vue.js"></script> <script> // 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>

7、生命周期

<!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>

8、变异方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div> <span> <input type="text" v-model="fname"> <button @click='add'>添加</button> <button @click="delete1">删除</button> <button @click="change">替换</button> </span> </div> <ul> <li :key="index" v-for="(item,index) in list">{{item}}</li> </ul> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { fname: '', list: ['apple', 'orange', 'banana'] }, methods: { add: function() { this.list.push(this.fname) }, delete1: function() { this.list.pop(this.fname) }, change() { this.list = this.list.slice(0, 1); } }, }) </script> </body> </html>

9、动态响应式数据处理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li :key="index" v-for="(item,index) in list">{{item}}</li> </ul> <div> <div>{{info.name}}</div> <div>{{info.age}}</div> <div>{{info.gender}}</div> </div> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { fname: '', list: ['apple', 'orange', 'banana'], info: { name: 'list', age: '12' } }, methods: { }, }) 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>

Processed: 0.020, SQL: 8