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" >