Vue.js高效前端开发 • 【Vue基本指令】

客官°小女子只卖身不卖艺 2022-10-10 09:59 199阅读 0赞

[全部章节 >>>>][Link 1]

--------------------

### 文章目录 ###

*  一、Vue模板语法
 *   *  1、插值
     *  2、表达式
     *  3、指令概述
     *  4、实践练习
 *  二、Vue绑定类样式和内联样式
 *   *  1、Vue绑定类样式
     *  2、Vue绑定内联样式
     *  3、实践练习
 *  三、条件渲染指令
 *   *  1、v-if和v-else
     *  2、v-show
     *  3、实践练习
 *  四、事件绑定
 *   *  1、v-on指令
     *  2、事件修饰符
     *  3、Vue事件绑定的优点
     *  4、实践练习
 *  总结：

--------------------

# 一、Vue模板语法 #

## 1、插值 ##

文本插值是最基本的形式，使用双大括号(Mustache语法) \{ \{\}\}，代码如下所示：

有时候只需渲染一次数据，后续数据变化不再关心，可以通过v-once指令来实现，代码如下所示：

文本插值还可以使用v-text指令来代替双大括号标签，代码如下所示：

`示例：`

<div id="app">
      <p>{
       { userName }}</p>
      <p v-once>{
       { userName }}</p>
      <p v-text="userName"></span>
      <p v-html="userName"></p>
    </div>

