Vue.js框架：深度解析前端技术内容

Vue.js是一个渐进式框架，只需要具备基本的HTML/CSS/JavaScript基础就可以快速上手。在用Vue.js构建大型应用时推荐使用NPM安装，但是需要注意npm的版本需要大于3.0。

在通过npm安装项目后，我们需要对其目录进行解析：

（1） Build：项目构建（webpack）相关代码;

（2） config：配置目录，包括端口号等。

（3） node_modules：npm加载的项目依赖模块

（4） src：这个目录当中的内容包含了我们基本上要做的事情，这里包含了几个文件：

（一）assets：存放图片

（二）components：存放组件文件

（三）App.vue：项目入口文件，组件也可以直接写在这里不适用components

（四）main.js：核心文件

（5） static：静态资源目录

（6） test：初始测试目录

（7） .xxxx：配置文件，包括git配置和语法配置等

（8） index.html：首页

（9） package.json：项目配置文件

（10） README.md：说明文档

程序=数据结构+算法，但这话在前端里并不纯粹，因为前端需要和界面打交道，所以大概总结下基础操作dom的前端开发方式：前端程序=拼界面+操作ui+算法。Vue的mvvm框架给了前端另一种思路：完全基于数据驱动的编程。帮助你从繁杂的dom操作中解脱出来，回归本质。

使用Vue的过程就是定义MVVM各个组成部分过程的过程

（1） 定义View

（2） 定义Model

（3） 创建一个Vue实例或“ViewModel”

在创建Vue实例的时候，需要传入选项对象，可以包含挂载元素、数据等。Vue.js有很多数据绑定语法，最基础的的是文本插值，在运行时{{ message }}会被数据对象的message属性替换。

Vue实例被创建前会经过初始化，然后在数据变化时更新DOM，在这个期间也会调用一些生命周期钩子，从而我们可以自定义逻辑。总共可以分为8个段：

（1） beforeCreate 初始化实例后 数据观测和事件配置之前调用

（2） created 实例创建完成后调用

（3） beforeMount 挂载开始前被用

（4） mounted el被新建vm.$el替换并挂在到实例上之后调用

（5） beforeUpdate 数据更新时调用

（6） updated 数据更改导致的DOM重新渲染后调用

（7） beforeDestory 实例被销毁前调用

（8） destroyed 实例销毁后调用

需要注意的是created和mounted的区别，created是实例已经创建但未挂载，所以一些dom操作要放在mounted中。

Vue组件的API来自props（允许外部环境传递数据给组件）、events（允许组件触发外部环境副作用）和slots（允许外部环境将额外的内容组合在组件中）三个部分，组件的data属性必须是函数。尽管有props和events，但有时候需要js直接访问子组件，所以可以使用ref为子组件指定一个索引ID。

Vue.js的插件应当有一个公开方法install。该方法的第一个参数是Vue构造器 , 第二个参数是一个可选的选项对象。

可通过全局方法Vue.use()使用插件:

//调用 `MyPlugin.install(Vue)`

Vue.use(MyPlugin)

也可以传入一个选项对象:

Vue.use(MyPlugin, { someOption: true })

在vue-router中有两种导航方式：

（1）router-link声明式导航

<router-link to="/foo">Go to Foo</router-link>

router-link对应的路由匹配成功，将自动设置class属性值.router-link-active。

（2）编程式导航：

router.push('home')

// 对象

router.push({ path: 'home' })

// 命名的路由

router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private

router.push({ path: 'register', query: { plan: 'private' }})