- 入门时,一直不清楚 new Vue 和 Vue.component 选项的区别
new Vue 创建的是根实例
new Vue({
el : '#app',
data(){}
})
Vue.component 创建的是组件
Vue.component('button-counter',{
data(){}
})
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
- 生命周期
beforeCreate/created beforeMount/mounted
beforeUpdate/updated beforeDestroy/destroyed - render优先级
render函数>template模板>outer HTML - 组件基本用法
<div id="app">
</div>
Vue.component()定义全局组件
new Vue({ el : '#app' })在每个页面生成一个容器组件
-
单文件组件
什么,你说上面这种写法和你项目中的不一样,是下面这样的,噢,那你说的是单文件组件(.vue)
https://cn.vuejs.org/v2/guide/single-file-components.html<template></template> <script></script> <style></style>
对,这就是单文件组件,江湖人称 Single-File Components (SFCs),关注点分离并不代表类型分离(此话抄自vue官网),模板逻辑样式是内部耦合的
<template> <div class="example">{{ msg }}</div> </template> <script> </script> export default { data () { return { msg: 'Hello World' } } ... } <style lang="less" scoped> .example { color: red; } </style>
-
指令
指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性,如v-bind、v-modal、v-on等 -
计算属性
computed计算属性是基于依赖进行缓存,依赖不变,不会重新求值。而
methods调用方法,都会重新计算。
{{reversedMessage}}
...
computed: {
reversedMessage: function () { // 计算属性的 getter
return this.message.split('').reverse().join('')
}
}
- v-if v-else
用key管理可复用的元素 - v-show 与 v-if 的不同
v-show与v-if都能控制元素的展示,不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 - 全局注册/局部注册
// 全局注册,用Vue.component注册的
Vue.component("blog-post",{});
// 局部注册,用js对象定义组件,然后在components中引用
var blogPost = { /* ... */ };
var app = new Vue({
el: '#app',
components: {
blogPost
}
}}
- 静态/动态prop
// 静态,直接传值
<blog-post title="My journey with Vue"></blog-post>
// 动态
<blog-post :title="title"></blog-post>
vue是单项数据流,同通过prop传递,子组件不应该更改prop,
如要更改,通常有两种情况:
props: [initialCounter, size],
data(){
return {
counter: this.initialCounter // 情况一,data,作为初始值
}
},
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase(); // 情况二,computed,定义计算属性
}
}
- 作用域插槽
父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
slot-scope - 异步组件
vue允许以工厂函数的方式定义组件,组件被渲染时,工厂函数才会触发
和webpack的code-splitting配合使用https://cn.vuejs.org/v2/guide/components-dynamic-async.html
Vue.component('async-webpack', resolve=> require(['./my-async-component'], resolve))
// 这个特殊的 `require` 语法将会告诉 webpack,自动将你的构建代码切割成多个包,这些包会通过 Ajax 请求加载
})
也可以在工厂函数中返回一个Promise
Vue.component('async-webpack', () => import('./my-async-component'))
// 这个 `import` 函数会返回一个 `Promise` 对象。
当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数:
new Vue({
...
components: {
"my-component" : ()=>import('./my-component')
}
})