// JavaScript代码
    var vm = new Vue({ 
      el: "#app",
      data: { 
        userName: "<h1>欢迎您，管理员！</h1>"
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]

## 2、表达式 ##

*  文本插值也接受表达式形式的值，表达式可由JavaScript表达式和过滤器构成，其中过滤器可以没有，也可以有多个。
 *  表达式是各种数值、变量和运算符的综合体。简单的表达式可以是常量或者变量名称。
 *  表达式的值是其运算结果，如下`示例代码所示：`

<div id="app">
      <p></p>{
       { number+1 }}</p>
      <p>{
       { ok? "Yes":"No" }}</p>
      <p>{
       { message.split("").reverse().join("") }}</p>
      <div v-text="'list-'+id"></div>
    </div>

// JavaScript代码
    var vm = new Vue({ 
      el: "#app",
      data: { 
        number: 1,
        ok: true,
        message: "Hello world",
        id: "01"
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]

> Vue只支持单个表达式，不支持`语句`和`流控制`。另外，在表达式中，不能使用用户自定义的全局变量，只能使用JavaScript的全局变量，例如`Math`和`Date`。以下是无效的表达式代码：

{ {  var book ="JavaScript权威指南" }}//无效表达式
    
    { {  if(ok) return msg }}//无效表达式

## 3、指令概述 ##

*  指令（Directives）是Vue.js中一个重要的特性，主要提供了一种机制将数据的变化映射为`DOM行为`。
 *  指令（Directives）是带有v-前缀的特殊属性。指令属性的值预期是单一`JavaScript表达式`（除了v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。如下代码所示：

<p v-if="seen">现在可以看到的内容</p>
    var vm=new Vue({ 
      el:”#app”,
      data:{ 
          seen:true
      }
    });

> v-if指令将根据表达式seen的值的真假来移除/插入< p >元素

一些指令能接受一个“参数”，在指令后以冒号指明。例如，v-bind指令被用来响应地更新HTML属性，`代码如下所示：`

> href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

v-on指令，它用于监听DOM事件，`代码如下所示：`

> 在这里参数是监听的事件名

一些指令能接受一个“参数”，在指令后以冒号指明。例如，v-bind指令被用来响应地更新HTML属性，`代码如下所示：`

> href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

v-on指令，它用于监听DOM事件，`代码如下所示：`

> 在这里参数是监听的事件名

修饰符（Modifiers）是以半角句号“.”指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()，代码如下所示：

## 4、实践练习 ##

# 二、Vue绑定类样式和内联样式 #

## 1、Vue绑定类样式 ##

*  使用`v-bind`指令绑定类属性有两种语法：`对象语法`和`数组语法`。
 *  对象语法：  
    `v-bind:class`接受参数是一个对象，而且可以与普通的`class属性`共存。`具体语法如下所示：`

> 类样式名可以有多个，通过绑定数据为true或false来控制样式是否应用到元素中

`示例：`

通过数据绑定来控制< div>标签是否添加边框、阴影、背景颜色和鼠标悬停动画显示效果。

/* css代码:*/
    #app { ...}
    #app .border { ...} /*边框*/
    #app .shadow { ...} /*阴影*/
    #app .backcolor { ...} /*背景颜色*/
    #app .hover{ ...} /*鼠标悬停*/
    #app .hover:hover { ...} /*鼠标悬停*/

<div id="app">
    <p>
    <input type="checkbox" v-model="isBorder">边框
    <input type="checkbox" v-model="isShadow">阴影
    <input type="checkbox" v-model="isBackColor">背景
    <input type="checkbox" v-model="isHover">悬停动画
    </p>
    <div v-bind:class="{border:isBorder, shadow:isShadow,backcolor:isBackColor,hover:isHover}"></div>
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        isBorder: true,
        isShadow: true,
        isBackColor: true,
        isHover: true
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]

*  数组语法  
    绑定class不仅可以使用对象方式，还可以是数组方式，`语法如下所示：`

`示例：`

通过数组语法在< div>标签上绑定了边框、阴影和背景颜色类样式

/* css代码:*/
    #app { ...}
    #app .border { ...}/*边框*/
    #app .shadow { ...}/*阴影*/
    #app .backcolor { ...}/*背景颜色*/

<div id="app">       
    <h3>绑定class的数组语法</h3>
    <div v-bind:class="[borderClass,shadowClass,backColorClass]"></div>
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        borderClass: "border",
        shadowClass: "shadow",
        backColorClass: "backcolor"
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]

## 2、Vue绑定内联样式 ##

*  在Vue中不仅可以绑定类样式，还可以绑定HTML标签的`内联样式`。绑定HTML标签的内联样式也可以使用`对象`或`数组方式`。  
    对象语法
 *  v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个`JavaScript对象`。CSS属性名可以用`驼峰式（camelCase）`或短`横线分隔（kebab-case）`，需要用引号括起来命名，`语法如下所示：`

或者

`示例：`

使用Vue绑定HTML标签的内联样式实现向油画上添加边框圆角和阴影效果。

<div id="app">
    <h3>绑定Style 对象语法</h3>
    <img src="images/painting.jpg" alt="风景画" v-bind:style="styleObject" />
    </div>

// JavaScript代码:
    var vm = new Vue({ 
    	el: "#app",
    	data: { 
    		styleObject: { 
    			width: "450px",
    			height: "400px",
    			"box-shadow": "0 5px 15px 5px #888888",
    			borderRadius: "50px"
    		}
    	}
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]  
`示例：`

使用数组语法绑定HTML标签内联样式向花朵油画图添加边框、圆角和阴影效果

<div id="app">
    <h3>绑定Style 数组语法</h3>
    <img src="images/flower.jpg" alt="花朵画" v-bind:style="[baseStyle,extendStyle]" />
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        baseStyle: { ...},
        extendStyle:{ ...}
      }
    });

> 当v-bind:style使用需要添加浏览器引擎前缀的CSS属性时，如transform，Vue会自动侦测并添加相应的前缀。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]

## 3、实践练习 ##

# 三、条件渲染指令 #

## 1、v-if和v-else ##

*  v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，基本语法如下：

`语法：`

>  *  `expression`是一个返回bool值的表达式，表达式可以是一个`bool属性`，也可以是一个返回bool的`运算式`。
>  *  可以用`v-else`指令为`v-if`添加一个`“else块”`。v-else元素必须立即跟在v-if元素的后面，否则它不能被识别。

