Vue 指令详解-阿里云开发者社区

Vue 指令详解

数据类型

Vue 中用到的数据定义在 data 中。
data 中可以写复杂类型的数据。
渲染复杂类型数据时，遵守 js 的语法即可。

内容绑定，事件绑定

v-text 指令

v-text 会设置标签内所有的内容。

v-text 通常情况下，接收一个 string 类型。

<div class="app" v-text="message">
</div>
<script src="./vue源码/vue.js"></script>
<script>
  var app = new Vue({
    el: '.app',
    data: {
      message: '你好孟钊'
    }
  })
</script>
<!-- 拼接：<h2class="app" v-text="message+'!'"></h2> --/>
<!-- 拼接：<h2>深圳{{message+"!"}}</h2> --/>

设置部分内容可以使用<h2>深圳{{message}}</h2>，这种方法叫差值表达式。

v-html 指令

如果我们直接通过 {{}} 来输出，会将 HTML 代码一起输出。

但是我们可能希望按照 HTML 的格式进行解析，并且显示对应的内容。

可以使用 v-html 指令：
1）该指令后面往往会跟上一个 string 类型。
2）会将 string 的 HTML 解析出来并且进行渲染。

<div class="app">
  <span v-html="message"></span>
</div>
<script src="./vue源码/vue.js"></script>
<script>
  var app = new Vue({
    el: '.app',
    data: {
      message: '<h1>你好</h1>'
    }
  })
</script>

v-on 指令

为元素绑定事件

语法：<input type="button" value="事件绑定" v-on：click="methods 中的方法"></input>。

v-on: 可以简写成@。

计数器案例

<div id="app">
    <h2>当前计数：{{counter}}</h2>
    <!-- <button v-on:click="counter--">-</button> -->
    <!-- <button v-on:click="counter++">+</button> -->
    <button v-on:click="sub">-</button>
    <button v-on:click="add">+</button>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            counter: '0',
        },
        methods: {
            add: function(){
              if(this.counter<10){
                this.counter++
              }else{
                alert('别加了，最大了！')
              }
            },
            sub: function(){
              if(this.counter>0){
                this.counter--
              }else{
                alert('别减了，已经没了！')
              }
            }
    }
    })
</script>

v-on 补充

传递自定义参数，事件修饰符。
事件绑定的方法写成函数调用的形式，可以传入自定义参数。
定义方法时需要定义形参来接收传入的实参。
事件的后面跟上.修饰符 可以对事件进行限制。
.enter 可以限制触发的按键为回车。

总结

methods 属性：该属性用于在 Vue 对象中定义方法。

@click 指令：该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是 methods 中定义的方法）。

语法糖：简写。 |名称|作用| |:|:| |click|点击事件| |mouseenter|鼠标移入| |dblclick|鼠标双击事件|

v-model 指令

获取和设置表单元素的值（双向数据绑定）.
绑定的数据会和表单元素值相关。
绑定的元素⬅➡表单元素的值。
v-model 原理：

v-model 其实是一个语法糖，他的背后本质上是包含两个操作。

v-bind 绑定一个 value 值。
v-on 指令给当前元素绑定 input 事件。

<div id="app">
  <input type="text" v-model="message" @keyup.enter="getM">
  <h2>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message:'黑马程序员'
    },
    methods: {
      getM:function(){
        alert(this.message)
      }
    }
  })
</script>

v-model: radio

当存在多个单选框时。

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="message">男
  </label>
  <label for="famale">
    <input type="radio" id="famale" value="女" v-model="message">女
  </label>
  <h2>你的选择是：{{message}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '男'
    }
  })
</script>

v-model: checkbox

单选框

v-model 即为布尔值。

此时 input 的 value 值并不影响 v-model 的值。

<div id="app">
  <label for="agreement">
    <input type="checkbox" id="agreement" v-model="agreement">我已阅读并同意以上协议
  </label>
  <button :disabled="!agreement">注册</button>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      agreement: false
    }
  })
</script>

2.多选框

多个复选框因为要选择多个，所以对应的 data 中属性是一个数组。

当选中某一个时，就会将 input 的 value 值添加到数组中。

<div id="app">
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>你的爱好是：{{hobbies}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: []
    }
  })
</script>

v-model: select

和 checkbox 一样，select 也分单选和多选两种情况。

单选：只能选中一个值。

