Vue 内置指令

v-bind:

eg: v-bind:class=“className” v-bind: 简写 :
className 不会当作字符串解析，会被当做变量解析

---

v-model:value

数据双向绑定，一般用于表单元素 input,checkboxselect等
ps: v-model 默认绑定value，可以简写: v-model=“”

<div id="root">
        <!-- @submit.prevent 提交时默认阻止原事件 -->
        <form @submit.prevent="formSubmit">

            <!-- v-model.trim 去除前后空格；number将输入转化为数字 -->
            <label>账号：<input type="text" v-model:value.trim="account"></label><br>
            <label>密码：<input type="password" v-model="psw"></label><br>
            <label>年龄：<input type="number" v-model.number="age"></label><br>

            <!-- 当input没有输入框，一定要自己配置 value ！！！ -->
            性别：
            男<input type="radio" name="sex" value="male" v-model="sex">
            女<input type="radio" name="sex" value="female" v-model="sex"><br>

            <!-- checkbox 绑定的数组，若是字符串则选择为 true,不选 false -->
            爱好：
            吃饭<input type="checkbox" name="fav" value="cf" v-model="hobby">
            睡觉<input type="checkbox" name="fav" value="sj" v-model="hobby">
            打豆豆<input type="checkbox" name="fav" value="ddd" v-model="hobby"><br>

            所属校区：<select v-model="school">
                <option value="">请选择校区：</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
                <option value="gz">广州</option>
            </select><br>
            <!-- lazy:当绑定的元素失去焦点时，绑定到"other" -->
            其他信息：<textarea v-model.lazy="other" cols="20" rows="3"></textarea><br>
            <input type="checkbox" v-model="agree">同意用户协议<br>
            <button>提交</button>
        </form>
</div>

---

v-on:click

点击事件 简写 @click

---

v-if=“bool” v-else-if=“bool” v-else

当 bool===false 表示标签完全消失（控制台也找不到），尽量用 v-show
注意 v-else 后面不要加东西了

---

v-show=“bool”

本质是控制 display

---

v-for="(p,index) in persons :key=‘p.id’ "

:key 用于虚拟dom的diff算法，在元素不会变化的情况下可以用 index 代替 p.id

---

v-text v-html（有安全隐患！！！）

使用后会覆盖原来的内容

---

v-once

只在初次渲染，之后不再改变

---

v-pre

vue不进行解析

---

v-cloak

在vue未编译完全时，会隐藏（如下css）

// css
[v-cloak]{
	display:none
}