Vue2.0-指令与过滤器（上）

一心想进字节的小阿涵

墨衍会员 · AI 创作全网分发码龄7年

关注

原创 2022-05-18 21:24:19 286 阅读 AI 写同款· GEO 优化 ›

Vue 2.0 学习笔记（二） Vue基础入门（1）：Vue的数据驱动视图与双向绑定特性，MVVM工作原理，Vue调试工具，Vue指令与Vue过滤器 阅读详情

Vue2.0-指令与过滤器（上）

1.什么是Vue

官方给出的概念:Vue是一套用于构建用户界面的前端框架
在这里插入图片描述

1.1如何构建用户界面

利用Vue往html页面中填充数据，非常方便

1.2框架

框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务。
要学习Vue，就是在学习Vue框架中规定的语法。
Vue的指令、组件(是对UI结构的复用)、路由、Vuex

2.Vue的特性

Vue框架的特性，主要体现在两个方面：
(1)数据驱动视图
(2)双向数据绑定

2.1数据驱动视图

在使用了Vue的页面中，Vue会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：
在这里插入图片描述

好处：当页面数据发生变化时，页面会自动重新渲染
注意：数据驱动视图时单向的数据绑定

2.2双向数据绑定

在网页中，from表单负责采集数据，Ajax负责提交数据。
在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动将用户填写的数据同步到数据源中。
在这里插入图片描述

好处：开发者不再需要手动操作DOM元素，来获取表单元素的最新值

3.MVVM

MVVM是Vue实现数据驱动视图和数据双向绑定的核心原理。MVVM指的是 Model、View 和 ViewModel，它把每个HTML页面都拆分成了这三个部分。
在这里插入图片描述

在MVVM概念中：
Model 表示当前页面渲染时所依赖的数据源
View 表示当前页面所渲染的DOM结构
ViewModel 表示Vue的实例，它是 MVVM 的核心

4.Vue的基础使用

4.1基本使用步骤

(1)导入Vue.js的script脚本文件
(2)在页面中声明一个将要被Vue所控制的DOM区域
(3)创建VM实例对象(Vue实例对象)

<body>
    <!-- 2.在页面声明一个将要被 Vue 所控制的 DOM 区域 -->
    <div id="app">{{username}}</div>
    <!-- 1.导入 Vue.js 的script 脚本文件 -->
    <script src="../Vue/vue.js"></script>
    <script>
        // 3.创建 vm 实例对象(Vue实例对象)
        const vm=new Vue({
            //3.1 el 属性是固定写法，指定当前vm实例要控制页面的哪个区域
            el:'#app',
            //3.2 data 对象要渲染到页面的数据 
            //指定 Model 数据源
            data:{
                username:'zh'
            }
        })
    </script>
</body>

上述代码与 MVVM 的对应关系
在这里插入图片描述

5.Vue的指令与过滤器

5.1Vue指令

指令是Vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
Vue中的指令按照不同的用途可以分为6大类：
(1)内容渲染指令
(2)属性绑定指令
(3)事件绑定指令
(4)双向绑定指令
(5)条件渲染指令
(6)列表渲染指令

5.2内容渲染指令

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

v-text
{{}}
v-html
v-text
用法示例:

<body>
    <div id="app">
        <p v-text="username">姓名:</p>
        <p v-text="age">年龄:</p>
        <p v-text="sex">性别:</p>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                username:'zh',
                age:'22',
                sex:'男'
            }
        })
    </script>
    <!-- 运行结果：zh 22 男 -->
</body>

v-text缺点:会覆盖元素内部原有的值

{{ }}插值表达式
Vue提供{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法叫做插值表达式。
使用{{ }}插值表达式，将对应的值渲染到元素的内容节点中
同时保留元素自身的默认值

<body>
    <div id="app">
        <p>姓名:{{username}}</p>
        <p>年龄:{{age}}</p>
        <p>性别:{{sex}}</p>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                username:'zh',
                age:'22',
                sex:'男'
            }
        })
    </script>
    <!-- 运行结果：姓名:zh 年龄:22 性别:男 -->
</body>

{{ }}插值表达式，在实际开发中用的最多，只是内容的占位符，不会覆盖原来的内容
v-html
v-text指令和插值表达式只能渲染纯文本的内容。如果要把包含HTML标签的字符串渲染为页面的HMTL元素，则需要用到v-html这个指令：

<body>
    <div id="app">
        <p>姓名:{{username}}</p>
        <p>年龄:{{age}}</p>
        <p>性别:{{sex}}</p>
        <div v-html="info"></div>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                username:'zh',
                age:'22',
                sex:'男',
                info:'<h4 style="color:red;font-weight:bold;">欢迎使用Vue</h4>'
            }
        })
    </script>
</body>

v-html指令的作用：可以把带有标签的字符串，渲染成页面的真正HTML元素

5.2.1属性绑定指令

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