v-model 绑定的是一个值。
当我们选中 option 中的一个时，会将它对应的 value 赋值到 mySelect 中。

<div id="app">
  <select name="" id=""  v-model="fruit">
    <option value="李子">李子</option>
    <option value="火龙果">火龙果</option>
    <option value="葡萄">葡萄</option>
    <option value="哈密瓜">哈密瓜</option>
  </select>
  <h2>你选择的水果是：{{fruit}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruit: '火龙果'
    }
  })
</script>

3.多选：可以选中多个值。

v-model 绑定的是一个数组。

当选中多个值时，就会将选中的 option 对应的 value 添加到数组 mySelects 中。

<div id="app">
  <select name="" id=""  v-model="fruits" multiple>
    <option value="李子">李子</option>
    <option value="火龙果">火龙果</option>
    <option value="葡萄">葡萄</option>
    <option value="哈密瓜">哈密瓜</option>
  </select>
  <h2>你选择的水果是：{{fruits}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruits: []
    }
  })
</script>

值绑定

用来给所要操作的元素动态绑定 value 值。

<div id="app">
  <select name="" id="" :value="fruits" v-model="fruit" multiple>
    <option>李子</option>
    <option>火龙果</option>
    <option>葡萄</option>
    <option>哈密瓜</option>
  </select>
  <h2>你选择的水果是：{{fruit}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruit: [],
      fruits: [ "李子", "火龙果", "葡萄", "哈密瓜" ]
    }
  })
</script>

v-model 修饰符

lazy 修饰符

默认情况下，v-model 默认是在 input 事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的 data 中的数据就会自动发生。
lazy 修饰符可以让数据在失去焦点或者回车时才会更新。

number 修饰符

默认情况下，在输入框中，无论我们输入的是字母还是数字，都会被当作字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好是直接将内容当作数字处理。
number 修饰符可以让在输入框中输入的内容自动转成数字类型。

trim 修饰符

如果输入的内容首尾有很多空格，通常我们希望将其去除。
trim 修饰符可以过滤内容两边的空格。

v-show 指令

根据表达值的真假，切换元素的显示和隐藏。
原理是修改元素的 display 值，实现显示隐藏。
指令后面的内容，最终都会解析为布尔值。
值为 true 元素显示，值为 false 元素隐藏。

<div id="app">
  <input type="button" v-on:click="changeIsShow" value="切换"></input>
  <img v-show="isShow" src="./images/1.jpg" alt="">
</div>
<script src="./vue源码/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isShow: true,
    },
    methods: {
      changeIsShow: function () {
        this.isShow = !this.isShow
      }
    }
  })
</script>

v-if 指令

根据表达值的真假，切换元素的显示和隐藏（操纵 DOM 元素）。

本质是操纵 DOM 元素来切换显示状态。

表达式的值为 true ，元素存在于 DOM 树中，为 false ，从 DOM 树中移除

  <div id="app">
    <input type="button" value="点击" @click="toggleIsShow">
    <p v-if="isShow">黑马程序员</p>
  </div>
  <script src="./vue源码/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        isShow: false
      },
      methods: {
        toggleIsShow: function () {
          this.isShow = !this.isShow
        }
      }
    })
  </script>

v-bind 指令

v-bind 绑定class

设置元素的属性（比如：src，title，class）。

语法：v-bing:属性名=表达式。

简写：:属性名。

需要动态的增删 class 建议使用对象的方式。

语法：

<!-- 用法一：直接通过 {} 绑定一个类。 -->
<h2 :class="{'active': isActive}">Hello World</h2>
<!-- 用法二：也可以通过判断，传入多个值。 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
<!-- 用法三：和普通的类同时存在，并不冲突。 -->
<!-- 注：如果 isActive 和 isLine 都为 true ，那么会有 title/active/line 三个类 -->
<h2 class="title" :class="{'active': isActive , 'line':isLine}">Hello World</h2>
<!-- 用法四：如果过于复杂，可以放在一个 methods 或者 computed 中。 -->
<!-- 注：classes 是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>
<!-- 用法五：数组语法。(用的次数较少) -->
<h2 class="title" :class="['active','line']">Hello World</h2>

