搜索到
94
篇与
的结果
-
自定义指令 语法：局部指令new Vue({ directives: {指令名:配置对象} }) 或 new Vue({ directives: {指令名:回调函数} })全局指令Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)配置对象中常用的三个回调：bind：指令与元素成功绑定时调用inserted：指令所在元素被插入页面时调用update：指令所在的模板被重新解析时调用注：指令定义时不加 v-，但使用时要加 v-指令名如果是多个单词，要使用kebab-case（短横杠）命名方式，不使用camelCase命名方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数据放大10倍 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点 --> <div id="root"> <h3>当前的n值是：<span v-text="n"></span></h3> <h3>放大10倍后的n值是：<span v-big="n"></span></h3> <!-- 多个单词命名方式 --> <!-- <h3>放大10倍后的n值是：<span v-big-number="n"></span></h3> --> <button @click="n++">点我n+1</button> <hr> <input type="text" v-fbind:value="n"> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //自定义全局指令 Vue.directive('fbind', { //指令与元素成功绑定时调用 bind(element, binding) { console.log('bind', this) //此处的this是window element.value = binding.value }, //指令所在元素被插入页面时调用 inserted(element) { console.log('inserted') element.focus() }, //指令所在的模板被重新解析时调用 update(element, binding) { console.log('update') element.value = binding.value element.focus() } }) //创建Vue实例 new Vue({ el: '#root', data: { n: 1 }, directives: { //big函数什么时候被调用？ //1.指令与元素成功绑定时 //2.指令所在的模板被重新解析时 big(element, binding) { element.innerText = binding.value * 10 }, /* 'big-number'(element,binding) { element.innerText = binding.value * 10 }, */ /* fbind: { //指令与元素成功绑定时调用 bind(element, binding) { console.log('bind', this) //此处的this是window element.value = binding.value }, //指令所在元素被插入页面时调用 inserted(element) { console.log('inserted') element.focus() }, //指令所在的模板被重新解析时调用 update(element, binding) { console.log('update') element.value = binding.value element.focus() } } */ } }) </script> </body> </html> -
列表渲染 1. 基本列表v-for指令：用于展示列表数据语法：v-for="(item,index) in list" :key="index"可以遍历数组，对象，字符串，指定次数<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本列表</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 遍历数组 --> <h2>用户信息（遍历数组）</h2> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}} - {{p.age}} </li> </ul> <!-- 遍历对象 --> <h2>汽车信息（遍历对象）</h2> <ul> <li v-for="(c, index) in car" :key="index"> {{index}} - {{c}} </li> </ul> <!-- 遍历字符串 --> <h2>遍历字符串</h2> <ul> <li v-for="(char, index) in str" :key="index"> {{index}} - {{char}} </li> </ul> <!-- 遍历指定次数 --> <h2>遍历指定次数</h2> <ul> <li v-for="(num, index) in 5" :key="index"> {{index}} - {{num}} </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { persons:[ {id:1,name:'孙笑川',age:33}, {id:2,name:'刘波',age:32}, {id:3,name:'Giao哥',age:34} ], car: { name: '五菱宏光Mini', price: '3-4万', color: 'pink' }, str: 'hello' } }) </script> </body> </html>2. key的原理虚拟DOM中key的作用：key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后进行新旧虚拟DOM的差异比较（diff算法）；对比规则（1）旧虚拟DOM中找到了与新虚拟DOM相同的key若虚拟DOM中内容没变，直接使用之前的真实DOM；若虚拟DOM中内容改变，则生成新的真实DOM，随后替换页面中之前的真实DOM（2）旧虚拟DOM中没有找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到页面用index作为key可能引发的问题（1）若对数据进行逆序添加、删除等破坏原有顺序的操作，会产生没必要的真实DOM更新（界面没问题，但效率低）（2）如果结构中还包含输入类的DOM，会产生错误的DOM更新，界面出现问题如何选择key（1）建议使用每条数据的唯一标识作为key（2）如果不存在对数据进行逆序添加、删除等破坏原有顺序的操作，仅用于渲染列表进行展示，也可以使用index下标索引作为key<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>key的原理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 遍历数组 --> <h2>用户信息（遍历数组）</h2> <button @click.once="add">添加用户</button> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}} - {{p.age}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { persons:[ {id:1,name:'孙笑川',age:33}, {id:2,name:'刘波',age:32}, {id:3,name:'Giao哥',age:34} ] }, methods: { add() { const p = {id:4,name:'药水哥',age:33}; this.persons.unshift(p) } } }) </script> </body> </html>3. Vue监视数据的原理Vue会监视data中所有层次的数据如何监测对象中的数据？通过setter，在new Vue时就传入要监测的数据（1）对象中后追加的属性，Vue默认不做响应式处理（2）针对（1）中的问题，可以使用如下API：Vue.set(target, propertyName/index, value) 或 vm.$set(target, propertyName/index, value)如何监测数组中的数据？通过包裹数组更新元素的方法实现，即：（1）调用原生对应的方法（2）重新解析模板 ---> 更新页面修改数组元素的方法（1）API：push(),pop(),shift(),unshift(),ssplice(),sort(),reverse()（2）Vue.set()或vm.$set注：Vue.set()或vm.$set 不能给vm或vm的根数据对象添加属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue监测数据改变的原理（对象）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>姓名：{{name}}</h2> <h2>年龄：{{33}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', age: 33 } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue监测数据改变的原理（数组）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>老师姓名：{{name}}</h2> <h2>老师年龄：{{33}}</h2> <hr> <button @click="addSex">添加性别属性,默认值男</button> <h2>学生姓名：{{student.name}}</h2> <h2 v-if="student.sex">学生性别：{{student.sex}}</h2> <h2>学生年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2> <h2>爱好：</h2> <ul> <li v-for="(h,index) in student.hobbies" :key="index"> {{h}} </li> </ul> <hr> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}} - {{f.age}} </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', age: 33, student: { name: '刘波', sex: '', age: { rAge: 30, sAge: 18, }, hobbies: ['跑步','游泳','打篮球'], friends: [ {name:'张三',age:18}, {name:'李四',age:19}, {name:'王五',age:10} ] } }, methods: { addSex() { //Vue.set(this.student, 'sex', '男'); this.$set(this.student, 'sex', '男'); } } }) </script> </body> </html>
-
收集表单数据 <input type="text">，v-model收集的是value值，用户输入的就是value值；<input type="radio">，v-model收集的是value值，且要给标签配置value属性；<input type="checkbox">（1）如果没有配置input的value属性，那么收集的是checked（勾选/未勾选，布尔值）；（2）配置了input的value属性： a. v-model的初始值是非数组，那么收集的是checked（勾选/未勾选，布尔值）； b. 反之，初始值是数组，那么收集的就是value组成的数组注：v-model的三个修饰符：lazy：失去焦点再收集数据；number：输入字符串转为有效的数字；trim：输入首尾空格过滤<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <form @submit="demo"> <!-- <label for="demo">账号：</label> --> <!-- <input type="text" id="demo"> --> 账号：<input type="text" v-model.trim="userInfo.account"> <br><br> 密码：<input type="password" v-model="userInfo.password"> <br><br> 性别： 男<input type="radio" name="sex" value="male" v-model="userInfo.sex"> 女<input type="radio" name="sex" value="female" v-model="userInfo.sex"> <br><br> 年龄：<input type="number" name="age" v-model.number="userInfo.age"> <br><br> 爱好： <input type="checkbox" value="eat" v-model="userInfo.hobby">吃饭 <input type="checkbox" value="sleep" v-model="userInfo.hobby">睡觉 <input type="checkbox" value="play" v-model="userInfo.hobby">打豆豆 <br><br> 所属校区： <select v-model="userInfo.city"> <option value="">请选择</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> <br><br> 其他信息： <textarea v-model.lazy="userInfo.other"></textarea> <br><br> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a> <br> <button>提交</button> </form> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { userInfo: { account: '', password: '', sex: 'male', age: '', hobby: [], city: '', other: '', agree: '' } }, methods: { demo() { console.log(JSON.stringify(this.userInfo)) alert('提交成功') } } }) </script> </body> </html>
-
条件渲染 1. v-if语法：v-if="表达式" v-else-if="表达式" v-else适用于：切换频率较低的场景特点：不展示的DOM元素直接被移除注：v-if可以和v-else-if、v-else一起使用，但要求结构完整，不能被中间打断2. v-show语法：v-show="表达式"适用于：切换频率较高的场景特点：不展示的DOM元素不会被移除，仅仅是使用样式隐藏<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 使用v-show作条件渲染 --> <!-- <h2 v-show="false">你好，{{name}}</h2> --> <!-- <h2 v-show="1 === 3">你好，{{name}}</h2> --> <!-- 使用v-if作条件渲染 --> <h2 v-if="false">你好，{{name}}</h2> <h2 v-if="1 === 1">你好，{{name}}</h2> <h2>当前的n值是：{{n}}</h2> <button @click="n++">点我n+1</button> <!-- v-else和v-else-if --> <div v-if="n === 1">Angular</div> <div v-else-if="n === 2">React</div> <div v-else-if="n === 3">Vue</div> <div v-else>测试</div> <template v-if="n === 1"> <h2>孙笑川</h2> <h2>刘波</h2> <h2>Giao哥</h2> </template> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { name: '孙笑川', n: 0 } }) </script> </body> </html>
-
绑定样式 1. class样式语法：:class="xxx"，xxx可以是字符串、对象、数组字符串适用于：类名不确定，要动态获取；对象使用于：要绑定的样式个数、名字不确定；数组适用于：要绑定的样式个数、名字确定，但需要动态决定是否使用；2. style样式语法：:style="{fontSize: xx + 'px'}"，xxx为动态值 :style:="[a,b]"，ab为数组形式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定样式</title> <script type="text/javascript" src="../js/vue.js"></script> <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red;; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border: 4px dashed rgb(2, 197, 2); background-color: gray; } .normal{ background-color: skyblue; } .test1{ background-color: yellowgreen; } .test2{ font-size: 30px; text-shadow:2px 2px 10px red; } .test3{ border-radius: 20px; } </style> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> <!-- 绑定class，字符串写法，适用于样式的类名不确定，需要动态的指定 --> <div class="basic" :class="mood" @click="changeMood"> {{name}} </div> <br> <!-- 绑定class，数组写法，适用于要绑定的样式个数、名字不确定 --> <div class="basic" :class="classArr">{{name}}</div> <br> <!-- 绑定class，数组写法，适用于要绑定的样式个数、名字确定，但动态决定用不用 --> <div class="basic" :class="classObj">{{name}}</div> <br> <div class="basic" :style="styleObj">{{name}}</div> <br> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { name: '孙笑川', mood: 'normal', classArr: ['test1','test2','test3'], classObj: { test1: true, test2: false, test3: true, }, styleObj: { fontSize: '40px' } }, methods: { changeMood() { const arr = ['happy','sad','normal']; const index = Math.floor(Math.random() * 3); this.mood = arr[index]; } } }) </script> </body> </html>
-
监视属性 当被监视的属性发生变化时，回调函数自动调用，进行相关操作监视的属性必须存在，才能进行监视两种写法：new Vue时传入watch配置通过vm.$watch监视<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名案例_watch实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 姓名：<span>{{fullName}}</span> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', fullName: '张-三' }, watch: { firstName(newValue) { //定时器指定的回调不是Vue实例管理的，此处可以用箭头函数 setTimeout(() => { this.fullName = newValue + '-' + this.lastName }, 1000) }, lastName(newValue) { this.fullName = this.firstName + '-' + newValue } } }) </script> </body> </html>深度监视：Vue中的watch默认不监测对象内部值得改变（一层）；配置deep:true可以监测对象内部值改变（多层）注：Vue自身可以监测对象内部值得改变，但Vue提供的watch默认不可以 使用watch时应根据数据的具体结构，决定是否采用深度监视<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气案例_深度监视（简写）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <br> <button @click="changeWeather">切换天气</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { isHot: true, }, computed: { info() { return this.isHot ? '炎热' : '凉爽'; } }, methods: { changeWeather() { this.isHot = !this.isHot; } }, watch: { //正常写法 /* isHot: { //immediate: true, //初始化时调用handler //deep: true, //深度监视 handler(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } }, */ //简写（当监视属性不需要配置其他选项时(immediate,deep)，可以使用简写） /* isHot(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } */ } }) //正常写法 /* vm.$watch('isHot', { //immediate: true, //初始化时调用handler //deep: true, //深度监视 handler(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } }) */ //简写 vm.$watch('isHot', function (newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue); }) </script> </body> </html>computed与watch的区别：computed能完成的功能，watch也能完成；watch能完成的功能，computed不一定能完成，如：watch可以进行异步操作所有被Vue管理的函数，最好写成普通函数，这时this的指向才是vm或组件实例对象所有不被Vue管理的函数（定时器回调，ajax的回调，Promise的回调等），最好写成箭头函数，这样this的指向才是vm或组件实例对象（涉及Vue原型链）
-
事件处理 1.事件的基本使用使用v-on:click="xxx" 或@click="xxx"绑定事件，xxx是事件名事件的回调需要配置在methods对象中，最终会在vm上methods中配置的函数，不要用箭头函数，this的作用域会被改变methods中配置的函数都是是被Vue所管理的函数，this的指向是vm或组件实例对象@click="xxx" 和 @click="xxx($event)" 的作用一样，后者可以传参<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> <!-- <button v-on:click="showInfo">点我提示信息</button>--> <button @click="showInfo">点我提示信息（不传参）</button> <button @click="showInfo1('孙笑川', $event)">点我提示信息1（传参）</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo() { alert("抽象！"); }, showInfo1(value, event) { console.log(value,event); alert("你好，" + value); } } }) </script> </body> </html>2.事件修饰符prevent：阻止默认事件（常用）；stop：阻止事件冒泡（常用）；once：事件只触发一次（常用）；capture：使用事件的捕获模式；self：只有event.target是当前操作的元素时才触发事件；passive：事件的默认行为立即执行，无需等待事件回调执行完毕；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件修饰符</title> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo{ height: 50px; background-color: skyblue; } .box{ padding: 5px; background-color: skyblue; } .box1{ padding: 5px; background-color: lightpink; } .list{ width: 200px; height: 200px; background-color: azure; overflow: auto; } li{ height: 100px; } </style> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> <!-- 阻止默认事件 --> <a href="https://www.wangchouchou.com" @click.prevent="showInfo">点我提示信息</a> <!-- 阻止事件冒泡 --> <div class="demo" @click="showInfo"> <button @click.prevent.stop="showInfo">点我提示信息</button> <!-- 先阻止默认事件，再阻止冒泡事件（修饰符可以连续写） --> <!---- <a @click.prevent.stop="showInfo">点我提示信息</a> --> </div> <!-- 事件只触发一次 --> <button @click.once="showInfo">点我提示信息</button> <!-- 使用事件的捕获模式 --> <div class="box" @click.capture="showMsg(1)"> div1 <div class="box1" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件 --> <div class="demo" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 --> <!-- wheel 鼠标滚轮 scroll 滚动条 --> <ul class="list" @wheel.passive="demo"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo(e) { //阻止事件默认行为，此处为点击后不跳转 //e.preventDefault(); alert("抽象！"); console.log(e.target) }, showMsg(msg) { console.log(msg) }, demo() { for (let i = 0; i < 100000; i++) { console.log('@') } console.log("循环执行完毕") } } }) </script> </body> </html>3.键盘事件常用的按键别名回车 enter删除 delete （捕获”删除“和”退格“按键）退出 esc空格 space换行 tab（必须配合keydown使用）上 up下 down左 left右 rightVue未提供别名的按键，可以使用原始的key值绑定，需转换为kebab-case（短横线命名）系统修饰键：ctrl、alt、shift、meta配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发配合keydown使用：正常触发事件可以使用keycode指定具体的按键Vue.config.keyCode.自定义键名 = 键码，可以定制按键别名<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> <!-- keydown 按下 keyup 按下松手 @keyup.ctrl.y 只有ctrl + y才触发事件 --> <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo(e) { //原始判断 // if (e.keyCode !== 13) { // return; // } else { // console.log(e.target.value) // } console.log(e.target.value) } } }) </script> </body> </html>
-
计算属性 定义：要用的属性不存在，要通过已有属性计算得来原理：底层借助了Object.defineproperty方法提供的getter和setterget什么时候执行：初次读取时当依赖的属性发生改变时会被再次调用优点：与methods相比，内部有缓存机制（复用），效率更高，方便调试注：计算属性最终会出现在vm身上，直接读取使用即可； 如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名案例_计算属性实现（简写）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 姓名：<span>{{fullName}}</span> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', }, computed: { //完整写法 /* fullName: { get() { console.log("get被调用了") return this.firstName + this.lastName; }, set(value) { console.log('set--->', value); const arr = value.split('-'); this.firstName = arr[0]; this.lastName = arr[1] } } */ //简写（考虑读取，不考虑修改时，才用简写方式） fullName() { console.log("get被调用了") return this.firstName + this.lastName; } } }) </script> </body> </html>