`示例：`

使用v-if和v-else实现用户注册和登录的切换显示。

<div id="app">
      <h1>用户登录/注册</h1>
      <input type="checkbox" v-model="isRegUser">是注册
      <div class="box">
        <div v-if="isRegUser">
          <h3>用户注册</h3>
          
        </div>
        <div v-else>
          <h3>用户登录</h3>
          
        </div>
      </div>
    </div>

> 当“是注册”的复选框选中时显示用户注册内容，否则显示用户登录内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]

## 2、v-show ##

除了上面的v-if以外，也可以使用v-show实现条件渲染。

与v-if不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。

> v-show不支持元素，也不支持v-else。

`示例：`

使用v-show实现IT行业公司上班时间切换

<div id="app">
      <h1>IT行业公司上班时间表</h1>
      <input type="checkbox" v-model="inTheSummer">是夏天时间
      <div class="box">
        <h3>今日上班打卡时间：</h3>
        <div v-show="inTheSummer">
          <p>8：30-17:00</p>
        </div>
        <div v-show="!inTheSummer">
          <p>9：00-17:30</p>
        </div>
      </div>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]

*  v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果在初始渲染时条件为假，则什么也不做。—直到条件第一次变为真时，才会开始渲染条件块。
 *  相比之下，v-show就简单得多了，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
 *  一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

## 3、实践练习 ##

# 四、事件绑定 #

## 1、v-on指令 ##

`v-on指令`监听`DOM事件`，并在触发时运行一些`JavaScript代码`。通过`v-on`可以绑定Vue实例选项参数`methods`中的方法作为事件的处理代码，“`v-on`:”后参数接受所有的原生事件名称。`v-on指令`的语法如下所示：

`语法：`

>  *  Vue也提供了`v-on`的缩写形式，可以将上面语法中的内容改写为
>  *  `<button @:click=`‘事件处理方法’>按钮`< /div>`，这两句语句是等价的。

`示例：`

在两个数进行四则运算的按钮上使用v-on绑定了事件处理方法

<div id="app">
      <div class="box">
        <h1>加减运算器</h1>
        
        <p>
          <button @click="doAdd">加法</button>
          <button v-on:click="doSub(event)">减法</button>
          <button @click="alert(vm.num1*vm.num2)">乘法</button>
          <button @click="doDiv()">除法</button>
        </p>
        
      </div>
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        num1:0,
        num2:0,
        result:0
      },
      methods:{ 
        doAdd:function(e){ ...},
        doSub:function(e){ ...},
        doDiv:function(e){ ...},
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8]

## 2、事件修饰符 ##

>  *  当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为`事件冒泡`；这个事件从原始元素开始一直冒泡到`DOM树`的`最上层`。
>  *  在`JavaScript`的事件处理程序中一般调用`event.preventDefault()`方法取消事件的默认动作，以及调用`event.stopPropagation()`方法阻止事件冒泡。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 9]

>  *  在软件开发原则中，一般建议方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
>  *  为了解决这个问题，Vue为v-on提供了多个事件修饰符，而事件修饰符都是由点开头的指令后缀来表示的，并且事件修饰符可以串联使用。主要修饰符如下所示：  
>     **`.stop`：** 等同于调用event.stopPropagation()。  
>     **`.prevent`**：等同于调用event.preventDefault()。  
>     **`.capture`**：使用capture模式添加事件监听器。  
>     **`.self`**：只当事件是从监听元素本身触发时才触发回调。  
>     **`.once`**：点击事件将只会触发一次。

**事件修饰符使用方式`如下代码所示：`**

