一,指令
- v-text 渲染指令,不能识别HTML标签,且会覆盖标签内的文本
- v-html 渲染指令,可识别HTML标签
- {{}} 渲染指令,不会覆盖标签内的内容,推荐使用
- v-if 条件指令
- v-show 条件指令,和v-if的区别是当v-if为false时不会显示并且隐藏方式是移除节点,v-show为false时隐藏方式是css方式,display:none,建议需要频繁切换隐藏与显示时用v-show,反之用v-if
- v-else 条件指令,与v-if一起使用
- v-else-if 多重条件指令
- v-for 遍历 虽然不加:key不会报错,但强烈建议要给唯一的key值,下标不推荐作为key值
- v-on:事件指令 给dom元素添加事件 可简写为@事件名=“”
- v-bind:属性指令 给dom元素添加属性 可简写为 :属性名=“属性值”
- v-model 绑定 数据绑定
二,方法
- 计算computed
vue3.0版本以后就没有过滤功能或方法了,官方建议用computed计算代替,下面说一下用法,首先看一个案例
运行结果:
此案例是做了一个字符串翻转的功能
2.监听watch
下面用监听watch做一个简易的计算器
HTML代码
VUE代码
watch监听了再data中定义的obj,只要obj中的值发生变化,就运行 处理器handler,可以实时计算,得出结果。
三,综合练习,用watch和computed做一个可存入本地存储里的todolist
HTML代码
VUE代码
运行结果如下