案例：

  <div id="app">
    <img v-bind:src="imgSrc" alt="">
    <img :src="imgSrc" alt="">
    <img :src="imgSrc" alt="" :title="imgtitle+'!!!!'">
    <img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
    <img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
  </div>
  <script src="./vue源码/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        imgSrc: "https://www.itheima.com/images/logo.png",
        imgtitle: "黑马程序员",
        isActive: false
      },
      methods: {
        toggleActive: function () {
          this.isActive = !this.isActive
        }
      }
    })
  </script>

v-bind 绑定style

v-bind:style：可以绑定一些 CSS 内联样式。

在写 CSS 属性名的时候，比如 font-size

采用驼峰式：fontSize 。
或者短横线分隔（记得用单引号括起来）'font-size' 。

绑定 class 有两种方式：

对象语法：:style="{key(属性名): 'value(属性值)'}"
1）对象的 key 是 CSS 属性名称。

2）对象的 value 是具体赋的值，值可以来自于 data 中的属性。

数组语法：:style="[baseStyles,overridingStyles]"
1）多个值以，分隔即可。

v-for 指令

v-for 遍历数组

根据数据生成列表结构。
数组经常和 v-for 结合使用。
语法是：(item,index) in 数据。
item 和 index 可以结合其他指令一起使用。
数组长度的更新会同步到页面上，是响应式的。

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
        <!-- v-for：循环遍历 movies 这个数组，给它展示出来 -->
    </ul>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越','大话西游','你的婚礼','我要我们在一起','我在时间尽头等你']
        },
    }) 
</script>

v-for 遍历对象

<div id="app">
  <ul>
    <li v-for="item in info">{{item}}</li>
        <!-- 也可以同时获取 key 和 value ：格式：(value,key) -->
  </ul>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info:{
        name: 'mengzhao',
        age: 20,
        height: 1.75
      }
    },
  })
</script>

运行结果：

组件的 key 属性

官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个 key 属性。

key 的作用**主要是为了高效的更新虚拟 DOM ** 。

了解内容：

为什么需要这个 key 属性呢？

这其实和 Vue 的虚拟 DOM 的 Diff 算法有关系。
这里我们借用 React' s diff algorithm 中的一张图来简单说明一下

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。

我们希望可以在 B 和 C 之间加一个 F ，Diff 算法默认执行起来是这样的。
即把 C 更新成 F , D 更新成 C , E 更新成 D ，最后再插入 E ，是不是很没有效率？

所以我们需要使用 key 来给每个节点做一个唯一标识。

Diff 算法就可以正确的识别此节点。
找到正确的位置插入新的节点。

检测数组更新

因为 Vue 是响应式的，所以当数据发生变化时，Vue 会自动监测数据变化，视图会发生对应的更新。

Vue 中包含了一组观察数组编译的方法，使用它们改变数据也会触发视图的更新。

push()：在数组最后添加元素。
pop()：在数组后面删除最后一个元素，并返回数组。
shift()：在数组后面删除第一个元素，并返回数组。
unshift()：将一个或多个元素添加到数组的开头，并返回新数组的长度。
splice()：删除元素/修改元素/添加元素。
sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
reverse()：反转数组项的顺序。

作业的回顾

数组中包括几个电影，以列表的形式展示在页面上，点击哪个哪个变成红色。

<div id="app">
  <ul>
    <li v-for="(item,index) in movies" :class="{active: currentIndex === index}" @click="liclick(index)">{{item}}</li>
  </ul>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['我在时间尽头等你','我要我们在一起','你的婚礼','当男人恋爱时'],
      currentIndex: 0
    },
    methods: {
      liclick(index){
        this.currentIndex = index
      }
    }
  })
</script>

v-once 指令

v-once 指令：

该指令后面不需要跟任何表达式（比如之前的 v-for 后面是跟表达式的）。
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

v-pre 指令

在特定情境下才会使用 v-pre 指令。

如果需要展示{{message}}的时候。

<div id="app">
    <h2 v-pre>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
    }) 
</script>
<!-- 在页面展示效果是{{message}}，而不是你好啊 -->

v-cloak

在 Vue 解析之前，div 中有一个属性 v-cloak。

在 Vue 解析之后，div 中没有一个属性 v-cloak。

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <h2 v-cloak>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
    }) 
</script>

v-show

<div id="app">
  <!-- v-if：当条件为 false 时，包含 v-if 指令的元素，根本不存在 DOM 中。 -->
  <h2 v-if="isShow">{{message}}</h2>
  <!-- v-show：当条件为 false 时，v-show 只是给元素添加了一个行内样式：display: none -->
  <h2 v-show="isShow">{{message}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
  })
