Vue基础（一）：指令概念（内容、属性、事件、双向绑定、条件、列表）_vue点击事件中的e.target.dataoptions

学了vue的指令内容，六种指令的分类概念，筛选一些关于指令的内容记录一下

目录

一、vue指令的概念

二、内容渲染指令

1、v-text （新覆旧）

2、{ { } } 语法

3、v-html指令

4、内容渲染小结

三、属性绑定指令

1、v-bind

2、v-bind 简写 :

四、事件绑定指令

1、 绑定事件语法

2、 事件处理函数

3、 优化处理函数

4、通过this访问数据

5、 绑定事件并传参

6、 v-on： 指令简写 @

7、 v-on绑定其他事件

8、事件对象 - $event

9、事件修饰符

六、双向绑定指令

1、v-model 双向绑定

2、v-model 修饰符

.number的使用

.trim的使用：去除首尾空格

.lazy的使用：取消变化过程

七、条件渲染指令

1、 两个条件渲染指令

2 、v-if的配套指令else

八、列表渲染指令

1、 v-for渲染列表指令

2、 v-for的索引参数

3、 v-for指令绑定 :key属性

---

一、vue指令的概念

指令 是vue为开发者提供的 模板语法，用于 辅助开发者渲染页面的基本结构

vue中的指令 按照不同的用途 分为 6大类

• 内容渲染指令

• 属性绑定指令

• 事件绑定指令

• 双向绑定指令

• 条件渲染指令

• 列表渲染指令

（简单列一个表格出来）

        

---

        

---

---

   事件修饰符与事件绑定指令配合使用： @事件名.修饰符 = "调用函数"

---

---

---

二、内容渲染指令

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

• v-text

• {{ }}

• v-html

1、v-text （新覆旧）

语法：

• 把 v-text 用在开始标签的属性位置

例如：

JS中的vue实例化长这样

    <script>
        const vm = new Vue({
            el: '.box',
            data: {
                username: '小周',
                gender: '男'
            }
        })
    </script>

在标签中用 v-text进行渲染

    <div class="box">
        <!-- 把username的值渲染到这个p标签中 -->
        <p v-text="username"></p>
 
        <!-- 把gender对应的值，渲染到第二个p中 -->
        <!-- 注意：第二个p标签中，默认的文本会被gender的值覆盖 -->
        <p v-text="gender">性别</p>
    </div>

但是，在第二个P中，我们常用的需求的：让JS的性别添加在原有默认值的后面，如，性别：男

但是 v-text 让文本覆盖掉了

特性： v-text 指令，会覆盖掉文本原有的内容

2、{ { } } 语法

 vue提供的 {{ }} 语法，专门用来解决掉 v-text会覆盖默认文档内容的问题，这种 双花括号的专业名称是： 插值表达式 (Mustache)

     <!-- 插值表达式：只把属性的值添加到花括号的位置，只起到占位符的作用 -->
     <p>姓名：{{username}}</p>
     <p>性别:{{gender}}</p>

• 效果
• 查找表达式{{}} :用得多，
• 

 

3、v-html指令

如果遇到，VM实例化里面有一种，带有着 标签结构、Style样式的属性值 要怎么渲染

            data: {
                info: '<h4 style:"color:pink">Hello Vue.js</h4>'
            }

此时用 v-text 和 插值表达式 去渲染这个 带有标签样式的属性，是识别不到标签的

就好像JavaScript中的innerText和innerHTML的差别

        <!-- v-text渲染 -->
        <p v-text = "info"></p>
        <!-- 插值表达式渲染 -->
        <p>{{info}}</p>

效果

 

于是，第三个内容渲染指令： v-html

作用：把包含 HTML标签的字符串渲染为页面的HTML元素

语法与 v-text相同：

写在标签的开头样式： v-html = "属性名"

     <p v-html="info"></p>

 

4、内容渲染小结

1、v-text会把渲染的值覆盖默认的值

2、{{ }} 插值表达式：不会覆盖原有内容，是内容的占位符，在占位符处渲染数据

3、v-html：可以识别到标签，渲染成HTML内容

三、属性绑定指令

先提一个示例：

    <div class="app">
        <input type="text" placeholder="xxx">
    </div>
    <script>
        const vm = new Vue({
            el: '.app',
            data: {
                tips: '请输入用户名'
            }
        })
    </script>

