2、VUE的基础语法
2022-04-01 12:16:30 0 举报AI智能生成
登录查看完整内容
vue2学习
作者其他创作
大纲/内容
每当创建一个 VUE 实例，就相当于创建一个viewModel监听器：可以监听对应视图和对应数据的相互改变
定义
开发的时候尽可能引用未压缩版本，这样有错误会抛出异常
div style=\
当前监听器监听的视图（基于querySelector获取）
element
相当于告诉 vue， 只处理当前视图下的内容
不能是html和body这两个元素
el
当前监听器监听的数据（这些监听的数据会挂载到 vm 实例上，也就是可以用 vm.xxx=xxx 来操作了）
当数据更改的时候，视图会自动更新；
data
放视图中需要使用的方法
methods
let 变量(vm) = new Vue({ el : \"选择器\"， data : { 属性名：属性值 }， methods ：{ 属性名：属性值 }})
1、data 上的属性 和 methods 上的属性都会直接挂载在 vm 实例上
2、methods中的属性名和data中的属性名 不能重复
methods写都是 这个实例中用到的方法
3、data写都是vue变量
data 中的 this 不是当前实例
4、methods中的方法 里边的 this 都是当前实例
注意
使用
mustache
{{数据变量}}
1、只能编写表达式（变量、赋值表达式、函数执行、三元表达式等）
2、不能写语句（例如：for 循环、if判断、switch、var 等）
3、小胡子中最终展示出来的是表达式的结果
4、在胡子语法中绑定的数据值是对象类型时，会基于JSON.stringify把其编译为字符串再呈现出来（而不是直接toString处理的）
小胡子语法
并不是所有的数据更改最后都会通知视图重新渲染
vue 数据更新 视图自动更新的前提 是这个数据被vue劫持了（对应数据 有get和set）
原理
1、初始数据是一个对象，对象中没有xxx键值对，后期新增的键值对是不会让视图重新渲染的（但是数据会改变）
更新数据时同时设置：t = Math.random()
初始：t:0
例如：
=>原理：虽然没有自动渲染视图，但是数据已经改变，手动触发视图渲染
+ font color=\"#0076b3\
（可以是空值，但是要有这个属性）
c:undefined
=原理：只有DATA中初始化过的属性才有GET/SET
+ 最好在初始化数据的时候，就把视图需要的数据提前声明好
=>原理：整个对象的替换，每一个后代属性都会被劫持；
注意要把新对象，放在前面
可以使用 Object.assign()
把原对象在新对象中展开
也可以使用 ...obj
+ 不要修改某个属性名，而是把对象的值整体替换（指向新的堆内存）
+ 可以基于vm.$set内置方法修改数据 vm.$set(对象，属性名，属性值)
+ $forceUpdate 强制通知视图重新渲染，但是不会设置 get 和 set
解决
情况1
2、如果数据是一个数组，我们修改数据基于ARR[N]=xxx或者ARR.length--等操作方式，是无法让视图重新渲染的
+ vm.$set
对于数组来说 能触发视图更新的 只有这几个数组的变异方法
+ push、pop、shift、unshift、splice、sort、reverse
+ 重新把ARR的值重写（指向新的堆内存）
情况2
视图自动渲染
VUE 的基础语法
0 条评论
回复 删除
下一页
