最新版教学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创建一个组件示例：
优点：
-
完整语法高亮
-
CommonJS 模块
-
组件作用域的 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
推荐阅读
1、你知道多少this，new，bind，call，apply？那我告诉你
3、一篇文章把你带入到JavaScript中的闭包与高级函数
觉得本文对你有帮助？请分享给更多人
关注「达达前端」加星标，提升前端技能
这是一个有质量，有态度的公众号
