网站更新维护 怎么做,app排行榜,软件开发的一般方法步骤,做外贸网站义乌18、计算属性
示例#xff1a;实现姓名的联动效果
可以用插值语法、method {{func()}} 这里必须有 #xff08;#xff09;表示返回值
在事件处理中#xff0c;click“func1” 有没有无所谓
computed的计算属性和data中的属性都在vm中#xff0c;但vm._data里只有后者…18、计算属性
示例实现姓名的联动效果
可以用插值语法、method {{func()}} 这里必须有 表示返回值
在事件处理中click“func1” 有没有无所谓
computed的计算属性和data中的属性都在vm中但vm._data里只有后者。
computed里的this是vm可用this.name读data中的数
没有真正的值是被已有属性算出来的
get()什么时候被调用
1、初次读取fullName时 2、所依赖的数据发生变化时
set不是必须写的但若要被修改set中要引起依赖的是数据发生变化
优势与methods实现相比内部有缓存机制复用效率更高调试方便。
全写
fullName{
get(){}
set(){}
}
当只考虑get不用set时才能用简写
fullName(){ 但不是函数使用时{{fullName}}没有
return xxxxx;
}
21、监视属性
vscode插件vue3 snippets 片段 作者hollowtree
模板里不能出现this
xxxx“yyy” yyy可以写一些简单的语句
watch:{
isHot:{ # key
handler(newValue, oldValue){ # 当ishot发生改变时
}
}
}
immediate默认是false如果是true即使不变化初始化也调用
正常属性、计算属性都可监视
监视的两种写法1、new Vue时传入watch配置 2、通过vm.$watch。
后者vm.$watch(‘ishot’ 要加引号
当被监视的属性变化时回调函数自动调用handler
23、深度监视
要求监视 number.a 不要number.b。 只前者变才回调
’number.a‘ 监视多级结构中某个属性的变化
若监视 numbera变/b变不会回调除非换一个新对象 {a6, b8}
使用deeptrue
1、vue中的watch默认不监测对象内部值得改变一层
2、配置deeptrue可以监测对象内部值改变多层
PS
1、vue自身可以检测对象内部值的改变但vue提供的watch默认不可以
2、使用watch时根据数据的具体结构决定是否采用深度监视
简写当配置项只有handler时
isHot(newValue, oldValue){
}
vm.$watch(isHot,(newValue, oldValue){ 不能用箭头
})
25、watch对比computed
computed依靠返回值不能异步如延时
1、computed能完成的功能watch都可以完成
2、watch能完成的功能computed不一定能完成例如watch可以进行异步操作
PS 1、所被vue管理的函数最好写成普通函数这样this的指向才是vm或组件实例对象
2、不被vue管理的函数如定时器的回调函数ajax的回调函数promise回调等最好写成箭头函数这样this的指向才是vm或组件实例对象
26、绑定class样式
1、字符串写法适用于样式的类名不确定需要动态指定 :classa
vm.arr.shift() 移除数组的第一个元素vm.push
2、数组写法适用于要绑定的样式个数不确定名字也不确定
3、对象写法 :classclassObj个数确定名字确定但要动态决定用不用
27、绑定style样式
font-size ---- fontSize 改为驼峰写法
:style{fontSize:xxx}其中xxx是动态值
:style[a,b] 其中a,b是样式对象写对象、数组写法数组较少用 styleArr:[{},{}]
28、条件渲染
v-show 节点在通过 displayNone 控制未被转移仅样式被隐藏掉适用于频率高的
v-if v-else-if v-else 一起使用时结构不能被打断适用于频率低的场景特点不展示的DOM元素之间被移除
template 特点不像div一样只是有个包裹作用不影响效果但只能用 v-if
使用 v-if 时元素可能无法获取到使用 v-show 一定可以获取到
29、列表渲染
v-for
ulli v-for(p,index) in persons :keyindex{{p.name}}-{{p.age}}li
/ul可以遍历数组、对象、字符串或者指定数字类似于python中的range
1、默认index作为key但可能会引发问题
1.1 若对数据进行逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新
界面效果没有问题但效率低
1.2 如果结构中还包括输入类的DOM会产生错误DOM更新
界面有问题
基于虚拟DOM对比策略作用过程
刚开始根据数据生成虚拟DOM—将虚拟DOM转为真实DOM上
更新后根据新数据生成虚拟DOM—对比…
找到key为0的数据文件节点和input标签对比发现前者不一样后者一样。直接替换使用。
2、id作为key,最好使用数据的唯一标识作为key如id身份证号手机号等唯一值
31、列表过滤
p.indexof(‘val’) 存在则返回位置索引不存在返回-1如果val是空的’ 结果是0不是-1
//#endregion 折叠某段代码
可以由computed/watch实现
37、总结vue监视数据
1、vue会监听data中所有层次的数据
2、如何检测对象中的数据
2.1 通过setter实现监视且要在new Vue时就传入要监测的数据
2.2 如需给后添加的属性做响应式请使用如下API
Vue.set(target, propertyName/index, value) 或 vm.$set(target, propertyName/index, value)
或 this.$set(target, propertyName/index, value)
3、如何检测数组中的数据
通过包裹数组更新元素的方法实现本质就是做了两件事
3.1 调用原生对应的方法对数据进行更新
3.2 重新解析模板进而更新页面
4、在Vue修改数组中的某个元素一定要用如下方法
4.1 使用这些API
push 后面进入
pop 最后删除
shift 第一个删除
unshift 第一个添加
splice 指定位置
sort 排序
reverse 反转 4.2 Vue.set()或vm.$set() 特别注意不能给vm或vm的根数据对象添加属性
vm.set(vm.student, ‘age’, 15)
38、收集表单数据
若 input typetext/则v-model收集的是value值用户输入的就是value值
若 input typeratio/则v-model收集的是value值且要给标签配置value值
若 input typecheckbox/则
1、没有配置input的value属性那么收集的就是checked(勾选 or 未勾选是布尔值)
2、配置input的value属性
(1)v-model 的初始值是非数组那么也是布尔值
(2)v-model 的初始值是数组那么收集的就是value组成的数组
备注v-model三大修饰符
lazy 失去焦点后再收集数据
number 输入字符串转为有效的数字
trim 输入首位空格过滤
39、过滤器
比如时间格式化。
定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理
语法1、注册过滤器 Vue.filter(name,callback)全局 或 new Vue({filters:{}})局部
2、使用过滤器{{xxx | 过滤器名}} 或 v-bind:属性xxx | 过滤器名单向绑定双向绑定v-model不可以
备注1、过滤器也可以接收额外参数多个过滤器也可以串联“value | filter1 | filter2” filter2不会直接处理value而是处理filter1处理后的值
2、并没有改变原本的数据是产生新的对应数据
40、v-text
内置指令作用向其所在的节点中渲染文本内容
与插值语法的区别是v-text会替换掉节点中的内容{{xxx}}则不会
v-on 事件监听
41、v-html
可以识别html结构但有安全性问题比如说cookie泄露
42、v-cloak
没有值。
1、本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性
2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
43、v-once
初次渲染后就视为静态内容了。以后数据的改变不会引起v-once结构的更新
44、v-pre
跳过其所在节点的编译过程加快编译
47、自定义指令总结
一、定义语法
1、局部指令
new Vue({ directives(指令名配置对象)}) 或 new Vue({ directives(指令名回调函数)})
回调函数里面的参数是 element, bindings
2、全局指令
Vue.directive(指令名配置对象) 或 Vue.directive(指令名回调函数)
二、配置对象中常见的3个回调
1、bind 指令与元素成功绑定时调用
2、inserted 指令所在元素被插入页面时调用
3、update 指令所在模板结构被重新解析时调用
三、备注
1、指令定义时不加v-但在使用时要加v-
2、指令名如果是多个单词要使用kebab-case命名不要用kebabCase命令
52、生命周期总结
8个钩子函数
语句后加debugger; 进行调试
1、beforeCreated 无法通过vm访问data中的数据。
2、初始化数据监测数据代理。created可以通过vm访问data中的数据。
3、beforeMount页面呈现的是未编译的DOM。
解析模板生成虚拟DOM内存中但页面还不能显示解析好的数据
4、**重要关键。**mounted发送ajax请求启动定时器绑定自定义事件订阅消息等初始化操作。
对DOM的操作有效但尽可能避免不要背叛好不容易加载好了。
mounted挂载只第一次之后页面再更新就是update了。
类似于检查身体的各项指标。页面显示经vue编译后的结果。
虚拟DOM转为真实DOM。
5、beforeUpdate
6、updated
7、**重要关键。**beforeDestroy清楚定时器解绑自定义事件取消订阅消息等收尾工作
使用vm.$destroy完全销毁一个实例清理它与其他实例的连接解绑它的全部指令及事件监听器自定义事件
像已经和DOM绑定的事件如click之类无法销毁。
类似于交代后事。
eg.消除定时器。clearInterval(this.timer) vm的数据可变但页面不会再更新了
8、destroyed。
关于销毁Vue实例
1、销毁后借助Vue开发者工具看不到任何信息
2、销毁后自定义事件会失效但原生DOM事件依然有效
3、一般不会在beforeDestroy中操作数据因为即便操作数据也不会再出发更新流程了
54、组件介绍
vue使用组件的三大步骤
一、定义组件创建组件
使用Vue.extend(options)创建其中options和new Vue(options)传入的几乎一样区别如下
1、el不要写。因为最终的组件都要经过一个vm的管理由vm中的el决定服务哪个容器。
2、data必须写成函数避免组件被复用时数据存在应用关系。
备注使用template可以配置组件结构但是不能作为根标签根元素
二、注册组件
1、局部注册new Vue时传入components选项
2、全局注册靠Vue.component(‘组件名’组件)
三、使用组件写组件标签
