最新版教学Vue.js渐进式JavaScript框架

男娘i 2021-08-24 11:29 371阅读 0赞

点击蓝色 “达达前端” 关注我哦!

加个 “星标” ，每天一篇文章，一起学编程

![format_png][]

2020年02月09日

**什么是vue.js？**

vue.js是一款渐进式的JavaScript框架。

**什么是渐进式？**

渐进式就是指可以由浅入深的，由简单到困难的一种方式。

**那么vue.js有什么优点？**

vue.js拥有更小的体积，压缩后的vue.js就只有33k；vue.js拥有更高的运行效率，vue.js是基于虚拟dom的，虚拟dom是一种可以预先通过JavaScript进行各种计算，把最终的dom操作计算出来并进行优化的技术。

因为这个Dom的操作属于预处理操作，并没有真实的操作Dom，所以叫做虚拟Dom。

vue.js基于虚拟Dom操作，大幅度提高了Dom的操作以及渲染效率。不仅如此，vue.js还实现了双向数据绑定。

vue.js的双向数据绑定，让开发者（程序员）不用再去操作Dom对象，可以把更多的精力投入到业务逻辑上。

对于vue.js的学习，其学习成本低，生态丰富等，目前市场上拥有大量的成熟，稳定的基于vue.js的Ui框架，常用的组件，可以拿来即用地进行快速开发。

**安装**

vue.js的安装方式有很多种，第一种：直接使用script标签的方式去引入，vue会被注册为一个全局变量。

在开发环境下不要使用压缩版本，否则会失去所有常见错误相关的警告！

因为开发版本，包含完整的警告和调试模式，而生产版本删除了警告。

**CDN**

对于学习环境，可以使用如下代码：

![format_png 1][]

对于生产环境，建议使用如下代码：

链接到一个明确的版本号和构建文件

![format_png 2][]

如果使用原生的ES Modules，如下使用一个兼容的构建文件：

![format_png 3][]

在用vue构建大型应用时推荐使用npm的安装方式，因为npm能够很好的使用webpack或Browserify模块打包器配合使用。

使用命令行：

![format_png 4][]

vue提供了一个官方的cli，为单页面应用快速搭建的脚手架。

随便点击下载一个开发版本的或者是生产版本的，下载文件如下，就一个vue.js文件。

![format_png 5][]

然后创建vueDemo，把vue.js文件复制进入。

![format_png 6][]

创建一个index.html文件，以后可以用.vue文件。

![format_png 7][]

**开始创建第一个vue.js的应用**

vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进Dom的系统。可以说vue.js的应用可以分成两个重要的组成部分，一个是视图，一个是脚本。

![format_png 8][]

![format_png 9][]

文档结构：

![format_png 10][]

![format_png 11][]

运行效果：

![format_png 12][]

**数据与方法**

每个vue应用都是通过用vue函数创建一个新的vue实例开始的：

![format_png 13][]

虽然vue没有完全遵守mvvm模型，但是vue的设计也受到了它的启发，所以我们在开发中会经常使用vm来代表一个vue的实例。

这个vm就是viewModel视图模型的缩写，当一个vue实例被创建时，它将data对象中的所有属性都加入到vue的响应式系统中。

核心：当这些属性的值发生改变时，视图将会产生“响应”，改变为新的值。

![format_png 14][]

![format_png 15][]

**生命周期**

每个vue实例在被创建时，都要经历一系列的初始化过程。比如说要设置数据的监听，编译模板，将实例挂载到Dom结构，并且在数据变化时更新Dom等等。

在这些过程中，运行的一些为生命周期的钩子函数，给我们有了添加代码的机会。

整个页面调用之前创建的生命周期，beforeCreate，创建之前，在实例初始化后，数据观测和事件配置之前被调用。

created创建之后，在实例创建完成后被调用的，实例已经完成的配置，如数据观测属性和方法的运算，事件回调，此时，挂载阶段还没有开始，$el属性目前不可见。

beforeMount挂载之前，准备挂载的阶段，在挂载开始之前被调用，相关的渲染函数首次被调用。

mounted挂载成功，el被新创建的vm.$el替换。

数据变化之前被调用的函数，beforeUpdate数据更新时调用。

updated是组件dom已经更新，组件更新完毕的情况。

activated，类型为function，是在keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。