</script>

在开发中如何选择 v-if 和 v-show 呢？

当需要在显示与隐藏之间切换很频繁时，用 v-show 。

当只有一次切换时，通过 v-if 。

记事本案例

功能

新增

生成列表结构（v-for 数组）。
获取用户输入（v-model）。
回车，新增数据（v-on .enter 添加数据）。

删除

点击删除指定内容（v-on splice 索引）。

统计

统计信息个数（v-text length）。
基于数据的开发方式。

清空

点击清除所有信息（v-on）。

隐藏

没有数据时，隐藏元素（v-show v-if 数组非空）。

<!-- 主体区域 -->
<section id="todoapp">
  <!-- 输入框 -->
  <header class="header">
    <h1>记事本</h1>
    <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list">
        <div class="view">
          <span class="index">{{ index+1 }}</span>
          <label>{{ item }}</label>
          <button class="destroy" @click="remove(index)">x</button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer">
    <span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong>items left</span>
    <button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
  </footer>
</section>
<script src="./vue源码/vue.js"></script>
<script>
  var app = new Vue({
    el: '#todoapp',
    data: {
      list: ['写代码', '吃饭饭', '玩游戏'],
      inputValue: ""
    },
    methods: {
      add: function () {
        this.list.push(this.inputValue)
        this.inputValue = ''
        },
      remove: function (index) {
        this.list.splice(index, 1)
      },
      clear: function () {
        this.list = []
      }
    }
  })
</script>

图书购物车案例

过滤器

在实例的 options 里面定义过滤器。

// 使用过滤器的方法：
// {{item.price | 过滤器}}
// 定义过滤器的方法：
const app = new Vue({
    el: '',
    data: ' ',
    // 过滤器
    filters:{
        函数名(需要过滤的参数){
            函数体
        }
    }
})

案例源码

<div id="app">
  <div v-if="this.books.length">
    <table>
      <thead>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>{{item.price | finalPrice}}</td>
          <td>
            <button @click="decresement(index)" v-bind:disabled="item.count <= 1">-</button>
            {{item.count}}
            <button @click="incresement(index)">+</button>
          </td>
          <td>
            <button @click="clearClick(index)">操作</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>总价格：{{totalPrice | finalPrice}}</h2>
  </div>
  <h2 v-else>购物车为空！</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [{
        id: 1,
        name: '《算法导论》',
        date: '2020-12-02',
        price: 128.00,
        count: 1
      }, {
        id: 2,
        name: '《C语言程序设计》',
        date: '2002-2-02',
        price: 88.00,
        count: 1
      }, {
        id: 3,
        name: '《Vuejs从入门到基础》',
        date: '2020-3-02',
        price: 48.00,
        count: 1
      }, {
        id: 4,
        name: '《Java程序设计》',
        date: '2004-1-28',
        price: 64.00,
        count: 1
      }, {
        id: 5,
        name: '《JavaScript权威指南》',
        date: '2000-8-05',
        price: 108.00,
        count: 1
      }],
    },
    computed: {
      totalPrice(){
        let totalprice = 0
        for(let i=0;i<this.books.length;i++){
          totalprice += this.books[i].price * this.books[i].count
        }
        return totalprice
      }
    },
    methods: {
      decresement(index) {
        this.books[index].count--
      },
      incresement(index) {
        this.books[index].count++
      },
      clearClick(index) {
        this.books.splice(index, 1)
      }
    },
        // 过滤器
    filters: {
      finalPrice(price) {
        return '￥' + price.toFixed(2)
      }
    }
  })
</script>

Vue 指令详解

Vue 指令详解

数据类型

内容绑定，事件绑定

v-text 指令

v-html 指令

v-on 指令

v-on 补充

v-model 指令

v-model: radio

v-model: checkbox

v-model: select

值绑定

v-model 修饰符

v-show 指令

v-if 指令

v-bind 指令

v-bind 绑定class

v-bind 绑定style

v-for 指令

v-for 遍历数组

v-for 遍历对象

组件的 key 属性

检测数组更新

作业的回顾

v-once 指令

v-pre 指令

v-cloak

v-show

记事本案例

功能

图书购物车案例

过滤器

案例源码

热门文章

最新文章

相关课程

相关电子书