搜索到
26
篇与
的结果
-
条件渲染 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>
-
数据代理 Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）优点：方便操作data中的数据基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上，同时指定getter/setter，在getter/setter内部去操作（读/写）data中对应的属性（1）数据代理<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据代理</title> </head> <body> <!-- 通过一个对象代理另一个对象中属性的操作 --> <script type="text/javascript"> let obj = {x:100} let obj1 = {y:200} Object.defineProperty(obj1, 'x', { get() { return obj.x }, set(value) { obj.x = value } }) </script> </body> </html>（2）Vue中的数据代理<!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> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false /* let data = { name: '孙笑川' } //创建Vue实例 const vm = new Vue({ el: '#root', //vm._data = options.data = data //vm._data === data true data }) */ const vm = new Vue({ el: '#root', data: { name: '孙笑川' } }) </script> </body> </html>（3）Object.defineProperty方法<!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"> </div> <script type="text/javascript"> let num = 33; let person = { name: '孙笑川' } Object.defineProperty(person, 'age', { // value: 33, // //控制属性是否可以枚举，默认值false // enumerable: true, // //控制属性是否可以被修改，默认值false // writable: true, // //控制属性是否可以被删除，默认值false // configurable: true //当读取age属性时，get函数(getter)就会被调用，且返回值就是age的值 get() { console.log("age属性被读取了"); return num; }, //当修改age属性时，set函数(setter)就会被调用，同时收到修改的具体值 set(value) { console.log("age属性被修改了，值为：", value); num = value }, }) console.log(person) </script> </body> </html>
-
-
数据绑定 单向绑定v-bind：数据只能从data流向页面双向绑定v-model：data <===> 页面，双向注：双向绑定一般应用在表单类元素上（input、select等） v-model:value可以简写为v-model，因为它默认收集的就是value的值<!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-bind:value="name">--> <!-- <br>--> <!-- 双向数据绑定：<input type="text" v-model:value="name">--> <!-- 简写 --> 单向数据绑定：<input type="text" :value="name"> <br> 双向数据绑定：<input type="text" v-model="name"> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ //指定当前实例为哪个容器服务 el: '#root', data: { name: '孙笑川' } }) </script> </body> </html>