deactivated，类型为function，是在keep-alive组件停用时调用，该钩子在服务器端渲染期间不被调用。

beforeDestroy，类型为function，是在实例销毁之前调用，该钩子在服务器端渲染期间不被调用。

destroyed，类型function，是在vue实例销毁之后，vue实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

errorCaptured是去捕获来自子组件的一个错误的时候被调用，它可以去捕获子组件的错误。

**模板语法**

vue.js使用了基于HTML额模板语法，允许开发者声明地将dom绑定到底层vue实例的数据。所有vue.js的模板都是合法的HTML，所以能够被规范的浏览器和HTML解析器所解析。

在底层的实现上，vue将模板编译成虚拟dom渲染函数，结合响应系统，vue能够计算出最少需要重新渲染多少组件，并把dom操作次数减少。vue.js这样可以提高JavaScript的效率。

数据绑定的形式是使用“mustache"语法的文本插值：

![format_png 16][]

使用v-once指令，执行一次性地插值，当改变数据时，插值里的内容不会被更新。

![format_png 17][]

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

![format_png 18][]

使用JavaScript的表达式

![format_png 19][]

**指令**

什么是指令？指令式带有v-前缀的特性，指令特性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产出的连带影响，响应地作用于Dom。

v-if，v-else，v-show，v-else-if

这些指令用于显示与隐藏各类元素：

![format_png 20][]

**v-if和v-show的区别**

v-if，在切换过程中条件内的事件监听器和子组件适当地被销毁和重建，开销高，在运行时条件很少改变时才使用这个指令。

v-show，调整的是css display属性，开销较小，在常频繁地切换中使用。

v-for的基本用法和对象遍历

![format_png 21][]

**v-text和v-html**

v-text的取值有一个缺点，当网速慢时，会在页面中显示\{ \{xx\}\}，而v-text可以解决这个bug。

v-html指令式用于输出Html代码的

![format_png 22][]

**class与style绑定**

![format_png 23][]

**绑定HTML class**

对象语法，通过v-bind:class一个对象，以动态地切换class。

![format_png 24][]

语法表示active这个class存在与否取决于isActive的值。这样你可以在对象中传入更多属性来动态切换多个class。

注意，v-bind:class指令可以与普通的class属性共存。

![format_png 25][]

![format_png 26][]

可以使用计算属性定义。

![format_png 27][]

v-bind:class使用数组语法。

![format_png 28][]

![format_png 29][]

**列表渲染**

用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的语法，其中items是源数据数组，而item是被迭代的数组元素的别名。

![format_png 30][]

使用v-on指令监听dom事件，并在触发时运行一些JavaScript代码。

![format_png 31][]

**v-pre，v-cloak，v-once**

v-pre可以在模板中跳过vue的编译，直接输出原始值。

![format_png 32][]

v-cloak可以在vue渲染完指定的整个dom后才进行显示。它和css样式一起使用的。

![format_png 33][]

v-once只显示第一次渲染的值，不再改变。

![format_png 34][]

**表单输入绑定**

可以用v-model指令在表单input，textarea，以及selects元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。

v-model在内部会根据不同的输入元素使用不同的属性并抛出不同的事件。text和textarea元素使用value属性和Input事件。checkbox和radio使用checked属性和change事件。select字段将value作为prop并将change作为事件。

![format_png 35][]

**组件基础**

全局注册

![format_png 36][]

局部注册

![format_png 37][]

组件是可复用的vue实例。因为组件是可复用的vue实例，所以他们与New Vue接收相同的选项。

![format_png 38][]

**组件注册**

组件props属性传值。

![format_png 39][]

![format_png 40][]

组件注册，在注册一个组件的时候，我们需要给它一个名字，比如在全局注册的时候我们需要按照如下代码：

![format_png 41][]

组件名的大小写，定义组件名的方式可以有两种：

使用短横线分隔命名定义一个组件

![format_png 41][]

使用首字母大写命名定义一个组件，驼峰式：

![format_png 42][]

**父子组件代码如下：**

![format_png 43][]

vue.js支持我们在模块系统中的局部注册，在这种情况下，推荐创建一个components目录，并将每个组件放置在其各自的文件中。

需要在局部注册之前导入你想使用的组件，让ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用。

![format_png 44][]

**实例事件**

$on是在构造器外部添加事件，它接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名的方法。

