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-htmlv-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-oncev-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等构建工具。安装 npmnpm 全称为 Node Package Manager，是基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。npm -v由于网络原因 安装 cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org安装 vue-clicnpm install -g @vue/cli安装 webpackwebpack 是 JavaScript 打包器(module bundler)cnpm install -g webpack创建一个组件示例：​ 优点：完整语法高亮CommonJS 模块组件作用域的 CSScli方式开发，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？那我告诉你2、为什么学习JavaScript设计模式，因为它是核心3、一篇文章把你带入到JavaScript中的闭包与高级函数4、大厂HR面试ES6中的深入浅出面试题知识点觉得本文对你有帮助？请分享给更多人关注「达达前端」加星标，提升前端技能这是一个有质量，有态度的公众号 ​ ​

本文章由javascript技术分享原创和收集