需求：把tips属性的值，渲染到input文本框中的placeholder属性值中

可能会想到插值，但是这样子是识别不出来的，而且会报错，提示：插值表达式只能用在内容节点，不能用在属性节点

那么，怎么样去渲染input中的placeholder属性？

内容渲染指令满足不了这个条件，就引出了 属性绑定指令

1、v-bind

如果需要为 元素的属性 动态绑定 属性值，则需要用到 v-bind 属性绑定指令。

完整写法： v-bind: 元素属性名 =' data对象属性名'

例如：

     <input type="text" v-bind:placeholder="tips">

也可以去修改图片

把src的值赋为对象名就可以，对象名里面存放图片路径即可

 <div class="app">
     <img v-bind:src="photo" alt="">
 </div>
 <script>
     const vm = new Vue({
         el: '.app',
         data: {
             photo: '图片路径'
         }
     })
 </script>

 跟JavaScript元素的 DOM对象.属性 = 值 差不多

2、v-bind 简写 :

vue规定：v-bind 可以 简写 为一个 :   就可以使用

例如：

    <input type="text" :placeholder="tips">

四、事件绑定指令

假设一个需求：把数据渲染到标签中，然后点击按钮，要让里面的数据+1

那么应该怎么做？  

分析：给button做点击事件，传统写法是获取DOM，但是vue不需要程序员去获取到DOM

    <div class="box">
        <p>count的值是 : {{count}}</p>
        <button>点击加1</button>
    </div>
    <script>
        const vm = new Vue({
            el: '.box',
            data: {
                count: 0
            }
        })
    </script>

1、 绑定事件语法

vue提供了 v-on 事件绑定 的指令，用来辅助完成DOM元素的绑定事件监听

语法：

v-on:事件名字 = "事件处理函数"

     <button v-on:click="addCount">点击加1</button>

那如何声明事件处理函数

2、 事件处理函数

前面提过，el是用来控制vue在DOM中的控制范围，现在有一个新的属性，用来声明调用的事件函数

在Vue的实例化对象中，用

methods：{

函数名：function(){ },

}

声明事件处理函数

编写测试一下

        const vm = new Vue({
            el: '.box',
            data: {
                count: 0
            },
            //methods 的作用：就是定义事件的处理函数
            methods: {
                addCount: function () {
                    console.log(111)
                }
            }
        })

触发此时点击button按钮，就可以触发到这个事件

那么，就可以满足点击按钮触发相应事件了

            methods: {
                addCount: function () {
                    //函数体
                }
            }

        实际使用中，这种写法不是很常用

        我们可以把 :function忽略掉

3、 优化处理函数

忽略掉 :function 就变成：

            methods: {
                函数名() {
                    //函数体
                }
            }

只需要记得，以后在methods中声明函数，不用写 :function就可以了

直接： 函数名 () { }

4、通过this访问数据

通过刚才那个函数，实现了通过v-oh:事件名="函数名" 触发到函数

但是里面的数据如何获取到呢？

即：如何在函数体中获取到data中的数据

因为实例化了一个Vue的对象，调用数据只需要：对象名.属性名就可以调用了

                addCount() {
                    vm.count++
                }

vm这个对象名固然可以修改实例化对象里面的数据，但并不推荐使用

更倾向于使用 this

this 即等于 vm这个实例化对象

this === vm = true

那么，可以改成

                addCount() {
                    this.count++
                }

5、 绑定事件并传参

声明形参

在声明的函数中，我们可以在小括号添加形参

比如：不指定按钮触发+1了，指定按钮触发+n

可以在函数小括号中传入一个形参n，并让数据 +=n

                addCount(n) {
                    this.count += n
                }

传递实参

哪个DOM在调用函数，只需要在函数名后面加上： 小括号，括号内传实参

        <button v-on:click="addCount(5)">点击加n</button>

那么我们发现：

绑定事件可以加小括号也可以不加

添加小括号则可以传参

不添加就是无参调用函数

6、 v-on： 指令简写 @

v-on可以简写为 @

比如：v-on:click="函数名"

可以简写为： @click = "函数名"

7、 v-on绑定其他事件

