Vue部分内部指令整理

1. v-if:

//v-if：是vue 的一个内部指令，指令用在我们的html中。
//v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后显示用户名称。
<div v-if="isLogin">你好，Stepehn！</div>

2. v-show ：

//v-show ：调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
<div v-show="isLogin">你好：Stephen</div>

3. v-if 和v-show的区别：

//v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
//v-show：调整css dispaly属性，可以使客户端操作更加流畅。

4. v-for指令 ：解决模板循环问题

// v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
<li v-for="item in items">
    {{item}}
</li>

5. 排序：

// 我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了Vue的computed:属性。
computed:{
    sortItems:function(){
         return this.items.sort();
    }
}

6. v-text & v-html

在html中输出data中的值用的是{{xxx}},这种情况是有弊端的，就是当网速很慢或者javascript出错时，会暴露{{xxx}}。Vue提供的v-text,就是解决这个问题的。

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。

需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

<span>{{ message }}</span>//×
<span v-text="message"></span>//√

7. v-on：绑定事件监听器

// v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
<button v-on:click="jiafen">加分</button>
 
// v-on 还有一种简单的写法，就是用@代替。
<button @click="jiafen">加分</button>
 
//除了绑定click之外，还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到count上。
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
 
// 同样可以写成：
<input type="text" @keyup.enter="onEnter" v-model="secondCount">

8. v-bind 和 v-model

Mustache (双大括号写法)不能在 HTML 属性中使用，应使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

<!-- 完整语法 -->
<a v-bind:href="url"></a>
 
<!-- 缩写 -->
<a :href="url"></a>
 
// 直接绑定class样式
<div :class="className">1、绑定classA</div>
 
//绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
<div :class="{classA:isOk}">2、绑定class中的判断</div>
 
//绑定class中的数组
<div :class="[classA,classB]">3、绑定class中的数组</div>
 
//绑定class中使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
 
//绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
 
//用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>

区别：

1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值=“表达式”

2:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的

<input type="text" v-model="message"/>
<p>输入的内容是：{{ message }}</p>

参考：https://blog.youkuaiyun.com/guanxiaoyu002/article/details/81112214