web前端技术内容详解之Vue.js框架

标签：项目配置   message   class   mes   代码   event   one   col   lin   

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‘ }})

web前端技术内容详解之Vue.js框架

标签：项目配置   message   class   mes   代码   event   one   col   lin   

原文地址：http://blog.51cto.com/14071672/2319513