1. {{}} 插值语法
(普通模式)和Vue2的插值语法相同
const msg = ref('test2')
-- <div>{{msg}}</div>
2. v-html="xxx"
(非常规模式)ref中带了html标签的,需要去识别解析html标签中的内容
const msghtml = ref('<h3>我是html里的内容</h3>')
--<div v-html="msghtml"></div>
3. v-bind (:)
v-bind语法,与vue2相同,不做过多赘述
(如果想要直接v-bind给绑定上多个属性,从vue中引入reactive)(这也和React很相似)
import {ref,reactive} from 'vue'
const object = ref({
id:'001',
class:'box'
})
<div v-bind="object">我用了reactive同时绑定上了id和class</div>
# v-if 的具体使用和 v-on(@click) 的使用方法与vue2一致,故不做更多讲解
### 总结
Vue3的模板语法 与 Vue2的语法在使用上个人感觉:最大的区别在于数据的定义模式
(Vue2的数据在data中定义,绑定入Vue,直接使用this.xxx进行获取)
(Vue3中使用 ref( )对数据进行一个可设置初始值的响应式数据定义)