VUE:接管DOM操作,面向数据编程,当数据改变后,VUE会自动替换掉DOM里的内容
挂载点,模板和实例
'以下是html使用vue.js的例子'
1.在项目中导入vue.js文件
2.在html中,使用script语法引入vue.js文件
3.在html中创建vue,创建时可传入以下参数
4.VUE会结合模板和data,生成内容,放在挂载点中显示
el: 挂载点,绑定DOM结点,也叫模板,VUE只会处理挂载点下面的内容
data: 数据,可供外部使用,随便自定义里面的配置名称
template: 模板,可以在这里写挂载里的DOM内容
methods: 方法写在这里,若在此要更改data中的内容,只需要this.名字即可
computed: 计算属性,指的是一个属性通过其他属性计算而来
watch: 侦听器
计算属性和侦听器
'计算属性':
一个属性通过其他属性计算而来,在computed中,是通过data中别的属性计算来的
优点是性能高,如果依赖属性没有变,那么你使用fullName的时候,用的是上一次计算属性的缓存结果,只有当依赖属性发生改变时, fullName才会重新计算,页面上的fullName才会跟着改变
'侦听器':
写在watch中,侦听vue中数据或计算属性的变化,一旦发生变化,就执行watch中写的代码逻辑
模板指令
'VUE实例中的数据,事件和方法'
v-on绑定事件
v-on:click="buttonClick"
这个绑定事件是个click事件,当点击时执行buttonClick方法,此方法定义在vue实例的methods里面
v-on:可以写成@
'VUE中的属性绑定和双向数据绑定'
v-bind属性单项绑定:数据决定页面的显示,但页面无法决定数据里的内容
v-model双向绑定:数据决定页面的显示,页面也决定数据里的内容,一般使用input框
'v-if和v-show: 隐藏和显示'
v-if: false时将标签从DOM树中移除,true时在DOM树中增加
v-show: false时标签并未在DOM树中移除,只是为标签增加了display:none这个属性,所以隐藏了
所以,若频繁的隐藏与显示,建议使用v-show,性能更高
'循环'
- {{item}}
data(){
return{
list: [1,2,3]
}
}
我们要去循环list这个数据项,每次循环会把对应的循环项的内容放到item这个变量中,那么循环展示时,就可以把item输出来
循环第一次item为1
循环第二次item为2
循环第三次item为3
另一种写法:
- {{item.text}}
list: [
{text: '列表第一行'},
{text: '列表第二行'},
{text: '列表最后一行'}
]
备注❤️:item是自己定的名字,也可以叫too或者nn
v-for需要加名字为key的属性,可以提升每一项的渲染效率
key值要求:每一项数据的key值不能重复
在上面的例子中,我们就可以用item为key值
- {{item.text}}
但如果list:[1,1,3]
那就不能用item作为key值了
可以写为
- {{item.text}}
意思是我要循环list数据列表
每一项的内容会放到item里面去
每一项下标放到index里面去
那么key值就可以用index
外部组件
1.新建ButtonCounter.vue文件,写好内部实现,按钮本显示0,每点击一次则进行＋1
2.在test.vue的