Vue基本指令 v-开头

指令都绑定在html标签元素上

v-for  （循环元素）

可以是数组、数字、字符串和对象

<p>数组遍历</p>
        <ul v-for="(item,index) in list">
            朋友{{index+1}}
            <li v-for="(ite,i1) in item">{{ite}}</li>
        </ul>
<p>数字遍历</p>
        <ul>
            <li v-for="(nitem,i2) in n">{{nitem}}</li>
        </ul>
<p>字符串遍历</p>
        <ul>
            <li v-for="(stritem,i3) in str">{{stritem}}</li>
        </ul>
<p>对象遍历</p>
        <p v-for="(value,key) in obj">{{key}}--{{value}}</p>

注意：对象为属性名和属性值，不是内容和下标

v-if 和 v-show（隐藏和显示效果）

后面代码为true就显示，为false就隐藏

v-if 是删除元素，v-show是把元素display属性改为none（元素存在）

v-show 性能略微比 v-if 高，改变css属性，元素并未完全消失，适用于频繁切换

v-if 比 v-show 安全性高，删除真实DOM

v-else

v-else 必须和 v-if 一起使用

v-else 和 v-if 必须相邻，要不然无效

v-on: （绑定）

可以简写为@

v-on:input v-on:change v-on:click
@input @change @click

 可以绑定一个事件或多个事件

绑定多个事件要以对象形式绑定

v-on={click:" ",mouseover:""}
@={click:" ",mouseover:""}

 v-bind:

可以简写为 ：

v-bind:class  v-bind:style  v-bind:name  v-bind:title='js语句'
:class='js语句' :style='js语句' :name='js语句' :title="js语句"

可以给v-bind:style 一个对象，以动态地切换style

div :style="{key:value,key:value}"

注意：v-bind:class指令可以与普通的class特性共存

div :class='isTrue?"class1":"class2"'
div :class="{class1:true/false,class2:true/false,class3:true/false}" 
true表示添加该类 false不添加
div :class='["red","yellow","bg"]' 

CSS属性名必须用驼峰命名法

v-html 和 v-text

v-html  主要用来渲染·富文本（带标签的）能够识别标签  

缺点：容易造成代码注入攻击

v-text  主要用来渲染普通文本（不带标签，直接写的）

v-bloak

用来解决信号不好是 {{ }} 出现的乱码闪烁现象

加在css中当属性名 

<style>
        [v-cloak]{
            display: none;
        }
</style>
<div id="app" v-cloak>
        <div v-text="message"></div>
        <h1>{{message}}</h1>
</div>

v-model（双向数据绑定）

视图和数据相互都同步一直的

主要用法如下

<input v-model='value'>
返回value值

<select v-model='val'>
		<option value=''>
</select>
下拉框写在select上面用的是option的值
		
<input type=checkbox v-model='val'>
val值为 true/false
 
<input type=radio  v-model='val' value='男'>
单选框必须写value值

v-per 和 v-once

v-pre    vue解析时跳过此元素

v-once  只解析一次，数据更新也不再解析