vue3.0基础大全

一，指令

• 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  绑定   数据绑定

二，方法

1.  计算computed

vue3.0版本以后就没有过滤功能或方法了，官方建议用computed计算代替，下面说一下用法，首先看一个案例

运行结果：

此案例是做了一个字符串翻转的功能 

    2.监听watch

下面用监听watch做一个简易的计算器

HTML代码

VUE代码

 

watch监听了再data中定义的obj，只要obj中的值发生变化，就运行 处理器handler，可以实时计算，得出结果。

三,综合练习，用watch和computed做一个可存入本地存储里的todolist

HTML代码

VUE代码

 

 

运行结果如下