Vue.js学习笔记

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 会自动阻止多次注册相同插件，届时只会注册一次该插件。

★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，以上皆为日常笔记，如有问题还望大家多多指正！

Vue.js学习笔记

Vue.js学习笔记

相关阅读更多精彩内容

友情链接更多精彩内容