Vue.js常用指令及事件修饰符介绍（二）

偏执的太偏执、 2022-12-20 02:14 114阅读 0赞

### Vue指令及是事件修饰符 ###

*  Vue常用指令
 *   *  其他基础指令
     *  v-model
     *   *  利用v-model制作简易计算器
     *  利用指令添加CSS样式
     *  v-for
     *   *  注意事项
     *  v-if 与 v-show
     *   *  两者之间的区别
 *  事件修饰符
 *   *  .stop 防止事件冒泡
     *  .prevent 阻止默认行为
     *  .capture 捕获事件
     *  .self
     *  .once
 *  框架和库的区别

# Vue常用指令 #

## 其他基础指令 ##

[Vue.js基础介绍及部分指令][Vue.js]

## v-model ##

用法：在**表单控件**或者**组件**上创建双向绑定。

**v-model和v-bind之间的区别：**  
两者都可以绑定数据，但是`v-bind`指令只能是实现数据的单向绑定，即从M层自动绑定到V层，无法实现双向绑定，`v-model`指令可实现表单元素和M层中数据的双向绑定。

<div id="app">
    
        <input type="text" name="" v-model='msg' id="">
        <p>{
       {msg}}</p>
    
    </div>
    <script> var vm=new Vue({ el:'#app', data:{ msg:'爱吃烧烤、炸鸡、小龙虾' }, methods: { }, }) </script>

原始效果是这样：  
![在这里插入图片描述][20201109173424491.png_pic_center]

当我们点击input框进行修改里面的数据时，发现只有在修改v-model指令绑定的数据框时，p标签中的\{ \{msg\}\}才会跟着改变

![在这里插入图片描述][20201109173440610.png_pic_center]

### 利用v-model制作简易计算器 ###

根据v-model指令双向绑定数据的特性，实现计算器简单加减乘除的功能

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <script src="lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" name="" v-model='n1' id="">
            <select v-model='opt'>
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" name="" v-model='n2' id="">
            <input type="button" value="=" @click='calc'>
    
            <input type="text" name="" v-model='result' id="">
        </div>
        <script> // 创建vue实例 得到ViewModel new Vue({ el:'#app', data:{ //初始值为0 符号为+ n1:0, n2:0, opt:'+', result:0 }, methods: { //计算的方法 calc(){ switch (this.opt) { case '+': this.result=parseInt(this.n1)+parseInt(this.n2) break; case '-': this.result=parseInt(this.n1)-parseInt(this.n2); break; case '*': this.result=parseInt(this.n1)*parseInt(this.n2); break; case '/': this.result=parseInt(this.n1)/parseInt(this.n2); break; default: break; } } }, }) </script>
    </body>
    </html>

## 利用指令添加CSS样式 ##

第一种方法：**直接传递一个数组**(数组中存放类名)

> 需要注意的是，此时的class类需要v-bind指令绑定

![在这里插入图片描述][20201109174908727.png_pic_center]

第二种方法：在数组中使用三元表达式

![在这里插入图片描述][20201109174932969.png_pic_center]  
第三种方法：数组中使用对象代替三元表达式，可提高代码可读性

第四种方法：使用v-bind绑定一个对象

![在这里插入图片描述][20201109175327856.png_pic_center]  
第五种方法：直接绑定style标签，同样以数组方式传递，数组中为类名

<div id="app">
        <h1>这是一个h1标签</h1>
        <h1 :style="styleObj1">这是一个h1标签</h1>
        <h1 :style="[styleObj1,styleObj2]">这是一个h1标签</h1>
    </div>
    <script> new Vue({ el:'#app', data:{ styleObj1:{ color:'red', 'font-weight':200 }, styleObj2:{ 'font-style':'italic' } } }) </script>

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

## v-for ##

用法：基于源数据多次渲染元素或模板块。  
此指令之值，必须使用特定语法 `alias in expression`，为当前遍历的元素提供别名：

<div id="app">
        <p v-for='(val,key,i) in user'>
            值:{
       {val}}
            键:{
       {key}}
            索引:{
       {i}}
        </p>
    </div>
    <script> new Vue({ el:'#app', data:{ user:{ id:1, name:'托尼老师', gender:'男' } } }) </script>

效果：

![在这里插入图片描述][20201109180411985.png_pic_center]

*  alias中有三个参数时，分别代表值、键、索引
 *  alias中有两个参数时，分别代表值、索引
 *  alias中有一个参数时，会输出所有数据

in后面可以放普通的数组、对象数组、对象、也可以放数字

<div id="app">
        <p v-for='count in 10'>
            {
       {count}}
        </p>
    </div>
    <script> new Vue({ el:'#app', data:{ } }) </script>

![在这里插入图片描述][20201109181327934.png_pic_center]

### 注意事项 ###

如果使用`v-for` 有问题 在使用v-for的同时,指定唯一的字符串或者数字类型:`key值`

*  key在使用的时候 必须使用`v-bind`指令绑定的形式 指定key的值
 *  v-for循环的时候, key属性只能使用 Number或者String类型

## v-if 与 v-show ##

`v-if`用法：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 `template`，将提出它的内容作为条件块。  
`v-show`用法：根据表达式之真假值，切换元素的 display CSS property。

<div id="app">
        <input type="button" value="toggle" @click='flag=!flag'>
    
    
        <h3 v-if='flag'>这是用v-if控制的元素</h3>
        <h3 v-show='flag'>这是用v-show控制的元素</h3>
        
    </div>
    <script> new Vue({ el:'#app', data:{ flag:false }, }) </script>

