1，响应式ref或者reactive

const  aa = ref('hello')
const bb = reactive({
    aa: 'hello',
    ss: 'workd'
})

2，计算属性

响应式属性经过计算得到的值(ref)，放到模板中，只会随着响应式author.books属性变化而变化

const  autor = ref(['john'])

const  getBook = computed(()=>{
return author.length?"yes":"no"
})

如果不用computed包裹，也会随着响应式属性变化而变化，但是不只是author.books属性

修改计算属性：
const getBook = computed(()=>{
 get(){
   return autor
}
set(val){ author.value= val}
})

3，类和样式绑定

即：动态修改class属性值

<div :class="{action: true}"></div>

相当于：<div class="action"></div>

可以绑定数组

const actionclass= ref('action')
<div :class="[actionclass]"></div>

动态绑定样式：
<div :style="{ fontSize: large}"></div>

4，类和样式绑定之父子组件class传递

只有一个根元素：
Component ：<p></p>
<Component class="good" />
相当于：<p class="good"></p>

有多个根元素：
Component: 
  <p></p>
<div :class="$attrs.class" ></div>

<Component class="good" />
相当于：
 <p></p>
<div  class="good" ></div>

5，条件渲染v-if和v-show

<div v-if = "show" >看见我了！</div>
<div v-else>看不见了！</div>

v-show和v-if一样，不过v-show元素还是存在文档中，只是display:none

6，v-for

<div v-for="(item,index) in items"  :key={{item.id}}>{{item}}</div>
item可以是数组、对象，数字

7，v-model
<input v-model="text" />

相当于：
<input :value="text"  @input="event=>text=e.target.val" >