Vue中的常用指令

一、常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

• 内容渲染指令（v-html、v-text）

• 条件渲染指令（v-show、v-if、v-else、v-else-if）

• 事件绑定指令（v-on）

• 属性绑定指令 （v-bind）

• 双向绑定指令（v-model）

• 列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

二、内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

• v-text（类似innerText）

• • 使用语法：

    hello

    ，意思是将 uame 值渲染到 p 标签中

  • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

• v-html（类似 innerHTML）

• • 使用语法：

    hello

    ，意思是将 intro 值渲染到 p 标签中

  • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容

  • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：

 
  

    
个人信息
	// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
    
姓名：
 
    
简介：
  
 

三、条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

1.v-show

1. 作用： 控制元素显示隐藏

2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

3. 原理： 切换 display:none 控制显示隐藏

4. 场景：频繁切换显示隐藏的场景

2. v-if

1. 作用： 控制元素显示隐藏（条件渲染）

2. 语法： v-if= "表达式" 表达式值 true显示， false 隐藏

3. 原理： 基于条件判断，是否创建 或 移除元素节点

4. 场景： 要么显示，要么隐藏，不频繁切换的场景

示例代码：

 

    
我是v-show控制的盒子
    
我是v-if控制的盒子
  
  
  
  

3.v-else 和 v-else-if

        1.作用：辅助v-if进行判断渲染

        2.语法：v-else v-else-if="表达式"

        3.需要紧接着v-if使用

示例代码：

 

    
性别：♂ 男
    
性别：♀ 女
    

    
成绩评定A：奖励电脑一台
    
成绩评定B：奖励周末郊游
    
成绩评定C：奖励零食礼包
    
成绩评定D：惩罚一周不能玩手机
  
  
  
  

四、事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

• 按钮

• 按钮

• 按钮

• v-on: 简写为 @

v-on （v-on: 可简写为 @）

1.内联语句

    -
    {{ count }}
    +
  
  
  

2.事件处理函数

注意：

• 事件处理函数应该写到一个跟data同级的配置项（methods）中

• methods中的函数内部的this都指向Vue实例

    切换显示隐藏
    
黑马程序员
  
  
  
  

五、属性绑定指令

v-bind

1. 作用：动态设置html的标签属性 比如：src、url、title

2. 语法：v-bind:属性名=“表达式”

3. v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

• （v-bind可以省略）

六、小案例-波仔的学习之旅

需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片

实现思路：

1.数组存储图片路径 ['url1','url2','url3'，...]

2.可以准备个下标index 去数组中取图片地址。

3.通过v-bind给src绑定当前的图片地址

4.点击上一页下一页只需要修改下标的值即可

5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

  

    上一页
    

      
    
    下一页
  
  
  

七、列表渲染指令

1.v-for

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

• item 是数组中的每一项

• index 是每一项的索引，不需要可以省略

• arr 是被遍历的数组

此语法也可以遍历对象和数字

    
小黑水果店
    

      

        {{ item }} - {{ index }}
      
    

    

      

        {{ item }}
      
    
  

  
  

2.v-for中的key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

实例代码：

    
小黑的书架
    

      

        {{ item.name }}
        {{ item.author }}
        删除
      
    
  
  
  

八、小案例-小黑的书架

需求：

1.根据左侧数据渲染出右侧列表（v-for）

2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）

 

    
小黑的书架
    

      

        {{ item.name }}
        {{ item.author }}
        删除
      
    
  
  
  

九、双向绑定指令

v-model

所谓双向绑定就是：

1. 数据改变后，呈现的页面结果会更新

2. 页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量"

需求：使用双向绑定实现以下需求

1. 点击登录按钮获取表单中的内容

2. 点击重置按钮清空表单中的内容

    
    账户： 


    密码： 


    登录
    重置
  
  
  

十、综合案例-小黑记事本

功能需求：

1. 列表渲染

2. 删除功能

3. 添加功能

4. 底部统计 和 清空

  
  

    
小黑记事本
    
    添加任务
  
  
  

    

      

        

          {{ index + 1 }}. {{ item.name }}
          
        
      
    
  
  
  

    
    合 计: {{ list.length }} 
    
    
      清空任务