![format_png 45][]

$off的用法，关闭事件和$emit的用法是事件调用。

![format_png 46][]

**vue.js的单文件组件**

在很多vue.js项目中，我们使用Vue.component来定义全局组件，这种方式在很多项目中运作是没有什么问题的。

在复杂的项目中，缺点就很明显。比如说，在全局定义，强制要求每个component中的命名不得重复。字符串模板缺乏语法高亮的支持，不支持css，没有构建步骤。

所以使用文件扩展名为.vued的单文件组件解决了这些问题，并且还可以使用webpack和browserify等构建工具。

### 安装 `npm` ###

`npm` 全称为 `Node Package Manager`，是基于`Node.js`的包管理器，也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。

npm -v

### 由于网络原因 安装 `cnpm` ###

npm install -g cnpm --registry=https://registry.npm.taobao.org

### 安装 `vue-cli` ###

cnpm install -g @vue/cli

### 安装 `webpack` ###

`webpack` 是 `JavaScript` 打包器(module bundler)

cnpm install -g webpack

创建一个组件示例：

![format_png 47][]

优点：

1.  完整语法高亮
2.  CommonJS 模块
3.  组件作用域的 CSS

cli方式开发，cli是命令行，需要掌握终端，node，npm等很多知识，搭建项目环境，运行和发布项目，配置less/sass/typescript/babel等预编译器。掌握安装各种流行的组件库等。

**组件的创建**

![format_png 48][]

computed计算属性，是对原始数据进行改造输出。

![format_png 49][]

watch属性，数据变化的监听器，用于监测data中的数据变化。

![format_png 50][]

filters过滤器，常用格式化字符等作用。

![format_png 51][]

mixins用于减少代码污染，减少代码量，实现代码的重用。

![format_png 52][]

extends是用于对构造器进行扩展的。

![format_png 53][]

**☆ END ☆**

参考文档来源：vue.js官方地址

目前文章内容涉及前端知识点，囊括Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术，紧跟业界发展步伐，将 Web前端领域、网络原理等通俗易懂的呈现给小伙伴。更多内容请到达达前端网站进行学习：www.dadaqianduan.cn

**推****荐****阅****读**

***1、***[你知道多少this，new，bind，call，apply？那我告诉你][this_new_bind_call_apply]

***2、***[为什么学习JavaScript设计模式，因为它是核心][JavaScript]

**3、**[一篇文章把你带入到JavaScript中的闭包与高级函数][JavaScript 1]

**4、**[大厂HR面试ES6中的深入浅出面试题知识点][HR_ES6]

觉得本文对你有帮助？请分享给更多人

关注「达达前端」加星标，提升前端技能

**这是一个有质量，有态度的公众号**

![format_png 54][]

![format_png 55][]

