v-model 是一个语法糖,它即可以支持原生表单元素,也可以支持自定义组件.v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件.
在自定义组件中,因为 value 可能作为其他的用处,所有官方推荐的解决方式就是自定 model
// 子组件创建
<template>
<div id="app">
<input
type="checkbox"
v-bind:checked="lovingVue"
v-on:change="$emit('change', $event.target.checked)"
/>
</div>
</template>
<script>
export default {
name: "app",
props: ["lovingVue"],
model: {
prop: "lovingVue",
event: "change"
}
};
</script>
// 父组件使用
<Children v-model="lovingVue"/>
在 vue 中绑定事件
<div class="outer" @click="handleClickEvent($event)">
<div class="inner"></div>
</div>
......
handleClickEvent(e) {
console.log("arguments :", arguments[0]); //MouseEvent
console.log("event :", e); //MouseEvent
console.log("e.target :", e.target); // <div class="inner"></div>
console.log("e.currentTarget :", e.currentTarget); //<div class="outer"><div class="inner"></div></div>
}
这样点击内部的 inner 也能触发事件,但是 e.target 和 e.currentTarget 指向不同的对象,currentTarge 是事件绑定的元素而 target 是鼠标触发的元素
不能同名 因为不管是计算属性还是 data 还是 props 都会被挂载在 vm 实例上,因此 这三个都不能同名
Method "${key}" has already been defined as a data property.
,ssr,即单页面后台渲染
vue-meta-info 与 prerender-spa-plugin 预渲染
nuxt
phantomjs
Vue.prototype[key] = tools[key]
Vue.mixin(mixin)全局混入 mixin
Vue.use(plugin)
// 创建全局方法 this.$root.$on('test', callback) , this.$root.$off 关闭,this.$root.$emit 触发
activated: 页面第一次进入的时候,钩子触发的顺序是 created->mounted->activated
deactivated: 页面退出的时候会触发 deactivated,当再次前进或者后退的时候只触发 activated
作用的话,便于 diff 算法的更新,key 的唯一性,能让算法更快的找到需要更新的 dom,需要注意的是,key 要唯一,不然会出现很隐蔽性的更新问题。
vm.$data 可以获取当前状态下的 data
vm.$options.data 可以获取到组件初始化状态下的 data
Object.assign(this.$data, this.$options.data())
手机扫一扫
移动阅读更方便
你可能感兴趣的文章