vue指令

[Wscats]

v-text

v-text类似于表达书{{}}的作用，不过以指令的形式写的时候就会像表达式那样在vue未加载完时候显示{{}}

<span v-text="name"></span>
<span>{{name}}</span>

v-html

输出html结构，要注意的是不要用在用户提交的地方，以防XSS攻击

<div v-html="html"></div>
<div>{{{html}}}</div>

v-if

条件判断渲染，跟v-show的区别在于，v-show是改变display的属性值，而v-if是对DOM结构的增删

<p v-if="bool">wsscat</p>
<p v-show="bool">wsscat</p>

v-show

根据表达式的值的真假切换元素的display CSS属性，注意angular有ng-show和ng-hide，但是vue没有v-hide

<p v-if="bool">wsscat</p>
<p v-show="bool">wsscat</p>

v-if&&v-show

前一兄弟元素必须有v-if或v-show，也就是说包含v-if和v-show的标签要紧靠在一起，不然就会失效

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-for

类似于angular的ng-repeat，可以接收对象，数组和字符串，$index为遍历的索引值

<div v-for="item in items" id="item-{{$index}}">
  {{ item.text }}
</div>

v-on

v-on都可以缩写@代替，例如@click，@keyup

<button v-on:click="do()"></button>
<!-- 缩写 -->
<button @click="do()"></button>

v-bind

v-bind可以缩写为:，动态绑定一个或者多个属性值

<img v-bind:src="imgUrl" />
<!-- 缩写 -->
<img :src="imgUrl" />
<a v-bind:href="url">to wsscat</a>
<!-- 缩写 -->
<a :href="url">to wsscat</a>
<!-- 绑定 class -->
<div :class="{ red: isRed }"></div>
<!-- 绑定 style -->
<div :style="{ fontSize: size + 'px' }"></div>

v-model

从视图的标签中获取数据，并把数据绑定回JS
用在下面这几个地方：

<input v-model＝'wsscat'>
<select v-model＝'wsscat'>
<textarea v-model＝'wsscat'>