[format_png]: /images/20210724/888460ef53444a2db78e83fec5e2427d.png
[format_png 1]: /images/20210724/8f9a3cf735e94aeea0cddb47e0d7ba78.png
[format_png 2]: /images/20210724/6fa5bf9af4354385bd318b8c7fdab03d.png
[format_png 3]: /images/20210724/38ae54451286403f89b2a1c700d7f2c8.png
[format_png 4]: /images/20210724/44a12fdb8e54487bb38061207106b4d0.png
[format_png 5]: /images/20210724/55344aab07684e879aae45c410204857.png
[format_png 6]: /images/20210724/16e7f14b016b4ad9a97650146bfc695d.png
[format_png 7]: /images/20210724/eff16ceace7d4b158b01a81a16d271b4.png
[format_png 8]: /images/20210724/92349d7f925a4395b55103d80a6d570e.png
[format_png 9]: /images/20210724/4a1a47d1c2e341e89640f4f9fb702383.png
[format_png 10]: /images/20210724/1f3edbe1fc434fad8e56f211bb52b329.png
[format_png 11]: /images/20210724/d63091ae66fa4415a9607a32fcce8795.png
[format_png 12]: /images/20210724/e3e32b283390457fb4371cffd4b66670.png
[format_png 13]: /images/20210724/c907ea820bbb41b8beb8f9481b001534.png
[format_png 14]: /images/20210724/1fb16bd0d91744a6b26aadf7f557b20c.png
[format_png 15]: /images/20210724/09f26f6cc84d43118a42a0e1902ed321.png
[format_png 16]: /images/20210724/977ee72f81614623a27a929d1ff1328b.png
[format_png 17]: /images/20210724/7f6313f63b0742a1bf7f7aea4b15a4ae.png
[format_png 18]: /images/20210724/672c69d8bee64d80b57cbf7f3e227534.png
[format_png 19]: /images/20210724/f0aa4209369e4795946d57f52d400c39.png
[format_png 20]: /images/20210724/5c40ab87aa054ee8b9a88049e319d0c5.png
[format_png 21]: /images/20210724/fc0043465244405fb794796427b6f50c.png
[format_png 22]: /images/20210724/02872d618db84afa829732af92ea81be.png
[format_png 23]: /images/20210724/b9b7f703994a44059176c3ac8e827d71.png
[format_png 24]: /images/20210724/eb0f966edc6f46f793bf60ad1ebe02dc.png
[format_png 25]: /images/20210724/4447452e08b849f899491158d1ed0f17.png
[format_png 26]: /images/20210724/2d3c110ba5ec4751becc91c0bd1ebe40.png
[format_png 27]: /images/20210724/4356f77253fa4b9d8cd0202b3e81dc75.png
[format_png 28]: /images/20210724/ecf083e077da4d128f869917568b493d.png
[format_png 29]: /images/20210724/e4a00e95761f45c29c7e59be0155796a.png
[format_png 30]: /images/20210724/76e5a753dd0b4c6dbf6fa6bee19bbef9.png
[format_png 31]: /images/20210724/95de2cf574a6446d85e2023d2db4bcce.png
[format_png 32]: /images/20210724/16873888ce2c4580a7670eea789c18db.png
[format_png 33]: /images/20210724/8f40a1eaba7843d79fc92b534d3cb02d.png
[format_png 34]: /images/20210724/7ddfa64eff3c4fd084eb1dc13cb28648.png
[format_png 35]: /images/20210724/790018a4967049d7b2885027904dba06.png
[format_png 36]: /images/20210724/080f1171b04442f7a2af1e327991f633.png
[format_png 37]: /images/20210724/a684adc9eec0484a9d8bdfb7181b0773.png
[format_png 38]: /images/20210724/7869bd0156544d8d8da4e8b4faf476e6.png
[format_png 39]: /images/20210724/7e13ad78e2da44269d482d45f14bb9b9.png
[format_png 40]: /images/20210724/dc1e6960ee884244ab9af6611afb3030.png
[format_png 41]: /images/20210724/c6aacf5a570a4bb387ffd215b60d63d4.png
[format_png 42]: /images/20210724/f082d5d41cf548219ee2d0b9b1bd1da6.png
[format_png 43]: /images/20210724/4b887c550048411988decbc2387ff01e.png
[format_png 44]: /images/20210724/2e2ba52673ed4d72834a9c14169dbf74.png
[format_png 45]: /images/20210724/8f196f97741a42fe99151581e24b6bc1.png
[format_png 46]: /images/20210724/56aed3d86e804005b0f38dd8f9043c1a.png
[format_png 47]: /images/20210724/a7bbe24682c04c448a30b95b499161d2.png
[format_png 48]: /images/20210724/31e4a4d081aa4cdba3c330e3d242ba29.png
[format_png 49]: /images/20210724/f2ab57898c48402aabda79de7e7b90e5.png
[format_png 50]: /images/20210724/57152ce48c5b470ca0281fde956ec27f.png
[format_png 51]: /images/20210724/7c2184c9d0a042e38afcdb29ed6f1771.png
[format_png 52]: /images/20210724/2e3fe1ddd4bf48219abc67ad8cc3f46c.png
[format_png 53]: /images/20210724/7a2427153a7d4a4c8ffa447e5cb1c91f.png
[this_new_bind_call_apply]: https://blog.csdn.net/qq_36232611/article/details/103060481
[JavaScript]: https://blog.csdn.net/qq_36232611/article/details/103026957
[JavaScript 1]: https://blog.csdn.net/qq_36232611/article/details/103083743
[HR_ES6]: https://blog.csdn.net/qq_36232611/article/details/103105748
[format_png 54]: /images/20210724/f140d47b4dcb4675a4b792a955cd6db8.png
[format_png 55]: /images/20210724/416bd2a8c8df452783dee1fc9e1c7306.png