Vue.js学习笔记（第一天） vue简介 vue入门 vue模板

vue简介

vue目前的地位：相较于另一款前端框架 React 和更早的前端框架 Angular，vue 属于后起之秀，但是具有非常完善的生态，成为了前端开发工程师的必备技能。

vue的官方定义：一套用于构建用户界面的渐进式JavaScript框架。

• 如何理解构建用户界面：将已经掌握的数据通过某种可视化的方式呈现给用户。
• 如何理解渐进式：vue 可以自底向上逐层应用。对于简单应用，只需要引用一个轻量小巧（压缩之后只有100多Kb）的核心库即可；对于复杂应用，可以引入各式各样的插件。

vue的发展历程：

• 2013年，受到Angular框架的启发，Google的员工尤雨溪开发出了一款轻量级框架Seed，同年将其更名为vue，版本号为0.6.0。
• 2014年，vue正式对外发布，版本号为0.8.0，PHP领域的大牛Taylor otwell在推特上说自己正在学习vue.js，使得vue开始变得知名。
• 2015年，vue正式发布版本1.0.0，代号新世纪福音战士。
• 2016年，vue正式发布版本2.0.0，代号攻壳机动队。
• 2020年，vue正式发布版本3.0.0，代号海贼王。

vue的学习者为什么被建议同时学习vue2和vue3：vue2 是一个经典的版本，目前公司的实际开发过程中用vue2的仍然有很多；但是，vue3 一定是未来的趋势，因此也值得学习。

vue的特点：

• 组件化模式：
  • 基本概念：组件化是指对于网页中的每一部分，vue都将其视为一个组件，使用一个后缀名为 .vue 的文件表示，而该文件中包含该部分的HTML代码、CSS代码和JavaScript代码。
  • 使用优点：修改一个组件并不会影响网页中的其他组件，让代码更好维护；并且组件可以被复用，提高了代码的复用率。
• 声明式编码：
  • 基本概念： 和命令式编码相对应。声明式编码是指只需要指定实现的结果，而不需要详细制订中间的过程；而命令时编码需要详细指定中间的过程。
  • 使用优点：声明式编码方式让编码人员无需直接操作DOM，提高了开发效率。
• 虚拟DOM和Diff算法：
  • 基本概念：在vue中进行界面更新时，vue会创建一个新的虚拟DOM来表示新的页面的状态，而不是直接操作实际的DOM。Diff算法会找出界面更新前后两个虚拟DOM之间的差异，判定最少需要改变的地方，然后才去实际更新DOM。
  • 使用优点：避免了直接操作实际DOM的耗时的过程，因为如果实际操作DOM每次改变都会引起浏览器的重新渲染，而虚拟DOM和Diff算法可以减少浏览器的渲染次数，提高性能。

vue中的一些重要概念：

• vue-cli：专门用于工程化开发。
• vue-router：用于在vue中实现前端路由。
• vuex：用于保存复杂应用中的数据。
• element-ui：一个美观的UI组件库。

vue的官网：cn.vuejs.org。官网中包含：官方教程、API（相当于用于查阅的字典）、风格指南、示例、Cookbook（一些编码技巧）、生态系统、Awesome vue（一些推荐的第三方库）。在官网上也可以下载vue的源代码文件。

CDN的概念：在JavaScript中，在导入外部的js脚本时，需要在HTML的 <script> 标签中指定 src 属性。如果这个属性的值被设置为本地的一个路径，则表示导入本地的js文件；另外，这个属性的值也可以设置为一个http开头或https开头的URL，表示网络上的js文件。而CDN就是用于加速网络js文件的导入的。另外，CDN也会减轻服务器的负担。

vue的两种版本：vue有开发版本和生产版本两个版本，其中开发版本（vue.js）包含完整的警告和调试模式，但是体积较大；生产版本（vue.min.js）删除了警告并且进行了压缩，使得其体积较小。

vue开发者工具：可以在浏览器中安装vue开发者工具插件（支持Chrome浏览器、Firefox浏览器等）。

如何关闭vue在启动时生成的生产提示：可以编写JS代码实现，代码为：Vue.config.productionTip = false

vue入门

如何使用Vue：想要使用vue，就必须创建一个 Vue 实例，并传入一个配置对象，就像下面这样：

new Vue(配置对象)

注意事项：创建 Vue 实例时不需要使用变量进行承接。

配置对象的内容设置：对象有下面的属性可以设置：

• el：通常为一个CSS元素选择器的字符串，用于指定 Vue 对象关联的容器（例如一个div）。这个被关联的容器中的代码被称为Vue模板。
  • vue实例绑定元素的另一种方法：可以先创建一个vue实例，然后通过vue实例的 $mount 方法来绑定元素，该方法中传入的参数是需要的CSS选择器。一般情况下，这种方法和直接使用 el 属性可以互换。
• data：一个对象，表示需要写入容器中的数据，例如 {name: hanmo}；相应的，在容器中需要使用该数据值的地方，使用两对大括号进行表示，对于本例则为 {{name}}。另外，Vue模板的双大括号中还可以写入JavaScript表达式。
  • vue实例绑定数据的另一种方法：使用函数式进行绑定。将 data 设置为一个函数，该函数返回一个对象，表示data对象的值。虽然这种方法更加麻烦，但是在之后学习到组件时，data 必须使用函数式，否则会发生报错。

Vue实例和容器之间的对应关系：两者之间是一一对应的关系，一个实例只能用于构建一个实例；一个实例只能有一个 Vue 实例对应。但是，一个 Vue 实例可以被拆分为多个组件。

vue模板

vue模板语法：vue模板的语法主要分为插值和指令两种。

• 插值语法：这种语法用于将变量的值嵌入到模板中。例如，如果在Vue实例的 data 属性中定义了 **name**变量并赋值为 jack，那么在vue模板中可以通过 {{ name }} 来显示这个值。
• 指令语法：当需要动态地给标签的属性赋值时，可以使用指令语法。将标签的属性前加上 v-bind: 前缀，后跟一个字符串。这个字符串会被解析为一个JavaScript表达式，并在执行后将属性值设置为该表达式的结果。此外，v-bind: 可以被简写为 :。

简而言之，vue模板的插值语法用于动态地插入标签内容，而指令语法则用于动态地设置标签的属性。

数据绑定关系：

• 单双向数据绑定：通过 v-bind: 可以实现单向的数据绑定，即当vue实例中的对象属性值发生变化时，vue模板中显示的值也随之发生变化，但是反过来不成立。如果需要双向绑定，则需要将 v-bind: 修改为 v-model:。
• 双向绑定语法的元素限定：但是需要注意的是，能够进行双向数据绑定的元素只能是表单类元素（输入类元素）。
• 双向绑定语法的简写：由于 v-model: 默认绑定的就是 value 属性，因此在绑定元素的 value 属性时可以简写为 v-model。

注意事项：由vue管理的函数，一定不要写成箭头函数，因为一旦写了箭头函数，this 所指向的就不再是vue实例了。