vue指令

mustache(胡须)语法 {{}} 用于元素标签内容的绑定

1. 指令用法

• v-once, 没有值，不需要=

<div v-once></div>

• v-html，url:'https:www.baidu.com'

<div v-html="url"></div>

• v-for, goods:['today','ok', 'good']

<ul>
 <li v-for='item in goods'>{{item}}</li>
</ul>

• v-text，不灵活，常用mustache语法

<div>{{message}}</div>
== 等价于
<div v-text="message"></div> 

• v-pre，原封不动的展示，不做解析

<div>{{message}}</div>
// 输出{{message}}

• v-cloak，斗篷 vue解析前，有这个属性，vue解析后，属性消失

<div v-cloak>{{message}}</div>
//css
<style>
    [v-cloak]: {
        display: 'none'
    }
</style>

2. v-bind

动态绑定属性 (语法糖：v-bind:src ===等价于 :src)

<img  v-bind:src="imgUrl"/>
<a v-bind:href="aHref">百度</a>

变量：imgUrl: 'http:www.baidu.com',
    aHref: 'http:www.baidu.com'

动态绑定class

• 对象语法

 方法1: <h2 v-bind:class="{类名1: boolean1，类名2：boolean2}">{{message}}</h2>
 
 boolean1，boolean2是个参数，在data中定义
 
 方法2:写在methods中  <h2 v-bind:class="getClass()">{{message}}</h2>
 
 getClass：function（）{
     return {类名1: this.boolean1，类名2：this.boolean2}
 }

• 数组语法 用的少

[active,line] : data的变量
[‘active’,‘line’] 字符串

<h2 v-bind:class="[active, line]">{{message}}</h2>

动态绑定style

• 对象语法

<h2 :style="{fontSize: '50px', color: 'red'}">{{message}}</h2>
属性值可以动态的设置为一个变量

• 数组语法

<h2 :style="[baseStyle, overStyle]">{{message}}</h2>

baseStyle: {color: 'red'}