Vue.js快速入门第2讲——本地应用中的常见指令（上）

骑猪看日落 2022-12-19 00:52 41阅读 0赞

# 前言 #

上一讲我们介绍了Vue的基础知识点，而且已经可以把一个基本的项目跑起来了，接下来我们就要开始学习Vue本地应用中的常见指令了。

本讲的核心是如何通过Vue的方式去开发常见的网页效果，不同于早期基于dom元素的web开发——获取元素，操纵它们。在Vue中，我们使用的是一系列以v-开头的特殊语法来干这件事情，比如说v-on、v-text、v-show等等，不同的写法功能并不一样，但是它们有一个统称，叫做Vue指令。

在Vue指令的学习过程中，我们会以精心设计的案例的形式来巩固知识点的学习。

# v-text指令 #

## 作用 ##

该指令的作用是将数据设置给标签的文本值，也就是textContext这个属性。

## 语法 ##

首先我们准备一个被Vue实例挂载的div标签，然后在div标签内部添加一个标签，比如说h2标签，如下图所示。  
![在这里插入图片描述][20201104202303120.png_pic_center]  
准备工作到这已经搞定了，那么如何使用v-text指令呢？首先我们为h2标签添加一个v-text指令，其实它就是一个属性，写的位置就在标签的内部，然后为它设置一个具体的数据属性，如message，那么这个message数据属性从哪里来呢？它需要定义在data中，如下图所示。  
![在这里插入图片描述][20201104202311938.png_pic_center]  
最终解析完毕以后，该指令会把data中message属性的值直接替换给h2标签的内部。但是这么做有一个缺点，就是**无论h2标签内部有什么内容，它都会被全部替换掉。**

如果你只想要设置替换部分的内容，那么可以使用另外一种写法，即使用两个大括号的方式，在标签的内部进行设置，这种写法也叫做**差值表达式**。官方提供的示例代码就是使用的这种写法，使用这种写法只有双大括号内部的值会被替换，其他内容原封不动的被保留。  
![在这里插入图片描述][20201104202321786.png_pic_center]  
如果我们还想要涉及到一些逻辑代码，那么该指令还支持写表达式吗？可以，我们可以试一试最简单的字符串的拼接，比如拼接一个感叹号，就应该像下面这样子了。  
![在这里插入图片描述][20201104202330397.png_pic_center]  
在差值表达式里面，单引号或者双引号都可以使用，因为两边并没有引号，但是如果是我们的v-text指令行内的这种写法，两边因为已经用了双引号，所以内部我们就只能使用单引号了。

## 案例 ##

到这语法我们已经介绍完毕，下面我们进行代码验证。

### v-text指令的简单使用 ###

新建一个`.html`文件，其内容如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="with=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>v-text指令</title>
        </head>
    
        <body>
            <div id="app">
                
                <h2 v-text="message"></h2>
                <h2 v-text="info"></h2>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script> var app = new Vue({ el:"#app", data:{ message:"哔哩哔哩!!!", info:"前端与移动教研部" } }) </script>
        </body>
    </html>

### 差值表达式（部分替换） ###

新建一个`.html`文件，其内容如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="with=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>v-text指令</title>
        </head>
    
        <body>
            <div id="app">
                
                <h2 v-text="message">深圳</h2>
                <h2 v-text="info">深圳</h2>
                <h2>{
       { info }} 艹（一种草本植物）</h2>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script> var app = new Vue({ el:"#app", data:{ message:"哔哩哔哩!!!", info:"前端与移动教研部" } }) </script>
        </body>
    </html>

### v-text指令结合表达式、单双引号 ###

新建一个`.html`文件，其内容如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="with=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>v-text指令</title>
        </head>
    
        <body>
            <div id="app">
                
                <h2 v-text="message + '?'">深圳</h2>
                <h2 v-text="info + '?'">深圳</h2>
                <h2>{
       { info + "?" }} 艹（一种草本植物）</h2>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script> var app = new Vue({ el:"#app", data:{ message:"哔哩哔哩!!!", info:"前端与移动教研部" } }) </script>
        </body>
    </html>

## 小结 ##

*  v-text指令的作用是设置标签的内容（textContent）
 *  默认写法会替换全部内容，而使用差值表达式`{ {}}`可以替换指定内容
 *  内部支持写表达式

# v-html指令 #

## 作用 ##

该指令的作用是设置标签的innerHTML。

## 语法 ##

听到这个指令，没准你已经想到它和v-text指令的区别了，如果设置的值是普通文本，那么它跟v-text指令所达到的效果是一样的。如果设置的值比较特殊，比如说是html结构，那么结果就不一样了，它会被解析出来！

