版权声明：转载-复用,请联系博主微信:qiang510939237 https://blog.csdn.net/qiang510939237/article/details/89324029
-
data 变化,引发的事情?
data 里的数据发生了变化,指令会重新计算
data 里的数据发生了变化,表达式会重新计算<div id="app"> <h1>{{ num }}</h1> <h1 v-show="getShow()">w shi h1</h1> <h1>{{ num >= 105 ? '大' : '小' }}</h1> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { num: 100 }, methods: { getShow() { console.log('执行了') return true } } }) </script> -
key 的 就地复用策略
问题: '就地复用策略' ==> 默认特定的索引下显示 ==> 默认 :key="index" 解决办法 : 添加一个 key :key='item.id' ==> 随着id走 取 key : 1. 最理想的是取每个元素的id ==> :key='item.id' 2. 取 数组里元素对象里的属性 (固定、唯一) 总结 : 1. 以后使用 v-for 尽量添加 :key 2. :key='item.id' <div id="app"> <p v-for="(item,index) in list" :key="item.name"> {{ item.id }} {{ item.name }} <input type="text" /> </p> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: '法王', done: true }, { id: 2, name: '浪涛', done: false }, { id: 3, name: '长虹', done: false } ] } }) </script> -
响应数据问题
双向数据绑定完成 => 响应数据完成 1. data里面 / obj / name ==> ok 2. data/obj.name没有,在一个按键事件里面 点击 => 动态添加数据 => 官网: vue无法监听到属性添加和删除 => 无法正常进行数据响应 总结: 以后想要完成正常的数据响应,应该怎么做? 1. 方式1: (最推荐) 先在 data 里声明好,给一个初始值 , 0/'' , 再去使用 2. 方式2: ($set), 第三方 this.$set(this.obj,'name','ls')<div id="app"> <input type="text" v-model="obj.name" /> <button @click="fn">按钮</button> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { // obj: { // age: '', // sex : '' // } }, methods: { fn() { console.log(123) // 动态添加数据 // this.obj.name = 'ls' // 需求 : 就要动态的添加数据,还想要正常的数据绑定 , 数据响应 // 参数1 : 对象 // 参数2 : 属性 // 参数3 : 初始值 this.$set(this.obj, 'name', 'ls') } } }) </script> -
事件修饰符
按键修饰符 .enter .down等等 事件修饰符 .prevent .stop => 阻止冒泡 .prevent => 阻止默认行为 .capture => 捕获 .self => 点击自己才会触发 .once => 只能点击一次 .passive => 不要去判断冒泡还是捕获 => 冒泡去执行 => 提高性能 <div id="app"> <a href="http://baidu.com" @click.prevent="fn">点我啊</a> <button @click.once="fn">按钮</button> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: {}, methods: { fn(e) { // 事件对象阻止默认行为 // e.preventDefault() console.log('我被点到了') } } }) </script> -
异步DOM更新
DOM更新是异步的 => 为了性能的考虑 演示证明一下 : 异步 解决办法 : 延时器 、$nextTick 延时器(只执行一次的定时器) <div id="app"> <h1>{{ num }}</h1> <button @click="fn">按钮</button> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { num: 100 }, methods: { fn() { // num +1 // 获取data里数据情况 // console.log(this.num) //100 // this.num++ // console.log(this.num) //101 // 获取DOM里的数据 console.log(document.querySelector('h1').innerText) //100 this.num++ // 101 // console.log(document.querySelector('h1').innerText) //100 // 方式1 : 添加一个延时器 // setTimeout(() => { // console.log(document.querySelector('h1').innerText) // }, 0) // 方式2 : DOM更新完了,告诉我,我再去获取 // this.$nextTick(() => { // console.log(document.querySelector('h1').innerText) // }) } } }) // 异步 => 不阻塞代码 // console.log(11111) // // 异步 // //1. 不阻塞代码 // //2. 异步的代码感觉慢一拍 => 延时的感觉 // setTimeout(() => { // console.log('123') // }, 3000) // setTimeout(() => { // console.log('321') // }, 0) // console.log(22222) </script> -
数据更新
数据发生变化,不是立马就更新的,而是数据不变了,再去一次性更新的 总结: 1. 数据发生变化了,不是立马更新的,而是当数据不变了,一次性更新的 2. 更新 DOM 是异步的 - 方式 : this.$nextTick() == 获取DOM数据 (其他的) 数据持久化 1. 本地持久化, 数据保存到本地 2. localStorage(本地存储) 3. 方式: 3.1 在增删改查下每一个功能里面,都要做一次保存处理 (繁琐) 3.2 监听数据 (数组 list) 变化,拿到最新的数据,保存到本地 (代码只需要写一次) 4. vue里面,提供了一个 watch (监听器) -
watch 监听器 (监听数据发生的变化)
<div id="app"> <h1>{{ num }}</h1> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { num: 100 }, // 监听器 watch: { num(newVal, oldVal) { console.log('新值:', newVal, '旧值 :', oldVal) } } }) </script>watch 监听器-小案例
<!--需求: 监听一个文本框字符的个数(3-6),如果没有满足要求,提示:格式 不正确 --> <div id="app"> <input type="text" v-model="name" /> <span v-show="isShow">格式 不正确</span> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { name: '', isShow: false }, watch: { // 监听name name(newVal) { if (newVal.length >= 3 && newVal.length <= 6) { // console.log('格式 正确') this.isShow = false } else { // console.log('格式 不正确') this.isShow = true } } } }) </script>watch 监听复杂类型
<div id="app"> <input type="text" v-model="obj.name" /> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { obj: { name: 'zs' } }, //监听 对象,监听name的值 watch: { // obj 监听的是地址, 这种方式:只能监听基本数据类型 // obj(newVal) { // console.log(newVal.name) // } //方式1: 监听复杂类型 // obj: { // // 深度监听 // deep: true, // // 处理函数 // handler(newVal) { // console.log(newVal.name) // } // } //方式2: 粗暴的监听对象里面的属性 (字符串形式) 'obj.name'(newVal) { console.log(newVal) } } }) </script> -
computed 和 watch的区别?
computed: 计算属性1. 根据已知值,得到一个新值 2. 新值随着已知值(相关的数据) 变化而变化 1. 计算属性 => (得到的是) 新值 2. 计算属性(num) ==> 是别人影响了我watch: 监听器
1. 监听 ==> (监听) 已知值 2. 监听数据 (num2) ==> 是我影响到了别人<div id="app"> <h1> 计算属性 {{ num }} </h1> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { num1: 100, num2: 200 }, // 计算属性 computed: { num() { return this.num1 + 10 } }, // 监听器 watch: { num2(newVal) { console.log(newVal) } } }) </script> -
ES6 语法的简写
let name = 'zs' let age = 40 let aaa = 'sex' let obj = { // name : name, name, age, sayHi() { console.log('哈哈') }, 'aaa-bbb': '123', aaa: '男', [aaa]: '男' } // es6 简写 // 1. 如果属性名 和 属性值(变量) 一样 == > 省略一个 // 2. 方法也可以简写 sayHi(){} // 3. 命名规则: 数字、字母、_、$ 组成,如果没有按照命名规则来命名,外面加一个 '' // 4. 属性名也是一个变量,想读取变量的数据,不能直接写,因为如果直接写了就是当前属性了, // 如果读取这个变量的值 [aaa] console.log(obj) -
过滤器 (数据格式化工具)
作用: 根据一个不满足条件的数据,让过滤器处理(数据格式化),处理成想要的结果 (使用引入了 Vue包,全局就能使用Vue对象)
使用:1. 先注册 2. 再使用 格式: 要处理的数据 | 过滤器注册:
1. 全局过滤器: 在所有的vue实例中都可以使用 2. 局部过滤器(私有过滤器): 只能在当前注册过滤器的vue实例里面使用注册全局过滤器?
过滤器的定义语法: Vue.filter('过滤器的名称', function(){ }) 过滤器中的 function , 第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据 Vue.filter('过滤器的名称', function(data) { return data + '123' }) 过滤器调用时候的格式: {{ name | 过滤器的名称 }}
<div id="app"> <h1>{{ date }}</h1> <h1>{{ date | dateFilter }}</h1> </div> <script src="./vue.js"></script> <script> // 注册全局过滤器 // 1. 注册要在vue实例之前注册 // 2. 要给一个return值, return后的值,就是过滤后的结果 // 参数1 : 过滤器的名字 // 参数2 : 回调函数, 谁用了我这个过滤器,就会执行这个回调函数 回调函数中的参数: 传过来未处理的数据 Vue.filter('dateFilter', () => { return '要下课了' }) const vm = new Vue({ el: '#app', data: { date: new Date() } }) </script>全局过滤器+moment插件
<!-- 使用 moment 插件 : 格式化日期 1. 安装: npm i moment 2. 引入: moment.js 3. 使用: moment(res).format('YYYY-MM-DD hh:mm:ss') --> <div id="app"> <h1>{{ date | dateFilter }}</h1> <h1>{{ date1 | dateFilter }}</h1> </div> <script src="./vue.js"></script> <script src="./node_modules/moment/moment.js"></script> <script> // 注册全局过滤器 Vue.filter('dateFilter', res => { return moment(res).format('YYYY-MM-DD hh:mm:ss') }) const vm = new Vue({ el: '#app', data: { date: new Date(), date1: +new Date() } }) </script>