vue指令

export default{

　　data(){

　　　　return{

　　　　　　name:'lili',

　　　　　　msg:11,

　　　　　　aa:`<div>aaaaa</div>`,

　　　　　　isActive:true,

　　　　　　isRed:false,

　　　　　　isGreen:'green'

　　　　　　}

　　　　}

}

　　

1、v-pre:跳过当前标签，不进行渲染 。 {{ name }}   展示出来就是name ，不会解析

2、v-once:{{ name }}解析过后显示lili，如 vm.name = 'ff'，页面不会再渲染

3、<div v-text=“msg”>fdfd</div>

v-text相当于innerText，会渲染msg的内容，后面的fdfd就没了。

插值表达式{{ msg }}fdfd则不会丢失，一般用差值表达式

4、<div v-html='aa'></div> 等价于 innerHtml

5、<div v-cloak="name"></div>  防止页面闪烁（一开始显示{{ name }} ，后来进行渲染的问题）

6、v-if   v-else-if   v-else实现条件渲染。注意：中间不可有其他语句，一定要连接在一块。 改变的是dom结构

7、v-show 改变的是css样式display          注意：如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

8、<div v-for= "item in items"></div>    循环遍历的是值，每条数据  key值不可以写在template中

8、v-bind 数据绑定

对象语法<div :class="{'active':isActive,'red':isRed}"></div>   渲染出来<div class="active"></div>

数组语法<div :class="[{'active':isActive,'red':isRed},isGreen]"></div>   <div class="active green"></div>

绑定style是对象形式

<div :style="{width:'100px',height:'100px'}"> </div>

被绑定的数据查找顺序：data——》methods——》computed