## 案例 ##

语法已经介绍完毕，接下来我们进行代码验证测试，先看看如何使用v-html指令来设置普通文本。

新建一个`.html`文件，其内容如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="with=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>v-html指令</title>
        </head>
    
        <body>
            <div id="app">
                <p v-html="content"></p>
                <p v-text="content"></p>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script> var app = new Vue({ el: "#app", data: { content:"哔哩哔哩" } }) </script>
        </body>
    </html>

再来看看如何使用v-html指令来设置html结构的东东。首先新建一个`.html`文件，其内容如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="with=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>v-html指令</title>
        </head>
    
        <body>
            <div id="app">
                <p v-html="content"></p>
                <p v-text="content"></p>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script> var app = new Vue({ el: "#app", data: { // content:"哔哩哔哩" content:"<a href='http://www.bilibili.com'>哔哩哔哩</a>" } }) </script>
        </body>
    </html>

然后使用Live Server插件在浏览器中浏览以上html页面，你便会看到如下图所示的效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 4]  
第一个由v-html指令解析后的内容是可以点击进行跳转的，而v-text指令只会解析文本。

## 小结 ##

*  v-html指令的作用是设置元素的innerHTML
 *  内容中有html结构会被解析为标签
 *  v-text指令无论内容是什么，只会解析为文本
 *  解析文本使用v-text，需要解析html结构使用v-html

# v-on指令 #

## 作用 ##

该指令的作用是为元素绑定事件。

## 语法 ##

当咱们希望用户做一些特定操作的时候，比如点击、按下键盘或者滚动鼠标等，执行一些自定义的逻辑，想要做到这一点，我们只须为对应的元素绑定事件即可。在Vue中虽然写法略有差异，但是看起来还是很好理解的。  
![在这里插入图片描述][20201104231407869.png_pic_center]  
但是有个问题，这个事件名到底写什么呢？或者我换个问法，大伙能不能回忆起一些常用的事件名呢？

如果是鼠标点击事件，那么我们就写上click；如果是鼠标移入事件，那么我们就写上mouseenter；如果是鼠标双击事件，那么我们就写上dblclick。

那么问题来了，方法写在哪里呢？它应该写在Vue实例的methods属性中，如下图所示的那样。  
![在这里插入图片描述][20201104231419600.png_pic_center]  
需要注意的是methods属性和el属性、data属性是平级的。

假如methods属性里面，我们定义了一个doIt方法，那么如何把这个doIt方法绑定到一些事件上去呢？看图便知。  
![在这里插入图片描述][20201104231431271.png_pic_center]  
当我们触发某个对应的事件之后，它就会去执行我们绑定的那个方法，并执行方法里面的逻辑。

其实，Vue给我们提供了一种更为简单的写法，它支持把我们的`v-on:`替换成`@`，其他的跟之前一样，如下图所示的那样。  
![在这里插入图片描述][20201104231440741.png_pic_center]  
你可以使用`v-on:`或`@`这两种方式，它们的功能都是完全一样的。只是一般来说，简写代码量会少一些，所以`@`这种方式的使用频率会高一些。

## 案例 ##

新建一个`.html`文件，其内容如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="with=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>v-on指令基础</title>
        </head>
    
        <body>
            
            <div id="app">
                <input type="button" value="v-on指令" v-on:click="doIt" >
                <input type="button" value="v-on指令的简写" @click="doIt" >
                
                <input type="button" value="双击事件" @dblclick="doIt" >
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script> // 3.创建Vue实例 var app = new Vue({ el: "#app", methods: { doIt:function(){ alert("做It"); } } }) </script>
        </body>
    </html>

现在这三个按钮里面绑定的事件，逻辑都非常的简单，都是弹出一个框框，但是我们在实际开发的时候，可能需要做一些更为复杂的逻辑，比如说更改页面里面元素的显示。那么可能你会想到，这样子的话，我就需要去操纵dom元素了，如果你果然有这种想法，那么你的思维方式可能要调整一下了，或者说在Vue里面，这种方式其实不太适用。因为Vue的一大特点就是不用再操纵dom元素了。

那不操纵dom元素我们如何更改页面里面元素的显示呢？Vue开发的项目有一个特点，那就是页面由数据生成，数据改变，页面也会同步跟着改变。所以，刚刚的问题其实就是如何在我们的事件中去修改数据。语法其实非常的简单，通过this关键字就可以点出我们定义在data中的数据了。下面我们以一个例子来演示一下。

新建一个`.html`文件，其内容如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="with=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>v-on指令基础</title>
        </head>
    
        <body>
            
            <div id="app">
                <input type="button" value="v-on指令" v-on:click="doIt" >
                <input type="button" value="v-on指令的简写" @click="doIt" >
                <input type="button" value="双击事件" @dblclick="doIt" >
                <h2 @click="changeFood">{
       { food }}</h2>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script> // 3.创建Vue实例 var app = new Vue({ el: "#app", data: { food: "西兰花炒蛋" }, methods: { doIt: function(){ alert("做It"); }, changeFood: function(){ // console.log(this.food); this.food+="好好吃!" } } }) </script>
        </body>
    </html>

使用Live Server插件在浏览器中浏览以上html页面，效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 6]  
因为我们在`西兰花炒蛋`上面设置了一个点击事件，并用this关键字进行累加拼接操作，所以点击之后，效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 7]  
也就是说现在在代码里面，我们可以拿到数据并更改数据，当数据更改以后，页面也就跟着同步更新了。所以换句话来说，在Vue中，你不需要考虑如何去操作dom元素，只需要考虑怎么去更改我们的数据就行。因为数据更新之后，我们使用数据的那个元素，也会同步更新！此外，还要记住一个this关键字，在我们编写的方法内部，要想拿到定义在data中的数据，得通过this点出来。

