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

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

加个 “星标” ，天天一篇文章，一块儿学编程

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

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

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

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

若是使用原生的ES Modules，以下使用一个兼容的构建文件：

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

使用命令行：

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

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

而后建立vueDemo，把vue.js文件复制进入。

建立一个index.html文件，之后能够用.vue文件。

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

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

文档结构：

运行效果：

数据与方法

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

虽然vue没有彻底遵照mvvm模型，可是vue的设计也受到了它的启发，因此咱们在开发中会常用vm来表明一个vue的实例。

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

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

生命周期

每一个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"语法的文本插值：

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

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

使用JavaScript的表达式

指令

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

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

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

v-if和v-show的区别

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

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

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

v-text和v-html

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

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

class与style绑定

绑定HTML class

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

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

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

可使用计算属性定义。

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

列表渲染

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

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

v-pre，v-cloak，v-once

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

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

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

表单输入绑定

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

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

组件基础

全局注册

局部注册

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

组件注册

组件props属性传值。

组件注册，在注册一个组件的时候，咱们须要给它一个名字，好比在全局注册的时候咱们须要按照以下代码：

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

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

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

父子组件代码以下：

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

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

实例事件

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

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

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

建立一个组件示例：

优势：

1. 完整语法高亮

2. CommonJS 模块

3. 组件做用域的 CSS

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

组件的建立

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

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

filters过滤器，经常使用格式化字符等做用。

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

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

☆ END ☆

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

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

推荐阅读

一、你知道多少this，new，bind，call，apply？那我告诉你

二、为何学习JavaScript设计模式，由于它是核心

三、一篇文章把你带入到JavaScript中的闭包与高级函数

四、大厂HR面试ES6中的深刻浅出面试题知识点

以为本文对你有帮助？请分享给更多人

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

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