访问元素 & 组件
访问根实例 $root
访问父实例 $parent
访问子组件实例或子元素 (ref 和 $refs)
- 当
ref和v-for一起使用时，可得到一个包含了对应数据源的这些子组件的数组(不论ref是否相同)。 - 在其他情况下，
ref总是只返回一个dom元素，即使有多个同ref元素。 - 另外:
$refs只会在组件渲染完成之后生效，并且它们不是响应式的。
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput.age = 18;
...
<input ref="input">
this.$refs.input.focus()
依赖注入
通过provide 指定提供给后代组件的数据/方法，并在后代组件中通过inject获取
provide: function () {
return {
getMap: this.getMap
}
}
...
inject: ['getMap']
侦听事件
$emit 除了可以被 v-on 侦听，还可以
- 通过 $on(eventName, eventHandler) 侦听一个事件
- 通过 $once(eventName, eventHandler) 一次性侦听一个事件
- 通过 $off(eventName, eventHandler) 停止侦听一个事件
循环引用
自身循环引用
为了防止无限递归，需确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。
互相循环引用
当使用模块系统依赖/导入组件时，会出现报错
Failed to mount component: template or render function not defined.
应等到生命周期钩子beforeCreate时再注册它，或者在本地注册组件的时候，使用 webpack 的异步 import：
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
//或者
components: {
TreeFolderContents: () => import('./tree-folder-contents.vue')
}
其他模板定义方式
内联模板inline-template
当 inline-template 特性出现在子组件上时，这个组件会使用其里内容作为模板，而非留给插槽。此时该实例的template属性配置会失效。
<my-component inline-template>
<div>
I am template
</div>
</my-component>
X-Template
在一个 <script> 元素中带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
...
Vue.component('hello-world', {
template: '#hello-world-template'
})
控制更新
强制更新
如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。
此时如果依然需要强制更新，可使用$forceUpdate
混入
混入 (mixin) 用于分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
- 基础数据类型、数组、方法 : 以组件为准
- 对象 : 合并为同一个对象，如键名重复则以组件数据为准
- 钩子函数(生命周期) : 都会被调用，且混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
全局混入
全局混入将会影响之后每一个创建的Vue实例，因此通常只用于为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
自定义合并策略
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}
自定义指令
注册指令
- 全局指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
//如想在 bind 和 update 时触发相同行为，而不关心其它的钩子，可简写为:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
- 局部指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
钩子函数
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。可以通过比较更新前后的值来忽略不必要的模板更新 -
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数
-
el：指令所绑定的元素，可以用来直接操作 DOM 。 -
binding：一个对象，包含以下属性：-
name：指令名，不包括v-前缀。 -
value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。 -
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。 -
expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。 -
arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。 -
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
-
-
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。 -
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
注 : 除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
插件
在调用 new Vue() 启动应用之前，通过全局方法 Vue.use() 使用插件。
var Vue = require('vue')
var VueRouter = require('vue-router')
Vue.use(VueRouter)
过滤器
过滤器可应用在双花括号插值和 v-bind 表达式 中
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
注册过滤器
- 全局注册
需在创建 Vue 实例之前全局定义
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
- 局部注册
当全局过滤器和局部过滤器重名时，会采用局部过滤器。
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