## 小结 ##

*  v-on指令的作用是为元素绑定事件
 *  事件名不需要写on
 *  指令可以简写为@
 *  绑定的方法定义在methods属性中
 *  方法内部通过this关键字可以访问定义在data中的数据

# 综合案例：计数器 #

这里我会写一个计数器的综合案例，以此来巩固至此我们所学到的Vue指令，重点是巩固在Vue中如何进行内容的绑定以及事件的绑定。

做出这个计数器小demo之后，在浏览器中浏览的效果如下：  
![在这里插入图片描述][20201104235300668.gif_pic_center]  
看了以上的效果图，可能你一下子想不到思路和步骤，但没关系，我帮你分析出来了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 8]  
按照这个思路和步骤，相信你一定写出来了这个计数器小demo。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>计数器</title>
      <link rel="stylesheet" href="./css/index.css" />
    </head>
    
    <body>
      
      <div id="app">
        
        <div class="input-num">
          <button @click="sub">
            -
          </button>
          <span>{
       { num }}</span>
          <button @click="add">
            +
          </button>
        </div>
        <img src="http://www.itheima.com/images/logo.png" alt="" />
      </div>
      
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      
      <script> // 创建Vue实例 var app = new Vue({ el: "#app", data: { num: 1 }, methods: { add: function () { // console.log("add"); if (this.num < 10) { this.num++; } else { alert("别点啦，最大啦！"); } }, sub: function () { // console.log("sub"); if (this.num > 0) { this.num--; } else { alert("别点啦，最小啦！"); } } } }) </script>
    </body>
    
    </html>

以上代码中嵌入的样式和图片可以从下面我给出的百度网盘链接地址中进行下载。

> 链接：[https://pan.baidu.com/s/1L0pvugWbbj9t449Er0TbHQ][https_pan.baidu.com_s_1L0pvugWbbj9t449Er0TbHQ]，提取码：8um6

[20201104202303120.png_pic_center]: /images/20221120/460f0c38f36e4e25af14eb49b2c66d83.png
[20201104202311938.png_pic_center]: /images/20221120/564052ff37b54ea1b614009b39e721c2.png
[20201104202321786.png_pic_center]: https://img-blog.csdnimg.cn/20201104202321786.png#pic_center
[20201104202330397.png_pic_center]: https://img-blog.csdnimg.cn/20201104202330397.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201104202341581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201104202351456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201104202401858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201104222429569.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201104222440329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[20201104231407869.png_pic_center]: https://img-blog.csdnimg.cn/20201104231407869.png#pic_center
[20201104231419600.png_pic_center]: https://img-blog.csdnimg.cn/20201104231419600.png#pic_center
[20201104231431271.png_pic_center]: https://img-blog.csdnimg.cn/20201104231431271.png#pic_center
[20201104231440741.png_pic_center]: https://img-blog.csdnimg.cn/20201104231440741.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201104231451340.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201104231508241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201104231517563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[20201104235300668.gif_pic_center]: https://img-blog.csdnimg.cn/20201104235300668.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201104235311396.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[https_pan.baidu.com_s_1L0pvugWbbj9t449Er0TbHQ]: https://pan.baidu.com/s/1L0pvugWbbj9t449Er0TbHQ