vue入门教程（二）

谢迅

已于 2022-06-15 14:05:28 修改

阅读量216

点赞数

分类专栏：前端 http HTML5 文章标签： vue.js 前端 javascript

于 2022-06-14 12:37:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_54054566/article/details/125275531

版权

前端同时被 3 个专栏收录

37 篇文章

订阅专栏

HTML5

18 篇文章

订阅专栏

http

4 篇文章

订阅专栏

一、什么是 vue

是一套用于构建用户界面的前端框架。

前端开发者最主要的工作，就是为网站的使用者（又称为：网站的用户）构建出美观、舒适、好用的网页。

二、vue 的特性

vue 框架的特性，主要体现在如下两方面：

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

数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。

好处：当页面数据发生变化时，页面会自动重新渲染！

注意：数据驱动视图是单向的数据绑定。

双向数据绑定（form表单提交数据，Ajax请求数据）

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

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

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个 HTML 页面都拆分三个部分：

View 表示当前页面所渲染的 DOM 结构。

Model 表示当前页面渲染时所依赖的数据源。

ViewModel 表示 vue 的实例，它是 MVVM 的核心。

MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

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

三、 vue 的基本使用

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

下载和引入vue.js文件。
编写入门程序。
视图：负责页面渲染，主要由HTML+CSS构成。

脚本：负责业务数据模型（Model）以及数据的处理逻辑。

<body>
    <!- 视图 -->
    <div id="div">
        {{msg}}
    </div>
</body>

<script src="js/vue.js"></script>
<script>
    / 脚本
    new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });
</script>

el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。

vue 的调试工具

vue扩展，.使用vue-devtools调试vue页面在浏览器中访问一个使用了vue的页面，打开浏览器的开发者-Webpack文档类资源-优快云下载

四、vue 的指令与过滤器

1. 指令的概念

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

vue 中的指令按照不同的用途可以分为如下 6 大类：

① 内容渲染指令

v-text 指令会覆盖元素内默认的值。
{ {}}
vue 提供的 {{ }} 语法， {{ }} 语法的专业名称是插值表达式。相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。
v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令：

② 属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令
由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）

③ 事件绑定指令

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。
注意：原生 DOM 对象有 onclick 、 oninput 、 onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为： v-on:click 、 v-on:input 、 v-on:keyup
通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

由于 v-on 指令在开发中使用频率非常高，简写形式（简写为英文的 @ ）。

事件参数对象

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件参数对象 event

绑定事件并传参

在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参

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

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此， vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：
在监听键盘事件时，我们经常需要判断详细的按键。为键盘相关的事件添加按键修饰符

④ 双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。
为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

⑤ 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

⚫ v-if
⚫ v-show
v-if 和 v-show 的区别
实现原理不同：
⚫ v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
⚫ v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；
性能消耗不同：

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

⚫ 如果需要非常频繁地切换，则使用 v-show 较好

⚫ 如果在运行时条件很少改变，则使用 v-if 较好