注意：原生的DOM对象有：clike、mouseenter、mouserlaver、keyup、keydown、input等原生事件

替换为vue的事件绑定形式后，分别为： v-on:click 、 v-on:mouseenter 、 @input 、 @keyup ....

8、事件对象 - $event

先提一个需求，基于刚才写出的按钮点击加值

再补充一个要求：如果当 count 是偶数的时候，背景色变为 粉色，否则取消背景颜色

分析：

1、在事件的函数内判断count是否为偶数

                addCount(n) {
                    this.count += n
                    //判断，是否为偶数
                    if (this.count % 2 === 0) {
                        //偶数
                    } else {
                        //奇数
                    }
                }

那么，怎么加背景颜色？

2、用vue中的事件对象 e.target 属性

当调用函数的时候，没有传参，就有一个事件对象e

addCount(e) {
   console.log(e);
}

那么我们可以这么添加背景颜色

                addCount(e) {
                    console.log(e);
                    this.count += 1
                    //判断，是否为偶数
                    if (this.count % 2 === 0) {
                        //偶数
                        e.target.style.backgroundColor = 'hotpink'
                    } else {
                        //奇数
                        e.target.style.backgroundColor = '' //奇数重置为空
                    }
                }

因为e.target这个属性指向的是触发的DOM元素，所以当btn按钮满足这个时候就可以变色了

上面说了，如果调用函数的时候没有传参，函数形参中有一个e，这个e就是事件对象

那么，如果在调用函数的时候传了实参呢

        <button @click="addCount(1)">点击加1</button>

这个时候的e，就不是事件对象e，而是一个参数变量e了

这样子，事件对象就会被覆盖掉！

解决这个事件对象被覆盖的问题

vue提供了一个内置的变量，名字是固定的，叫做：$event ，它就是原生DOM的事件对象

所以：

调用函数的时候这么写

        <button @click="addCount(1,$event)">点击加1</button>

然后：

在事件函数中的形参这么写：

addCount(n, e) {
       console.log(n)
       this.count += n
}

n是对应传递的参数值，而e和$event是表示事件对象

如果在绑定事件的时候：

即要传参，又要事件对象，就可以用到 $event

9、事件修饰符

假设：有一个超链接a标签，我们点击a标签，控制台打印提示：a标签被点击了

    <div class="box">
        <a href="http://www.baidu.com" @click="show">跳转到百度</a>
    </div>
    <script>
        const vm = new Vue({
            el: '.box',
            data: {},
            methods: {
                show() {
                    console.log('点击了a链接');
                }
            }
        })
    </script>

但是，当我们点击标签的时候，就会自动的跳转到a标签中href绑定的路径

可是，我们并不希望让标签跳转

可以像原生一样，使用事件对象阻止浏览器的默认行为

                show(e) {
                    e.preventDefault()
                    console.log('点击了a链接')
                }

但是，这个方法太长了，不好写

vue提供了一个简写的方式，叫做：事件修饰符

只需要在：注册事件后面.修饰符

比如：阻止默认行为

     <a href="http://www.baidu.com" @click.prevent="show">跳转到百度</a>

在事件处理函数中调用 e.preventDefault() 或者 e.stopPropagation() 是非常常见的请求。

因此，vue提供了 事件修饰符 的概念，来辅助开发者 更方便的 对事件的触发进行控制，常用五个事件修饰符如下

举例：阻止事件冒泡

    <div class="box">
        <div style="height: 100px;background-color:hotpink;" @click="div">
            <button @click="btn">按钮</button>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '.box',
            methods: {
                div() {
                    console.log('div被触发了');
                },
                btn() {
                    console.log('按钮被点击了');
                }
            }
        })
    </script>

事件冒泡概念：当一个元素的事件被触发时候，同样的事件将会在该元素的祖先元素中依次被触发。这一过程称为“事件冒泡”

如果用原生，就要在对应的函数中去阻止

            methods: {
                div(e) {
                    console.log('div被触发了');
                },
                btn(e) {
                    e.stopPropagation();
                    console.log('按钮被点击了');
                }
            }

e.stopPropagation(); 这是原生的阻止冒泡

我们使用 vue提供的阻止冒泡 .stop

                div(e) {
                    console.log('div被触发了');
                },
                btn(e) {
                    console.log('按钮被点击了');
                }

