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><br/>

 

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-model：绑定数据源

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

修饰符

.lazy：取代 input 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。

 

9、v-bind ：绑定标签属性

// v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。
<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
</div>

v-bind 缩写：

<!-- 完整语法 -->
<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>

10、其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
    <div v-pre>{{message}}</div>
这时并不会输出我们的message值，而是直接在网页中显示{{message}}

v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用

[v-cloak] {
    display: none;
}   

<div v-cloak>
  {{ message }}
</div>

v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>