【Vue】走进Vue框架世界

一、vue.js的基础概念

Vue是一套用于构建用户界面的渐进式框架。 其开发框架就是一个典型的 MVVM （View-ViewModel- Model）模型的框架。

Vue.js在该模式中扮演的就是 ViewModel层 的作用。

MVVM的组成部分及功能：

1. Model（模型）：模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。
2. View（视图）：就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。
3. ViewModel（视图模型）：实现了Model与View之间数据的双向绑定及实时更新功能，也是Vue.js所扮演的角色。

比较流行的前端框架，类似vue、react、angular、avalon都使用了MVVM模式。其优点在于实现了view和model 双向绑定，简化开发者的工作，不用专注于更新视图，只需要专注于实现业务逻辑即可。

二、vue.js中常见的指令

• v-text：更新元素的值
• v-html：更新元素的值和html标签
• v-bind： 给标签属性绑定值，简写形式为“:[属性名]”
• v-on：给标签绑定HTML事件，简写形式为“@[事件名]”
• v-once：通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
• v-if：根据表达式的boolean值判断是否渲染该元素，可以与v-else-if和v-else指定搭配使用
• v-show：根据其后表达式的bool值判断元素的display属性是否为none
• v-for：循环遍历，输出目标值
• v-model：使vue实例中的数据和表单（input输入框）数据实现双向绑定

三、vue实例中的常见属性

data：保存Vue实例中的数据；
components： 对子组件的进行注册；
methods：定义当前实例中所有可执行的方法；
computed：对data中的数据进行相关的复杂运算；
watch：实现对数据的实时监听

四、vue.js中的生命周期

在Vue.js的生命周期过程中，在不同阶段若用户需要添加自己的代码，就可以使用钩子函数

4.1、八个钩子函数：

beforeCreadted：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化 created：vue实例的数据对象data有了，$el还没有 beforeMount：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换 mounted：vue实例挂载完成，data.filter成功渲染 beforeUpdate：data更新时触发 updated：data更新时触发 beforeDestroy：组件销毁时触发 destroyed：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在

五、vue.js的组件

组件是vue.js的核心所在，在vue.js中世界万物皆组件。组件可以理解为一个可以反复使用的代码块，且组件与组件之间的数据是独立的。

5.1、组件的注册

注册全局组件：使用Vue.component()方法进行注册 注册局部组件：在Vue实例中的components属性中完成注册

5.2、父子组件传值

当在一个组件A中使用了B组件，即B组件就为A组件的子组件，A组件为B组件的父组件。

此时，当父子组件之间需要传值的时候，就可以分为以下两种状况：

• 父传子：首先应在子组件中新增props属性，规定好所需要的数据；然后再通过父组件传值给子组件
• 子传父：在子组件中使用$emit方法将数据传给父组件，在这个过程中需要触发一个自定义事件。这个自定义事件会在子组件向父组件传值时触发，最后再由父组件监听该事件触发对应方法来完成传值。

5.3、组件数据的独立化

为了保证一个组件被多次使用时，组件与组件之间的数据互不影响，相对独立。我们应在构造组件时，将组件中的data定义为方法，在data中返回一个对象data(){return {}}，对象中包含了当前组件的所有数据。

<script> export default { data() { return{}; } } </script> 

5.4、组件中的插槽

父组件需要向子组件中插入不固定的代码内容时，就可以使用到插槽。插槽类似一个定位符，规定了当父组件插入代码时，这段代码的显示位置。

按照插槽的种类分为两类：匿名插槽和具名插槽。

当一个组件中有多个插槽时就需要使用到具名插槽来分辨不同的插槽。

使用方法为：使用name属性给插槽命令，使用slot属性来规定要使用的插槽。

5.5、获取父子组件对象

当父子组件需要互相获取组件对象时，可以使用vue自定义属性。分别如下：

• $children：获取所有子组件对象
• $refs：获取所有子组件对象（组件有对应的组件名）
• $parent：获取父组件对象
• $root：获取根组件对象

5.6、单独的组件文件

