- Vue 全局属性 Vue:
Vue.http.(get|post|delete...)
Vue.filter
Vue.
注册全局组件。
使用Vue.component()方法注册全局组件。
- 第一个参数是自定义元素名称,也就是将来在别的组件中使用这个组件的标签名称。
- 第二个参数是将要注册的Vue组件。
import Vue from 'vue';
// 引入loading组件
import Loading from './loading.vue';
// 将loading注册为全局组件,在别的组件中通过<loading>标签使用Loading组件
Vue.component('loading', Loading);
使用Vue.use注册插件。
- 这个方法接收一个参数。这个参数必须具有install方法。Vue.use函数内部会调用参数的install方法。
- 如果插件没有被注册过,那么注册成功之后会给插件添加一个installed的属性值为true。Vue.use方法内部会检测插件的installed属性,从而避免重复注册插件。
- 插件的install方法将接收两个参数,第一个是参数是Vue,第二个参数是配置项options。
- 在install方法内部可以添加全局方法或者属性、全局指令、mixin混入、添加实例方法、使用Vue.component()注册组件等。
import Vue from 'vue';
// 这个插件必须具有install方法
const plugin = {
install (Vue, options) {
// 添加全局方法或者属性
Vue.myGlobMethod = function () {};
// 添加全局指令
Vue.directive();
// 添加混入
Vue.mixin();
// 添加实例方法
Vue.prototype.$xxx = function () {};
// 注册全局组件
Vue.component()
}
}
// Vue.use内部会调用plugin的install方法
Vue.use(plugin);
Vue 的$mount()
$mount()为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作、判断等),之后要手动挂载上。
- new Vue时,el和$mount并没有本质上的不同。
Vue2.0 render:h => h(App)
new Vue({
router,
store,
//components: { App } vue1.0的写法
render: h => h(App) vue2.0的写法
}).$mount('#app')
render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来
vue.2.0的渲染过程:
- 首先需要了解这是 es 6 的语法,表示 Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果。
- 其次,Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树。
- 最后,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,然后 createElement 会以 APP 为参数进行调用,关于 createElement 函数的参数说明参见:Element-Arguments
结合一下官方文档的代码便可以很清晰的了解Vue2.0 render:h => h(App)的渲染过程。
[官方文档][1]:
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
}
Vue-router原理
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: about
}, {
path: '/upload',
name: 'upload',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import ( /* webpackChunkName: "about" */ './views/Upload.vue')
}
]
})
在vue-router中,它提供mode参数来决定采用哪一种方式,选择流程如下:
mode 参数:
- 默认hash ---- 利用URL中的hash(“#”)
- history 注:如果浏览器不支持history新特性,则采用hash方式
- 如果不在浏览器环境则使用abstract(node环境下)