事件修饰符不需要在函数内使用事件对象来阻止默认行为

在声明事件的同时，声明阻止哪种类型的默认行为即可

<button @click.stop="btn">按钮</button>

六、双向绑定指令

1、v-model 双向绑定

vue提供了 v-model 双向数据绑定指令，用来辅助开发者在 不操作DOM 的情况下，快速的获取表单的数据

比如：有一个表单input，获取了数据

    <div class="app">
        <input type="text" v-model="username">
    </div>
    <script>
        const vm = new Vue({
            el: '.app',
            data: {
                username: '小周'
            }
        })
    </script>

此时给input表单绑定了 v-model双向绑定指令

这个时候：

修改input表单中的内容，data中username属性的值也会跟着发生改变

同样，修改username中的值，input中的value也会改变

 但是，如果是用 v-bind去绑定，是不能修改表单value的时候同步数据源变化的，它（v-bind）是单项的绑定

小结：

• v-mode指令，能和 ：

  • input 输入框

    • type = "radio"

    • type = "checkbox"

    • type = "xxx"

    • 这些都是表单元素

  • textarea 文本域

  • select 下拉框

    等配合使用

举例：v=model 配合下拉菜单的使用

1、有一个表单，还有一个数据源

    <div class="app">
        <select>
            <option value="">请选择城市</option>
            <option value="1">广西</option>
            <option value="2">广东</option>
            <option value="3">北京</option>
            <option value="4">上海</option>
        </select>
    </div>
    <script>
        const vm = new Vue({
            el: '.app',
            data: {
                city: ''
            }
        })
    </script>

把我们选中的值，同步到数据源 city中

那么，我们应该把 v-model 放到谁的身上

把 v-model 指令绑定到 select 身上

     <select v-model="city">

这样子就可以在选择城市以后，把value的值同步到数据源的city中了

 当然，我们还可以控制city的值，默认下拉框选中某个城市

         data: {
             city: '1'
         }

设置为1，广西的value为1，所以下拉框默认为广西

2、v-model 修饰符

为了方便对用户输入的内容进行处理，vue为 v-model 指令提供了 3个修饰符，分别为：

修饰符使用举例

.number的使用

举例：做一个动态的求和

    <div class="box">
        <input type="text" v-model="n1"> + <input type="text" v-model="n2"> = <span>{{ n1+n2 }}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '.box',
            data: {
                n1: 0,
                n2: 0
            }
        })
    </script>

输出两个input值的和，且两个和可以跟数据源双向绑定

效果：

因为输入的字符串，所以我们可以添加 .number 来转换为数字型

 

 <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

效果

这样子就可以加起来啦

.trim的使用：去除首尾空格

举例：在对象的data中，username是有空格的： " 小周 "

    <div class="box">
        <input type="text" v-model="username">
        <button @click="showName">获取用户名</button>
    </div>
    <script>
        //2、创建vue的实例对象
        const vm = new Vue({
            el: '.box',
            data: {
                username: '    小周     '
            },
            methods: {
                showName() {
                    console.log(`获取用户名:${this.username}`);
                }
            }
        })
    </script>

点击按钮获取到内容

 但是获取数据是不需要空格的，使用 .trim修饰符 就可以了

        <input type="text" v-model.trim="username">

 获取用户名

去除掉了开头的空格，但是中间的空格是保留的  

.lazy的使用：取消变化过程

举例：在绑定了 v-model的情况下，表单中的值和属性值是同步的

    <div class="box">
        <input type="text" v-model="username">
    </div>
    <script>
        //2、创建vue的实例对象
        const vm = new Vue({
            el: '.box',
            data: {
                username: 'zhangsan'
            }
        })
    </script>

 

但是，我们需要的是：中间变化的过程不同步传过来，而是当输入结束以后才双向传递

那么，给 v-model后添加一个 .lazy 的修饰符

        <input type="text" v-model.lazy="username">

这个时候，只有鼠标离开表单以后，它的数据才会变化

lazy可以不让中间变化的过程同步到数据源，只有最后一个结果才会同步到数据源

 

七、条件渲染指令

1、 两个条件渲染指令

条件渲染指令 是用来辅助开发者 按需操控DOM的显示与隐藏。

