02-vue基础入门②（指令、过滤器）_关于vuemvvm模式描述错误-CSDN博客

本文链接：https://blog.csdn.net/hsy0827/article/details/123355072

1. vue简介

1.1 什么是vue

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

1.2 vue 的特性

数据驱动视图
双向数据绑定

1.2.1 数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。（单向的数据绑定）
在这里插入图片描述

1.2.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。
在这里插入图片描述

1.2.3 MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel。

Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

在这里插入图片描述

1.2.4 MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的**数据源（Model）和页面的结构（View）**连接在了一起。
在这里插入图片描述

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

1.3 vue的版本

2.x 版本的 vue 是目前企业级项目开发中的主流版本
3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x 版本的 vue 几乎被淘汰，不再建议学习与使用

2. vue的基本使用

2.1 基本使用步骤

导入vue.js的script脚本文件
在页面中声明一个要被vue控制的DOM区域
创建vm实例对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">{{message}}</div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello,hsy'
            }
        });
    </script>
</body>

</html>

2.2 基本代码与MVVM的对应关系

在这里插入图片描述

3. vue的调试工具

安装 vue-devtools 调试工具见安装教程

4. vue的指令

4.1 指令的概念

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

分类：

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

4.2 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。

v-text

<body>
    <div id="app">
        <p v-text="message + username">myname</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello,',
                username: 'hsy'
            }
        });
    </script>
</body>

在这里插入图片描述

v-text会完全覆盖元素内默认的值

{{}}

vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache）

<body>
    <div id="app">
        <p v-text="message + username">myname</p>
        <p>say:{{message}}{{username}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello,',
                username: 'hsy'
            }
        });
    </script>
</body>

在这里插入图片描述

v-html

v-text指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到v-html这个指令

<body>
    <div id="app">
        <div v-html="info"></div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                info: '<h1 style="color: pink;">我是hsy</h1>'
            }
        });
    </script>
</body>

在这里插入图片描述

4.3 属性绑定指令v-bind

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

<style>
    .skyblue {
        color: skyblue;
    }
</style>

<body>
    <div id="app">
        <input type="text" v-bind:placeholder="a"><br>
        <!-- v-bind简写形式 -->
        <input type="text" :placeholder="b"><br>
        <span :style="pink">pink</span><br>
        <span :class="{skyblue:isSkyblue}">skyblue</span>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                a: "请输入姓名",
                b: "请输入年龄",
                pink: {
                    color: 'pink',
                },
                isSkyblue: true
            }
        });
    </script>
</body>

在这里插入图片描述

4.4 事件绑定指令v-on

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。

<body>
    <div id="app">
        <span>a:{{a}}</span><br>
        <span>b:{{b}}</span><br>
        <button v-on:click="count(2)">a+2</button>
        <!-- 简写形式 -->
        <button @click="b++">b+1</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                a: 0,
                b: 0,
            },
            methods: {
                count(step) {
                    this.a += step
                }
            }
        });
    </script>
</body>

在这里插入图片描述

$event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event可以解决事件参数对象 event 被其他参数覆盖的问题。

<body>
    <div id="app">
        <span>a:{{a}}</span><br>
        <span>b:{{b}}</span><br>
        <button v-on:click="count(2,$event)" style="color: black;">a+2</button>
        <!-- 简写形式 -->
        <button @click="b++">b+1</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                a: 0,
                b: 0,
            },
            methods: {
                count(step, e) {
                    this.a += step;
                    e.target.style.color === "black" ? console.log("color is black") : console.log("color is other");;
                }
            }
        });
    </script>
</body>

在这里插入图片描述

事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，
vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。

.stop 阻止冒泡
.prevent 阻止默认行为（如a连接的跳转、阻止表单的提交等）
.capture 添加事件监听器时使用事件捕获模式
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 绑定的事件只触发一次

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符

<body>
    <div id="app">
        <input type="text" @keyup.enter="enterEvent" @keyup.esc="escEvent">
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {},
            methods: {
                enterEvent(e) {
                    console.log("enter");
                    e.target.value = '';
                },
                escEvent() {
                    console.log("esc");
                }
            }
        });
    </script>
</body>

4.5 双向绑定指令v-model

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

<body>
    <div id="app">
        <p>username:{{username}}</p>
        <input type="text" v-model="username">
        <p>age:{{age}}</p>
        <input type="text" v-model="age">
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                username: '',
                age: ''
            },
            methods: {

            }
        });
    </script>
</body>

在这里插入图片描述

v-model指令的修饰符

.number 自动将用户的输入值转为数值类型
.trim 自动过滤用户输入的首尾空白字符
.lazy 在“change”时而非“input”时更新

4.6 条件渲染指令

v-if v-else-if v-else

<body>
    <div id="app">
        <div v-if="flag == 'a'">优</div>
        <div v-else-if="flag == 'b'">良</div>
        <div v-else-if="flag == 'c'">差</div>
        <div v-else>未评定</div>
        <button @click="flag='a'">优</button>
        <button @click="flag='b'">良</button>
        <button @click="flag='c'">差</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                flag: ''
            },
            methods: {

            }
        });
    </script>
</body>

在这里插入图片描述

v-show

<body>
    <div id="app">
        <div v-show="flag == 'a'">优</div>
        <div v-show="flag == 'b'">良</div>
        <div v-show="flag == 'c'">差</div>
        <div v-show="flag==''">未评定</div>
        <button @click="flag='a'">优</button>
        <button @click="flag='b'">良</button>
        <button @click="flag='c'">差</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                flag: ''
            },
            methods: {

            }
        });
    </script>
</body>

在这里插入图片描述

v-if 和 v-show 的区别

实现原理不同：

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
v-show指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；

性能消耗不同： v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好

4.7 列表渲染指令v-for

vue 提供了 v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for指令还支持一个可选的第二个参数，即当前项的索引。

<body>
    <div id="app">
        名单：
        <ul>
            <li v-for="(item,index) in items" :key="item.id">序号：{{index}}，姓名：{{item.name}}，性别：{{item.sex}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                items: [{
                    id: 1,
                    name: "张三",
                    sex: "男"
                }, {
                    id: 2,
                    name: "李四",
                    sex: "男"
                }, {
                    id: 3,
                    name: "小红",
                    sex: "女"
                }, {
                    id: 4,
                    name: "小华",
                    sex: "女"
                }]
            },
            methods: {

            }
        });
    </script>
</body>

在这里插入图片描述
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

key的注意事项：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性（即：key 的值不能重复）
建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

5. 过渡器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式
和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用。

<body>
    <div id="app">
        <input type="text" v-model="message" placeholder="请输入英文">
        <h3>{{message | capitalize | addChar('*')}}</h3>
    </div>
    <script>
        //全局过滤器
        Vue.filter('capitalize', (str) => {
            if (str != '') {
                return str.charAt(0).toUpperCase() + str.slice(1);
            } else {
                return '';
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            filters: {
                //局部过滤器
                addChar(str, star) {
                    if (str != '') {
                        return star + str + star;
                    } else {
                        return '';
                    }
                }
            },
            methods: {}
        });
    </script>
</body>