Vue.js学习笔记

1. app.$mount("#app")手动挂载，当Vue实例没有el属性时，则该实例没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount方法来挂载
2. Vue的单文件组件<template>HTML</template>、<script>JavaScript</script>、<style>CSS</style>
3. Vue的插槽<slot></slot>
4. Vue中':'是'v-bind:'的缩写
5. 在props里写的iconPosition到HTML会被Vue自动转换为icon-position(HTML规范中不能有大写)
6. Vue的属性检测器validator(xxx){}用来检测用户是否按照要求设置属性
7. 若在属性前不加':/v-bind:'则被视为字符串，加了以后''可有可无
8. mounted(){}当该组件出现在页面中时便会执行
9. Vue中this.$children只会寻找Vue的实例无法区分，可用this.$el
10. 用$mount('#app')动态加载组件
11. 若不把元素加载到页面，页面便不会渲染它，也不会加载其CSS样式，故有时$mount()需加参数
12. Vue中使用自定义组件到方法：1⃣️全局注册 2⃣️局部组件(export default{ components: { 'g-icon': Icon }, })
13. :class = "{ 'error': error }" => :class = "{error}"
14. 如果你不想在div里添加一个v-if(增加一个标签)，那么可使用template标签
15. 在<input>中有原生的change事件，Vue通过$event来表示：@change = "emit('change', $event)"、emit('change', $event, 'hi', 'How')
16. v-model = "message" <=> :value = "message", @input = "message = $event.target.value"
value绑定message属性，input发出来一个事件，将message作为该事件值
17. Vue的dom diff检查到双向数据一样，便不会改变
18. Vue渲染的标签内不能添加<style>标签
19. props: { span: [Number,String] }
20. Created()与mounted()的区别：Created()是创建对象(标签)，mounted()是将其加载(挂载)到页面—appendChild
    Vue加载过程：

    var div = createElement('div'); // 先创建父元素
    var childDiv = createElement('div'); // 再创建子元素
    div.appendChild(childDiv); // 将子元素挂载到父元素
    document.body.appendChild(div); // 将父元素挂载到网页上

21. data：是只在一开始的时候读一次，变化之后不改变
    computed：响应式，只要数据一变就会随之改变，且有缓存，故每次刷新并不会改变
    computed与methods的区别？
22. validator：控制用户输入，只能使用其中值，其它就提示或保错

    validator (value) {
      return ['left', 'right', 'center'].includes(value) // 可能不兼容，可换成array的indexOf()
    }
    

23. 如果是异步渲染，注意时间问题，用钩子函数便存在异步
24. <transition>标签添加动画
25. options.name就是name的值，用于回调
26. 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 会自动阻止多次注册相同插件，届时只会注册一次该插件。
      

27. ★Vue中如果你的default需要是一个对象，则写成函数然后return一个对象(这是考虑到复用性—不这样写的话，如果有两个组件同时使用，而其中一个被更改了，那另一个也会被更改)
    例：

    default: () => {
      return { 
        text: '关闭',
        callback: (toast) => {
          toast.close()
        }
      }
    }
    

28. Vue调试，可在created()中测试
29. includes兼容不是很好，用array的indexOf代替
    return ['top', 'bottom'].indexOf(value) >= 0
30. Vue中更新数据：

    <g-tab selected = "selectedTab" @update:selected = "selectedTab = $event"> <=> <g-tab selected.sync = "selectedTab">
    <g-tab selected = "selectedTab" v-bind:update:selected = "selectedTab = $event">
    

31. 如果值为变量，则需要加':'，若为常量就不用加
32. required: true，值必须要
33. 新增插槽：

    Vue	HTML
    <slot></slot> && <slot name = "active"></slot>	<template slot = "action"></template>

34. Vue中有class和style会默认添加，其它属性都是覆盖
35. 订阅发布模式：provide () { return { eventBus … }}—所有子孙后代都能访问的属性，跨组件属性
    子孙：通过inject: ['eventBus']，去访问eventBus
36. Vue事件不会冒泡，事件也要看在哪个对象上触发的
37. data与props的区别？
    如果需要用户传值则用props，不需要用户传值用data
    组件就像一个函数，props就是形参，data就是局部变量
38. Vue默认插槽，不需要用<template>包住
39. @click.stop = "xxx"阻止冒泡，自行处理
40. v-if是有没有(是否在dom中)，v-show是有但看不看得见(改变样式)
41. <slot>不支持引用与类(ref、class)
42. 可通过<slot>的slot-scope取得组件内部的方法，在组件中传值：yk = "1"，在网页中取值：slot-scope = "{yk}"
43. Vue.js的特性如下：
    1⃣️轻量级的框架
    2⃣️双向数据绑定
    3⃣️指令
    4⃣️插件化
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    更新于2019-01-23-19:42，以上皆为日常笔记，如有问题还望大家多多指正！