点击蓝色“达达前端”关注我！加个“星”，每天一篇，一起学编程2020-02-09什么是vue.js？Vue.js是一个渐进式JavaScript框架。什么是进步？循序渐进是指可以由浅入深、由简入难的方法。那么vue.js有什么优势呢？vue.js体积更小，压缩后的vue.js只有33k；vue.js运行效率更高，vue.js是基于virtualdom，virtualdom是一种预先配置好的JavaScriptCalculation，计算和优化最终dom操作的技术。因为这个Dom的操作是预处理操作，没有真正的Dom操作，所以称为虚拟Dom。Vue.js基于虚拟Dom操作，大大提高了Dom的操作和渲染效率。不仅如此，vue.js还实现了双向数据绑定。vue.js的双向数据绑定让开发者（程序员）可以将更多的精力投入到业务逻辑中，而不必去操作Dom对象。对于vue.js的学习，它的学习成本低，生态丰富等。目前市面上有大量基于vue.js的成熟稳定的Ui框架，常用的组件可以是用于快速开发。安装vue.js的方法有很多种。第一种方式是直接使用script标签导入，vue会注册为全局变量。不要在开发环境中使用缩小版本，否则您将丢失所有与常见错误相关的警告！因为开发版包含完整的警告和调试模式，而生产版则去除了警告。CDN对于学习环境，可以使用如下代码：对于生产环境，推荐使用如下代码：linktoaclearversionnumberandbuildfile如果使用原生ESModules，使用兼容的构建文件如下：使用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的设计也受到了mvvm的影响它的启发，所以我们在开发中经常使用vm来表示一个vue实例。这个vm是viewModel视图模型的缩写。当一个vue实例被创建时，它会将数据对象中的所有属性添加到vue响应式系统中。核心：当这些属性的值改变时，视图会“响应”并改变为新的值。生命周期每个vue实例在创建时都会经历一系列的初始化过程。比如设置数据监听，编译模板，挂载实例到Dom结构，数据变化时更新Dom等。在这些过程中，运行了一些生命周期钩子函数，给我们添加代码的机会。整个页面调用之前创建的生命周期，beforeCreate，在创建前、实例初始化后、数据观察和事件配置前调用。created在实例创建完成后调用，完成了实例的配置，比如数据观察属性和方法的操作，事件回调等。这个时候挂载阶段还没有开始，$el属性目前是不可见的。beforeMount是挂载前准备挂载的阶段。在挂载开始前调用，第一次调用相关渲染函数。mounted挂载成功，el被替换为新创建的vm.$el。数据变化前调用的函数，beforeUpdate在数据更新时调用。updated是组件dom已经更新，组件已经更新的情况。activated，类型为function，在keep-alive组件激活时调用，服务端渲染时不调用该hook。deactivated，类型为function，在keep-alive组件去激活时调用。服务器端渲染期间不会调用此挂钩。beforeDestroy，类型为function，在实例销毁之前调用，服务端渲染时不调用该hook。destroyed，类型函数，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指令：ExpressionsusingJavaScriptWhatisadirective?指令以v-前缀为特征。指令属性的值应该是单个JavaScript表达式。该指令的职责是在表达式的值发生变化时响应地对Dom进行操作。v-if,v-else,v-show,v-else-if这些指令用于显示和隐藏各种元素：v-if和v-show的区别switchingprocess监听器和子组件被适当地销毁和重新创建，高开销，当运行时条件很少改变时使用这个指令。v-show，调整css显示属性，开销小，用于频繁切换。v-for和对象遍历的基本用法v-text和v-htmlv-text的值有一个缺点。当网速慢时，页面会显示{{xx}}，v-text可以解决这个bug。v-html指令用于输出Html代码class和stylebinding绑定HTML类对象语法，通过v-bind:class对象来动态切换类。语法表示active类是否存在取决于isActive的值。这样就可以在对象中传入更多的属性，实现多个类之间的动态切换。请注意，v-bind:class指令可以与普通类属性共存。可以使用计算属性来定义。v-bind:class使用数组语法。列表渲染使用v-for命令，基于数组渲染列表。v-for命令需要使用iteminitems语法，其中items是源数据数组，item是被迭代的数组元素的别名。使用v-on指令来监听dom事件并在触发时运行一些JavaScript代码。v-pre、v-cloak、v-oncev-pre可以跳过vue在模板中的编译，直接输出原始值。v-cloak可以在vue渲染完指定的整个dom后显示。它与css样式一起使用。v-once只显示第一次渲染的值，不会改变。表单输入绑定可以使用v-model指令在表单输入、textarea、selects元素上创建双向数据绑定，会根据控件类型自动选择正确的方法更新元素。在内部，v-model使用不同的属性并为不同的输入元素抛出不同的事件。text和textarea元素使用value属性和Input事件。复选框和单选框使用选中的属性和更改事件。select字段将value作为prop，将change作为event。组件基本全局注册部分注册组件是可重用的Vue实例。因为组件是可重用的vue实例，所以它们接收与NewVue相同的选项。组件注册组件props属性传值。组件注册，在注册一个组件的时候，我们需要给它起一个名字，比如全局注册的时候，我们需要按照下面的代码：组件名的情况下，有两种方式来定义组件name：使用横线分隔的短名称定义一个组件定义一个组件，名称首字母大写，驼峰式：父子组件代码如下：vue.js支持我们在模块系统中进行本地注册。在这种情况下，建议创建一个组件目录并将每个组件放在它自己的文件中。部分注册前需要导入自己要使用的组件，这样ComponentA和ComponentC都可以在ComponentB的模板中使用。实例事件$on是在构造函数外添加一个事件，它接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法。$off的用法，关闭事件和$emit的用法都是事件调用。vue.js的单文件组件在很多vue.js项目中，我们使用Vue.component来定义全局组件。这种方式适用于许多项目，没有任何问题。在复杂的项目中，缺点是显而易见的。例如，在全局定义中，强制每个组件中的名称不得重复。字符串模板缺少语法高亮支持，不支持css，没有构建步骤。因此，使用带有.vued文件扩展名的单文件组件可以解决这些问题，还可以让您使用webpack和browserify等构建工具。安装npmnpm全称为NodePackageManager，它是一个基于Node.js的包管理器，也是整个Node.js社区中最受欢迎的包管理器，支持最多的第三方模块。npm-vinstallcnpm由于网络原因npminstall-gcnpm--registry=https://registry.npm.taobao.orginstallvue-clicnpminstall-g@vue/cliinstallwebpackwebpack是一个JavaScript打包器（模块bundler)cnpminstall-gwebpack创建组件示例：优点：CSScli开发语法完整突出CommonJS模块组件作用域，cli是命令行，需要掌握终端、node、npm等大量知识才能搭建项目环境，运行发布项目，配置less/sass/typescript/babel等预编译器。掌握各种流行组件库的安装等。组件创建Computed计算属性是原始数据的转换输出。watch属性，数据变化监听器，用于监听数据中的数据变化。filters过滤器，常用的格式化字符等。Mixins用于减少代码污染，减少代码量，实现代码复用。extends用于扩展构造函数。☆END☆参考文档来源：vue.js官方地址目前文章内容涉及前端知识点，包括Vue、JavaScript、数据结构与算法、实战练习、Node全栈前端技术。、网络原理等通俗易懂的介绍给朋友。更多信息请到达达前端网站学习：www.dadaqianduan.cn推荐阅读1.你对这个了解多少，new，bind，call，apply？那我告诉你2.为什么要学JavaScript设计模式，因为它是核心3.一篇文章带你走进JavaScript中的闭包和高级函数4.大厂HR面试ES6深度面试题的知识点感受那这篇文章对你有帮助吗？请分享给更多人关注“达达前端”，加star提升前端技能。这是一种品质和态度公众号