<body>
    <div id="app">
        <!-- v-bind: 指令还可以简写为 : -->
        <input type="text" v-bind:placeholder="tips">
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                tips:'请输入账号'
            }
        })
    </script>
</body>

注意:插值表达式{{ }}只能用来内容节点，不能用到元素属性节点当中
因此在Vue中可以使用v-bind: 指令，来为元素的属性进行动态绑定值，也可以简写为 :

5.2.3在插值表达式和属性绑定中编写JS语句

在插值运算符中不仅仅支持插入内容节点，还支持插入JavaScript表达式的运算

<body>
    <div id="app">
        <div>1+2的结果是:{{1+2}}</div>
        <div>{{tips}}的反转结果为:{{tips.split('').reverse().join('')}}</div>
        <div :title="'box'+ index">这是一个DIV</div>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                tips:'请输入账号',
                index:3
            }
        })
    </script>
</body>

在使用v-bind属性绑定七点，如果绑定内容需要进行动态拼接，则字符串外部应该包裹单引号，例如：

<div :title"'box'+index">这是一个字符串</div>

5.3事件绑定指令

vue提供了 v-on 事件绑定指令，用来辅助操作DOM元素绑定事件监听。
v-on:也可以简写为 @
在我们的事件绑定时如果没有添加小括号将会默认有一个事件对象e，我们可以在methods里面的事件函数括号内将e传入，并可以访问事件的源target，然后通过e.target.style对一些样式进行操作。

<body>
    <div id="app">
        <p>count的值为:{{count}}</p>
        <button v-on:click="addCount">+1</button>
        <button @click="delCount">-1</button>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:"#app",
            data:{
                count:0
            },
            //methods 的作用 绑定定义事件的处理函数
            methods: {
                addCount(){
                    this.count+=1
                },
                delCount(){
                    this.count-=1
                }
            }
        })
    </script>
</body>

注意:原生DOM对象有 onclick、oninput、onkeyup等原生事件，替换为Vue的事件绑定后，格式为：v-on:click、v-on:input、v-on:keyup

5.3.1绑定事件并传入参数

<body>
    <div id="app">
        <p>count的值为:{{count}}</p>
        <!-- 2.在绑定相应处理函数后可以传入实参 -->
        <!-- 在绑定事件时可以为事件添加括号也可以不添加 添加括号就是为了传入参数 不添加则不需要传入参数 -->
        <button v-on:click="addCount(1)">+1</button>
        <button @click="delCount">-1</button>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:"#app",
            data:{
                count:0
            },
            //methods 的作用 绑定定义事件的处理函数
            methods: {
                //1.我们可以在定于 methods 之后 对里面的函数进行参数传入
                addCount(n){
                    this.count+=n
                },
                delCount(){
                    this.count-=1
                }
            }
        })
    </script>
</body>

5.3.2事件绑定- $event

vue 提供了内置变量，名字叫做 $event 他就是原生DOM的事件对象e

<body>
    <div id="app">
        <p>num的值为:{{num}}</p>
        <button @click="add(1,$event)">+1</button>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods: {
                add(n,e){
                    this.num+=n;
                    console.log(e);
                    if(this.num%2===0){
                        e.target.style.backgroundColor='red'
                    }else{
                        e.target.style.backgroundColor=''
                    }
                }
            },
        })
    </script>
</body>

5.3.3事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求，因此，vue提供了时间修饰符的概念，在帮助操作对事件的触发进行控制。常用的5个事件修饰符如下:
在这里插入图片描述

.prevent

<body>
    <div id="app">
        <a href="http://www.baidu.com" @click.prevent="show">跳转</a>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods: {
                show(e){
                    //原生阻止默认行为
                    // e.preventDefault();
                    console.log('点击了');
                }
            },
        })
    </script>
</body>

在这里插入图片描述

.stop阻止冒泡

<body>
    <div id="app">
        <a href="http://www.baidu.com" @click.prevent="show">跳转</a>
    <div style="height: 150px;background-color: orange;padding-left: 100px;line-height: 150px;" @click="divHander">
        <button @click.stop="btn">按钮</button>
    </div>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods: {
                show(e){
                    //原生阻止默认行为
                    // e.preventDefault();
                    console.log('点击了');
                },
                btn(){
                    
                    console.log('btn');
                },
                divHander(){
                    console.log('divHandler');
                }
            },
        })
    </script>
</body>

5.3.4按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。例如:
按ESC清除输入框内的内容

<body>
    <div id="app">
        <input type="text" @keyup.esc="clearInput">
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                
            },
            methods: {
                clearInput(e){
                    e.target.value=" ";
                }
            }
        })
    </script>
</body>

常见的键盘事件有 @keyup.esc 和 @keyup.enter

5.4双向绑定指令