条件渲染指令有如下两个：分别是：

• v-if

• v-sohw

演示一下两者的用法

1、vue的实例中声明一个布尔变量，用该布尔变量去控制 v-if和v-show

        const vm = new Vue({
            el: '.box',
            data: {
                //如果flag为true，则显示被控制的元素，如果为false，则隐藏被控制的元素
                flag: true
            }
        })

 2、由v-if和v-show控制两个标签

    <div class="box">
        <p v-if="flag">这是被v-if控制的元素</p>
        <p v-show="flag">这是被v-show控制的元素</p>
    </div>

 3、效果一：当布尔值flag为true的时候，两者都可以让控制的DOM元素显示在页面上

4、效果二：当修改flag的值为flase的时候，两者控制的DOM就消失在了页面上

 

 

问题：v-if 和 v-show 的区别在哪里

答案：两者的显示效果不同!

1、当布尔变量为false的时候，查看页面结构

 

可以发现，v-if 控制的DOM被动态的给移除/创建元素

可 v-show控制的DOM元素则是用 使用display：none的style样式来隐藏显示的

2、两者相比：

• v-show的原理是：动态为元素添加或移除： dispaly:none 样式，来实现元素的显示和隐藏

  • 如果要频繁的显示隐藏元素， v-show 的性能会更好

• v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

  • 初始状态为false，甚至今后很可能都不需要展示出来，就可以用 v-if 性能会更好

• 在开发中，可以直接用 v-if，不用去考虑性能问题

2 、v-if的配套指令else

v-if可以单独使用，或者配合 v-else指令 一起使用

举例两者如何配合使用：

v-if ... v-else-if ... v-else-if ... v-if

        const vue = new Vue({
            el: '.box',
            data: {
                type: 'A'
            }
        })

type代表成绩等级，根据成绩等级的不同输出：优秀、及格等

v-if配合v-else使用

    <div class="box">
        <p v-if="type === 'A'">优秀</p>
        <p v-else-if="type === 'B'">一般</p>
        <p v-else-if="type === 'C'">及格</p>
        <p v-if="type === 'D'">差</p>
    </div>

v-else必须和e-if一起使用，否则无法识别到

八、列表渲染指令

1、 v-for渲染列表指令

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

v-for指令需要用到 item in items 形式的特殊语法；其中

• items 是 待循环的数组

• item 是 被循环的某一项

举例：

1、data对象中有一个数组对象list，作为要渲染的列表数据

            data: {
                list: [//列表数据
                    { id: 1, name: '张三' },
                    { id: 2, name: '李四' }
                ]
            }

2、把里面的每一项循环出来，每循环一次，就在页面上渲染出一个<li>标签

语法： v-for = "当前元素(item) in 循环的数组(items)"

        <ul>
            <li v-for="item in list">id是:{{item.id}},姓名是:{{item.name}}</li>
        </ul>

3、这样子就渲染出来惹

 

2、 v-for的索引参数

v-for指令还支持一个 [可选] 的 第二参数，即 当前项（元素item）的索引。

语法格式为： (item,index) in items

        <ul>
            <li v-for="(item,index) in list">当前索引是:{{index}},id是:{{item.id}},姓名是:{{item.name}}</li>
        </ul>

index索引是从0开始的

注意： v-for指令中的 item项 和 index 都是形参，可以根据需求进行重命名，如：(user,i) in 数组名

如果用不到index，直接 item in 数组名 就可以了

3、 v-for指令绑定 :key属性

官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性

而且，尽量把 id 作为 key 的值

官方对key的值类型是有要求的:必须是数字类型或者字符串类型

但是使用字符串的话，出现同值的情况，然后key重复就会被检测到，就会出现报错： Duplicate keys datected

<li v-for="(item,index) in list" :key="item.id">

小结：key值的注意事项

• key的值只能是 字符串/数字 类型

• key的值 必须具有唯一性（即：key值不可以重复）

• 建议把 数据项id属性的值 作为key的值（因为id属性具有唯一性）

• 使用 index的值 当作 key 值 没有任何意义（因为index的值不具有唯一性）

• 建议使用 v-for 指令时 一定要指定key的值（既提升性能，又防止列表状态絮乱）