- A+
Vue 2.0 基础
知识点
- 特点
- 实例
- 基本语法
- 生命周期
- 路由管理Vue-Router
- 状态管理Vuex
- Http请求库Axios
特点
1.是一个MVVM框架
由MVC架构衍生，分为View(视图层)、ViewModel(数据视图层)、Model(数据层)，MVVM 最标志性的特性就是 数据绑定，实现数据驱动视图，视图同步数据。
2.数据也是单向的，称之为单向数据流
数据总是从父组件传递到子组件中，子组件无权(不建议)直接修改父组件中的数据。
3.不兼容ie8及其以下浏览器
响应式原理式利用了es5的Object.defineProperty，而该API不支持IE8
实例
// Vue单页面实例 <template> 标签... </template> <script> export default { data () {}, methods: {}, computed: {}, watch: {} } </script> <style> 样式... </style> 选项 Options
data
函数，用于定义页面的数据
data() { return { count: 2 copyCount: 1 } } // 使用 this.count // 2 computed
对象，计算属性，用于简化复杂逻辑处理
// 计算属性不接受参数，会缓存依赖数据，必须要有return computed：{ doubleCount: function () { return this.count *= 2 }, } // 使用 this.doubleCount // 4 methods
对象，用于定义页面的函数
methods: { cLog(msg) { console.log(msg) } } // 使用 this.cLog('调用了函数') // 控制台输出：调用了函数 watch
对象，属性侦听，用来监听某数据的改变并做出对应操作
watch: { count(value, [oldValue]) { // value：改变后的值 this.copyCount = value + 1 } } // 当count发生改变时自动触发 this.count = 2 this.copyCount // 3 components
对象，注册组件到页面
import UploadImg from 'xxxx' components: { UploadImg } // template <upload-img> 基本语法
常用指令
v-html
渲染HTML
v-if
判断语法，控制显示/隐藏，通过是否渲染DOM来控制
v-show
控制显示/隐藏，与v-if类似，但v-show是通过display属性控制
v-model
双向数据绑定，一般用于表单，默认绑定value属性
v-bind
简写 :class
用于动态属性绑定
v-on
简写 @click
用于事件绑定
v-for
遍历语法，支持数组、对象及字符串
生命周期
beforeCreated
创建Vue对象
created
data初始化，此时可以对实例做些预操作
beforeMounted
el和data初始化
mounted
挂载el和data，此时可以调用http请求
beforeUpdated
更新DOM前，此时可以进一步地更改状态，不会触发重渲染过程
updated
更新修改后的虚拟DOM到页面，此时应避免改动操作，以免造成无限循环更新
beforeDestory
页面销毁前，此时可以做一些重置操作，比如清除定时器 和 dom事件等
destoryed
页面销毁，此时Vue实例已被删除，所有操作均无效
路由管理Vue-Router
官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
路由配置
// NPM下载 npm install vue-router // router.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 定义页面路由（路径、组件） export default new Router({ { path: '/foo', component: () => import('/pages/foo') }, // 路由组件懒加载 { path: '/bar', component: '/pages/bar'} }) // main.js import router from './router.js' new Vue({ el: '#app', router, // 挂载路由到Vue实例 render: h => h(App) }) // page.vue <!-- 要重点区分开两者的关系 --> this.$router // 访问路由器，内置push、replace的路由方法 this.$route // 访问当前路由，内置path、query等路由属性 // app.vue <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> 路由跳转
申明式路由
<router-link :to="..."> <router-link :to="..." replace> 编程式路由
this.$router.push({ path: 'register', query: { plan: 'private' }}) this.$router.replace(...) // 与push区别在不插入history记录 this.$router.go( [Number] n ) // 在 history 记录中向前或者后退多少步 // 路由传参携带中文时建议先使用encodeURLComponent转码，以免显示乱码。 路由守卫
全局守卫
对配置的所有路由均生效，但优先级低与内部路由。
全局前置守卫（常用）
// 用户未能验证身份时重定向到 /login router.beforeEach((to, from, next) => { // to 即将要进入的路由对象，from 来源路由，next 钩子函数，是否放行 if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() }) 全局解析守卫（了解）
router.beforeResolve((to, from, next) => { // ... }) 全局后置钩子（了解）
router.afterEach((to, from) => { // 该路由守卫不接受 next 钩子函数 // ... }) 路由独享守卫（了解）
该守卫仅对配置的路由生效，这些守卫与全局前置守卫的方法参数是一样的。
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) 组件内部守卫（了解）
可以在路由组件内直接定义以下路由导航守卫，仅对当前组件生效。
beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave 
