Vue内置指令

v-bind 单项绑定 v-bind:value='xxx === :value='xxx

<input type="text" v-bind:value="name" >

v-model 双向绑定 通常用于收集value值 v-model:value='xxx ===v-model='xxx

<input type="text" v-model:value="name">

v-on 事件绑定 简写 @

<button @click="fun">{{name}}</button>

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

v-show 为true展示元素 ===disolay =true

<div v-show="true">{{name}}</div>

v-if v-else-if  v-else 用法和判断语句一样，不用于v-show ，值为false 直接删除元素

<div v-if="n==1">{{name}}1</div>
<div v-else-if="n==2">{{name}}2</div>
<div v-else>{{name}}3</div>

v-for 遍历 

<ul>
    <!-- 遍历数组 -->
    <li v-for="(p,index) in persons" :key="p.id">
        {{p.name}}-{{p.age}}-{{index}}
    </li>
    <!-- 遍历对象 -->
    <li v-for="(stu,index) in student" :key="index">{{index}}-{{stu}}</li>
    <!-- 遍历字符串 -->
    <li v-for="(str,index) in str" :key="index">{{str}}-{{index}}</li>
    <!-- 遍历次数 -->
    <li v-for="(count,index) in 5" :key="index">{{count}}-{{index}}</li>
</ul>

其他内置指令：

<div id="root">
    <!-- v-text 会覆盖掉标签内原来的内容 -->
    <div v-text="str">World</div>
    <!-- v-html -->
    <div v-html="<h2>hello</h2>"></div>
    <!-- v-cloak  防止页面闪现  通常搭配display使用-->

    <!-- v-once 初次渲染后成为静态标签 -->
        <h2 v-once>初始化的n值是:{{n}}</h2>
    <!-- v-pre 跳过编译过程 提高效率 -->
    <div v-pre>{{text}}</div>
    <div>{{text}}</div>
</div>