组件也可以单独封装为.vue类型的文件，该文件由template、script、style三部分组成。 其中若要设置style的作用范围为当前组件，应给style标签加上“scoped”属性。

备注：在使用组件时，应该避免驼峰法的命名方法。如果非用不可，可以在使用的时候改成特殊形式。（例如myComponentDeal可以改为my-component-deal）

六、webpack网页项目打包工具

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

在使用webpack工具时，我们需要首先安装node.js，保证npm（包管理器）命令可以正常执行。

6.1、webpack.config.js配置文件

使用webpack.config.js配置文件可以对整个项目进行相关配置，对项目的相关功能进行具体的设置。常见的设置项有：

• entry：项目的入口js文件
• output：打包后的文件的存放位置（这个目录一般是dist）
• plugins：对项目中的插件进行注册，组件只有在完成注册后才能使用
• module：对项目中的相关loader的使用规则进行规定

6.2、loader拓展器

Loader是webpack中非常核心的一个功能，可以完成文件、版本之间的互相转换。例如：es6转es5，less；scss转css；vue、jsx转js等。

6.3、插件功能

通过插件可以给webpack添加更加丰富的功能。

6.4、npm指令的使用

使用npm功能可以给当前项目安装各类功能，其使用方法为：

npm install [包名] [存储方式]

存储方式分为两大类：
--save：安装为运行时依赖；
--save-dev：安装为开发时依赖

七、vueCli脚手架

CLI：Command-Line Interface（命令行界面），俗称脚手架。 VueCLI可以帮助我们快速开发Vue开发环境以及对应的webpack配置。 Vue现在主要分为两大版本分别是：VueCli2和VueCli3/4 与VueCli2相比，VueCli3/4减少了用户需要配置的文件，并且添加了用户GUI界面，使得开发更加便捷。

7.1、两种开发模式的区别

在创建项目时，会让我们选择runtime-only和runtime+compiler两种开发模式。 这两者间runtime-only模式的代码更少，效率更高。一般来说我们在实际开发过程中都是使用runtime-only模式

7.2、创建脚手架的命令

• VueCli2：vue init webpack [项目名]
• VueCli3/4：vue create [项目名]

八、vueRouter路由

VueRouter就是SPA（single page application单页应用）的路径管理器。 通俗的说，vue-router就是WebApp的链接路径管理系统。 实现了vue应用中的不同页面之间的跳转功能。 它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容，即更新视图而不重新请求页面。

其切换模式提供了两种方式：Hash模式和History模式
根据mode参数来决定采用哪一种方式，一般开发时都选择history模式。（不设置默认为hash模式）

8.1、常用标签和方法

为了实现路由的基本功能，vuerouter提供了一些常用的标签和方法给开发者使用：

• router-view：该组件负责渲染路径匹配到的视图组件中
• router-link：该组件支持用户在具有路由功能的应用中 (点击) 导航
• $router.push()：通过JavaScript的方式实现路由的跳转

8.2、路由的构建选项

掌握路由的配置规则及子路由嵌套的使用。

8.2、路由的懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

九、vuex状态管理器

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 在状态管理中有5个重要的属性，分别是：

• State：保存了vuex中的所有数据，可从state获取保存在vuex中的数据。
• Getters：类似于computed属性，可以对state中的数据进行复杂处理。
• Mutations：Vuex中的状态修改方法。
• Action：Vuex中的状态修改方法，异步修改时使用
• Modules：当应用变得非常复杂时，Vuex有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

十、ES6语法

关于JavaSscriptES6中的语法需要掌握一下几点：

1. 箭头函数：在ES6更新了新的定义函数的语法，即箭头函数，通过“()=>{}”方式即可定义一个方法。箭头函数中的this会指向外部的this。
2. let关键字：变量经由let声明后有了自己的值域，不在和var一样是一个全局变量了。
3. const关键字：常量关键字，通过const申明的变量一经赋值，其值不可改变。
4. 模块化开发思想：利用exoport和import关键字导出及使用不同的模块，由此实现了模块化开发的功能。