当我们点击toggle按钮时，显示元素  
![在这里插入图片描述][20201109184822177.png_pic_center]  
再次点击时，隐藏该元素  
![在这里插入图片描述][20201109184919882.png_pic_center]

### 两者之间的区别 ###

1.  **v-if的特点**：每次都会重新删除或者创建元素  
    **v-show的特点** ：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 `display:none`的样式
2.  v-if 有较高的切换性能消耗 v-show有较高的初始渲染消耗
3.  如果元素涉及到频繁的切换,最好不要使用v-if,而是推荐v-show  
    如果元素可能永远也不会被显示出来 被用户看到,则推荐 v-if

# 事件修饰符 #

*  .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
 *  .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
 *  .capture：与事件冒泡的方向相反，事件捕获由外到内
 *  .self：只会触发自己范围内的事件，不包含子元素
 *  .once：只会触发一次

## .stop 防止事件冒泡 ##

冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外(子节点---->父节点)的点击事件

<div id="app">
        <div class="inner" @click='divHandler'>
            <input type="button" value="戳他" @click.stop='btnHandler'>
        </div>
    
    </div>
    <script> // 创建vue实例 var vm= new Vue({ el:'#app', data:{ }, methods: { divHandler(){ console.log('点击了父元素div'); }, btnHandler(){ console.log('点击了子元素input'); }, }, }) </script>

未添加`.stop`事件修饰符时，点击按钮  
![在这里插入图片描述][20201109191846525.png_pic_center]  
添加`.stop`事件修饰符时，点击按钮  
![在这里插入图片描述][20201109191919432.png_pic_center]

## .prevent 阻止默认行为 ##

点击超链接`a标签`会直接跳转至其他页面，但是添加.prenvent事件修饰符之后，会阻止它跳转

<div id="app">
        <div class="inner" @click='divHandler'>
            <input type="button" value="戳他" @click.stop='btnHandler'>
            
            <a href="http://www.baidu.com" @click.prevent.stop='linkClick'>有问题,找百度</a>
        </div>
    
    </div>
    <script> // 创建vue实例 var vm= new Vue({ el:'#app', data:{ }, methods: { divHandler(){ console.log('点击了父元素div'); }, btnHandler(){ console.log('点击了子元素input'); }, linkClick(){ console.log('点击了超链接a'); } }, }) </script>

![在这里插入图片描述][20201109192149588.png_pic_center]

## .capture 捕获事件 ##

捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内(父节点---->子节点)的点击事件

<div id="app">
        <div class="inner" @click.capture='divHandler'>
            <input type="button" value="戳他" @click='btnHandler'>
        </div>
    
    </div>
    <script> // 创建vue实例 var vm= new Vue({ el:'#app', data:{ }, methods: { divHandler(){ console.log('点击了父元素div'); }, btnHandler(){ console.log('点击了子元素input'); }, }, }) </script>

![在这里插入图片描述][20201109192656950.png_pic_center]

## .self ##

只会阻止自己身上冒泡行为的触发, 并不会正真的阻止冒泡行为，即只会触发自己范围内的事件，不会包含子元素。

![在这里插入图片描述][20201109193738722.png_pic_center]

## .once ##

如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。比如点击a标签，只会跳转一次，再次点击不会执行事件。

<div id="app">
        
        <a href="http://www.baidu.com" @click.prevent.once='linkClick'>有问题,找百度</a>
    </div>
    <script> // 创建vue实例 var vm= new Vue({ el:'#app', data:{ }, methods: { linkClick(){ console.log('点击了超链接a'); } }, }) </script>

# 框架和库的区别 #

框架是一套完整的解决方案,对项目的入侵性比较大,项目如果需要更换框架,则需要重新架构整个项目  
比如nodeJS 中的 Express 、koa2

库(插件): 提供某一个小的功能,对项目的入侵性比较小,如果某个库无法完成需求,可以很容易的切换其他的库  
query===>Zepto  
EJS 切换到 art-template

[Vue.js]: https://blog.csdn.net/PILIpilipala/article/details/109519826
[20201109173424491.png_pic_center]: /images/20221120/d1d9144d54fd480daad33190f2f3fdf1.png
[20201109173440610.png_pic_center]: /images/20221120/9dbeb93d3c8348c1b0632bfa78e5f33a.png
[20201109174908727.png_pic_center]: https://img-blog.csdnimg.cn/20201109174908727.png#pic_center
[20201109174932969.png_pic_center]: https://img-blog.csdnimg.cn/20201109174932969.png#pic_center
[20201109175327856.png_pic_center]: https://img-blog.csdnimg.cn/20201109175327856.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201109175543485.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[20201109180411985.png_pic_center]: https://img-blog.csdnimg.cn/20201109180411985.png#pic_center
[20201109181327934.png_pic_center]: https://img-blog.csdnimg.cn/20201109181327934.png#pic_center
[20201109184822177.png_pic_center]: https://img-blog.csdnimg.cn/20201109184822177.png#pic_center
[20201109184919882.png_pic_center]: https://img-blog.csdnimg.cn/20201109184919882.png#pic_center
[20201109191846525.png_pic_center]: https://img-blog.csdnimg.cn/20201109191846525.png#pic_center
[20201109191919432.png_pic_center]: https://img-blog.csdnimg.cn/20201109191919432.png#pic_center
[20201109192149588.png_pic_center]: https://img-blog.csdnimg.cn/20201109192149588.png#pic_center
[20201109192656950.png_pic_center]: https://img-blog.csdnimg.cn/20201109192656950.png#pic_center
[20201109193738722.png_pic_center]: https://img-blog.csdnimg.cn/20201109193738722.png#pic_center