<table> 
 <thead> 
  <tr> 
   <th align="left"><strong>代码</strong></th> 
   <th align="left"><strong>作用</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>&lt;a v-on:click.stop="doThis"&gt;&lt;/ a&gt;</code></td> 
   <td align="left">阻止单击事件继续传播</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;form v-on:submit.prevent="onSubmit"&gt;&lt;/form&gt;</code></td> 
   <td align="left">阻止表单默认提交事件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;form v-on:submit.stop.prevent="onSubmit"&gt;&lt;/form&gt;</code></td> 
   <td align="left">阻止默认提交事件且阻止冒泡</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;form v-on:submit.prevent&gt;&lt;/ form&gt;</code></td> 
   <td align="left">阻止默认提交事件且阻止冒泡，并不绑定事件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;div v-on:click.self="doThat"&gt;...&lt;/div&gt;</code></td> 
   <td align="left">只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;a v-on:click.once="doThis"&gt;&lt;/a&gt;</code></td> 
   <td align="left">点击事件将只会触发一次</td> 
  </tr> 
 </tbody> 
</table>

`示例：`

使用事件修饰符来阻止事件冒泡

<div id="app">
      <div class="box" v-on:click="saySelf('div的click触发')" v-on:click.self="saySelf('div自己click触发')">
       <button v-on:click="saySelf('button的click触发')">按钮事件并事件冒泡</button>
       <button v-on:click.stop="saySelf('button的click触发,不事件冒泡')">按钮事件并事件不冒泡</button>
      </div>
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      methods: { 
        saySelf(msg) { 
          console.log(msg);
        }
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 10]

## 3、Vue事件绑定的优点 ##

>  *  一般现代的Web前端开发的理念就是将`HTML`和`JS`隔离开编写，因为Vue事件处理方法和表达式都严格绑定在当前`视图`的`ViewModel`上，所以并不会导致维护困难。
>  *  而这么写的好处在于：  
>     （1）`无需手动管理事件。`ViewModal被销毁时，所有的事件处理器都会自动被删除，让开发者从获取DOM绑定事件然后在特定情况下再解绑这样的事情中解脱出来。  
>     （2）`解耦。`ViewModel代码是纯粹的逻辑代码，和DOM无关，有利于开发者编写自动化测试用例。

## 4、实践练习 ##

# 总结： #

> Vue使用了基于HTML的`模板语法`，允许开发者通过`Vue声明式`地将`DOM`绑定至底层Vue实例的`数据`。

> 其中Vue模板语法包含`插值`、`表达式`和`指令组成`。

> 在Vue中对属性的绑定一般使用`v-bind指令`（可以缩写为`“:”`）。

> 在将`v-bind`用于`class`和`style`时，Vue进行了专门的增强功能来方便绑定`类样式`和`样式属性`，即表达式结果的类型除了`字符串`之外，还可以是`对象`或`数组`。

> Vue中提供v-if、v-show和v-else的条件渲染指令，这些条件指令可以根据表达式的值在DOM中选择渲染元素或组件。

> Vue提供了`v-on指令`用来监听`DOM事件`，通常在HTML内自己使用`v-on绑定事件`，而不像传统方式在js中获取`DOM元素`，再绑定事件处理函数。

[Link 1]: https://ymjin.blog.csdn.net/article/details/118276452
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221005/6b88f05f8df44409975f7b84e303bc08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: /images/20221005/606ff3303a784185997db935407840f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]: /images/20221005/926197823c2f49b7b23d8ca9f9670ace.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]: /images/20221005/22473d66e158408fbac4347df42cb619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]: /images/20221005/4c066e29f29548d8b9486d389cee964c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]: /images/20221005/c45e028cefef47deba61d01c555ddd21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]: /images/20221005/c2d047f929b14b0e91f085ce952d169e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]: /images/20221005/a72e648db0b94948a9f52c96fe0c7b1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8]: /images/20221005/cb7e8d2c8e104c59ada9b9749be49459.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 9]: /images/20221005/c76853b73f8b43ff9c5d2976a241ffc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 10]: /images/20221005/03b4691f566640bf8cdf67f43d41398f.png