Vue学习笔记——内部指令

爱被打了一巴掌 2022-05-19 02:35 206阅读 0赞

### 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>