-
app.$mount("#app")手动挂载，当Vue实例没有el属性时，则该实例没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount方法来挂载 - Vue的单文件组件
<template>HTML</template>、<script>JavaScript</script>、<style>CSS</style> - Vue的插槽
<slot></slot> - Vue中
':'是'v-bind:'的缩写 - 在
props里写的iconPosition到HTML会被Vue自动转换为icon-position(HTML规范中不能有大写) - Vue的属性检测器
validator(xxx){}用来检测用户是否按照要求设置属性 - 若在属性前不加
':/v-bind:'则被视为字符串，加了以后''可有可无 -
mounted(){}当该组件出现在页面中时便会执行 - Vue中
this.$children只会寻找Vue的实例无法区分，可用this.$el - 用
$mount('#app')动态加载组件 - 若不把元素加载到页面，页面便不会渲染它，也不会加载其CSS样式，故有时
$mount()需加参数 - Vue中使用自定义组件到方法：1⃣️全局注册 2⃣️局部组件(
export default{ components: { 'g-icon': Icon }, }) :class = "{ 'error': error }" => :class = "{error}"- 如果你不想在
div里添加一个v-if(增加一个标签)，那么可使用template标签 - 在
<input>中有原生的change事件，Vue通过$event来表示：@change = "emit('change', $event)"、emit('change', $event, 'hi', 'How') -
v-model = "message"<=>:value = "message", @input = "message = $event.target.value"
value绑定message属性，input发出来一个事件，将message作为该事件值 - Vue的
dom diff检查到双向数据一样，便不会改变 - Vue渲染的标签内不能添加
<style>标签 props: { span: [Number,String] }-
Created()与mounted()的区别：Created()是创建对象(标签)，mounted()是将其加载(挂载)到页面—appendChild
Vue加载过程：var div = createElement('div');// 先创建父元素
var childDiv = createElement('div');// 再创建子元素
div.appendChild(childDiv);// 将子元素挂载到父元素
document.body.appendChild(div);// 将父元素挂载到网页上 -
data：是只在一开始的时候读一次，变化之后不改变
computed：响应式，只要数据一变就会随之改变，且有缓存，故每次刷新并不会改变
computed与methods的区别？ -
validator：控制用户输入，只能使用其中值，其它就提示或保错validator (value) { return ['left', 'right', 'center'].includes(value) // 可能不兼容，可换成array的indexOf() } - 如果是异步渲染，注意时间问题，用钩子函数便存在异步
-
<transition>标签添加动画 -
options.name就是name的值，用于回调 - Vue添加插件/自定义方法：
- 1⃣️
Vue.prototype.$toast = function () {} - 2⃣️
MyPlugin.install = function (Vue, options) { //1.添加全局方法或属性 Vue.myGlobalMethod = function () {} //2.添加全局资源 Vue.directive('my-directive', { bind( el, binding, vnode, oldVnode ){} }) //3.注入组件 Vue.mixin({ created: function () {} }) //4.添加实例方法 Vue.prototype.$myMethod = function (methodsOptions) {} } //使用插件： //调用'myPlugin.install(Vue)' Vue.use(MyPlugin) new Vue({ //... options }) //或者使用 Vue.use(MyPlugin, { someOption: true }) Vue.use 会自动阻止多次注册相同插件，届时只会注册一次该插件。
- 1⃣️
- ★Vue中如果你的
default需要是一个对象，则写成函数然后return一个对象(这是考虑到复用性—不这样写的话，如果有两个组件同时使用，而其中一个被更改了，那另一个也会被更改)
例：default: () => { return { text: '关闭', callback: (toast) => { toast.close() } } } - Vue调试，可在
created()中测试 -
includes兼容不是很好，用array的indexOf代替
return ['top', 'bottom'].indexOf(value) >= 0 - Vue中更新数据：
<g-tab selected = "selectedTab" @update:selected = "selectedTab = $event"> <=> <g-tab selected.sync = "selectedTab"> <g-tab selected = "selectedTab" v-bind:update:selected = "selectedTab = $event"> - 如果值为变量，则需要加
':'，若为常量就不用加 -
required: true，值必须要 - 新增插槽：
Vue HTML <slot></slot>&&<slot name = "active"></slot><template slot = "action"></template> - Vue中有
class和style会默认添加，其它属性都是覆盖 - 订阅发布模式：
provide () { return { eventBus … }}—所有子孙后代都能访问的属性，跨组件属性
子孙：通过inject: ['eventBus']，去访问eventBus - Vue事件不会冒泡，事件也要看在哪个对象上触发的
-
data与props的区别？
如果需要用户传值则用props，不需要用户传值用data
组件就像一个函数，props就是形参，data就是局部变量 - Vue默认插槽，不需要用
<template>包住 -
@click.stop = "xxx"阻止冒泡，自行处理 -
v-if是有没有(是否在dom中)，v-show是有但看不看得见(改变样式) -
<slot>不支持引用与类(ref、class) - 可通过
<slot>的slot-scope取得组件内部的方法，在组件中传值：yk = "1"，在网页中取值：slot-scope = "{yk}" - Vue.js的特性如下：
1⃣️轻量级的框架
2⃣️双向数据绑定
3⃣️指令
4⃣️插件化
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
更新于2019-01-23-19:42，以上皆为日常笔记，如有问题还望大家多多指正！
网友评论