Vue 提供了v-model双向数据绑定指令，用来辅助在不操作DOM元素的情况下，快速获取到表单数据
所谓的双向绑定就是你在输入框里对输入的信息进行更改时，Vue实例里面的data数据源所对应的数据也将发生改变，如果data里面的数据发生改变，同样的在input里面的内容也将发生改变。

<body>
    <div id="app">
        <P>{{username}}</P>
        <input type="text" v-model="username">
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                username:'zh'
            },
            methods: {
                
            }
        })
    </script>
</body>

无论我们是修改input里面的数据还是修改data数据源里面的数据，两者之间都是相互对应的，相互渲染的
在这里插入图片描述

但是，如果我们利用 v-bind 来绑定输入框的内容，当我们修改输入框内容时，数据源的数据将不会发生改变。

<body>
    <div id="app">
        <P>{{username}}</P>
        <input type="text" v-model="username">
        <input type="text" :value="username">
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                username:'zh'
            },
            methods: {
                
            }
        })
    </script>
</body>

在这里插入图片描述

因此我们可以得知，v-model 对于数据的绑定是双向的，而v-bind对数据的绑定则是单向的，只能从数据源的变化到页面内，而不能从页面的变化到数据源。

5.4.1v-model指令的修饰符

为了方便用户输入的内容进行处理，vue为v-model指令提供了3个修饰符。
在这里插入图片描述

.number
我们正常情况下的数据，在输入框内输入新的数值后将会变成字符串的拼接，因此为了保证能够正常的运算，我们可以在v-model后面加上.number来将输入的字符串转换成数值

<body>
    <div id="app">
        <input type="text" v-model.number="num1">+<input type="text" v-model.number="num2">=<span>{{num1+num2}}</span>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                num1:1,
                num2:2
            },
            methods: {
                
            }
        })
    </script>
</body>

.trim
当我们在输入框内输入值的两端有空格时，可以利用.trim来清除空格，如果空格出现在内容中间则无法清除

<body>
    <div id="app">
        <input type="text" v-model.trim="username">
        <button @click="add">点击获取</button>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                username:'zh',
                num1:1,
                num2:2
            },
            methods: {
                add(){
                    console.log(`"${this.username}"`);
                }
            }
        })
    </script>
</body>

5.5条件渲染指令

条件渲染指令用来协助开发者按需控制DOM的显示与隐藏。条件渲染指令分别为:v-if、v-show
v-show
v-show的原理是:动态为元素添加或移除display:none样式，来实现元素的显示和隐藏
如果频繁的切换元素的显示状态，用v-show性能会更好
v-if
v-if的原理是:每次动态的创建或移动元素，从而使得元素显示或者隐藏
如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素也可能不会被展示出来，则v-if性能会更好一些

<body>
    <div id="app">
        <p v-if="flag">这是v-if</p>
        <p v-show="flag">这是v-show</p>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                flag:true,
            },
            methods: {

            }
        })
    </script>
</body>

当我们在控制台将flag的值改为false时，两个p标签的内容都将隐藏
在这里插入图片描述

在这里插入图片描述

v-else
v-if可以单独使用，或者配合v-else指令一起使用
注意:v-else指令必须配合v-if指令一起使用，否则它将不会被识别
v-else-if
v-else-if指令，顾名思义，充当v-if的"else-if块"，可以连续使用

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">一般</div>
<div v-else="type === 'C'">差劲</div>

**注意:**v-else-if指令必须配合v-if指令一起使用，否则它将不会被识别

5.6列表渲染指令

vue提供了v-for列表渲染指令，用来帮助基于一个数组来循环渲染一个列表结构。v-for指令需要使用 item in items 形成的特殊语法，其中：
items 是待循环的数组
item 是被循环的每一项

<body>
    <div id="app">
        <table>
            <thead>
                <td>索引</td>
                <td>ID</td>
                <td>姓名</td>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>0</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'zh'},
                    {id:2,name:'zh1'},
                    {id:3,name:'zh2'}
                ]
            },
            methods: {

            }
        })
    </script>
</body>

在这里插入图片描述

v-for指令还支持一个可选的第二个参数，即当前项的索引，语法格式为 (item,index) in items

<body>
    <div id="app">
        <table>
            <thead>
                <td>索引</td>
                <td>ID</td>
                <td>姓名</td>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'zh'},
                    {id:2,name:'zh1'},
                    {id:3,name:'zh2'}
                ]
            },
            methods: {

            }
        })
    </script>
</body>

在这里插入图片描述

注意:v-for指令中的item项和index索引都是形参，可以根据需要进行重命名。例如(user,i) in userlist

5.6.1v-for指令中的key属性

官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性
而且尽量把 id 作为 key 的值
官方对 key 的值类型是有要求的，规定只能是字符串或者数字类型
key的注意事项：
1.key的之只能是字符串或数字类型
2.key的值必须具有唯一性(key不能重复)
3.建议把数据项id属性的值作为key的值(因为id属性的值具有唯一性)
4.使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)
5.建议使用v-for指令时一定要指定key的值