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