vue注意点及报错整理

import Vue from 'vue'
// component类似于 export default 的一个对象
const component = {
  name: 'comp',
  render (createElement) {
    return createElement('div', {
      style: this.style
    }, this.$slots.default)
  },
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      },
      value: 'component value'
    }
  }
}

// 再实例化一个组件
new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data () {
    return {
      value: '123'
    }
  },
  mounted () {
    console.log(this.$refs.comp, this.$refs.span, this.$refs.comp.value)
  },
  template: `
    <div>
      <comp-one ref="comp">
        <span ref="span">{{value}}</span>
      </comp-one>
    </div>
  `,
  render (createElement) {
    return createElement(
      'comp-one',
      {
        ref: 'comp'
      },
      [
        createElement('span', {
          ref: 'span'
        }, this.value)
      ])
  }
})

v-bind绑定的attribute属性避免使用大写，因为浏览器会将attribute转化为小写

computed: 基于缓存在依赖的数据(响应式)未变化时，不会重复调用，这是相较于调用method属性中的函数的优势。计算依赖属性是临时计算出(v-for)则只能使用method

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
:class只能存在一个，可以和class共存
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> 兼容不同浏览器写样式

<template> 标签：在html自定义一个标签也会被当作一个行内标签渲染，所以template只不过是 Vue 里面的一个包裹标签
template上 v-show不会起作用，v-if可以

添加key能够表示元素是独立的，即使是同一位置切换的状态。 同时为每一个节点提供唯一的key，便于更新维护

v-for：value , [key,] index in/of 数组/对象

响应式缺陷：数组(splice、set())、对象(set)
数据更新渲染是异步的：

vm.message = 'new message' // 更改数据

在main.js中引入 .vue文件 需要在vue中 export default{}   
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {   // promise回调   
  vm.$el.textContent === 'new message' // true
})

<ul>、<ol>、<table> 和 <select>内部只能出现指定特殊元素，如果想让自定义vue组件放进去：<table><your-vue></your-vue></table> table会被删掉，your-vue组件会提到外层，<table> <tr is="your-vue"></tr></table>

事件：给method传参原生事件@click="click($event)"
事件修饰符：......

在表单中，v-model/v-bind(动态)绑定的是标签值得变量，value是变量对应的值，id是唯一标识符，一个标签只有唯一的3者。当选中的时候会将对应的value赋值到对应v-model/v-bind的变量上
表单修饰符：.lazy .number .trim

组件全局注册Vue.component、new Vue() 局部注册：var component = {} \ .vue文件

this.\(emit(),父组件中可以通过\)event访问到第二个后续的参数

html里面 attribute是不区分大小写的，其属性得改为‘短横线分隔命名法’

\(attrs代表爷爷传递的值而父组件中未使用剩下来的属性。\)listener代表父组件上所有绑定的事件(用于在子组件中合适的位置触发)

插槽里面的作用域问题：父组件无法访问子组件中的数据
作用域插槽解决了上述问题，在子组件中 v-bind绑定响应数据即可
v-slot只能放在template或自定义组件上， slot跟作用域、slot-scope跟子组件变量（slot跟slot-scoped成对出现）

this.\(options获取当前组件(Vue对象)上的所有属性(name、data、prop),打印`this.\)options`在proto原型链上可以看到

inline-template写自定义组件名字的时候出现在自定义包括范围内的都是其template
x-template 将自定义组件的模板单独定义在script标签中

render渲染函数：第一个参数默认是createElement

new Vue({
  render: h => h(App),
}).$mount('#app')

vue项目中的所有文件vue文件都会经过render编译成虚拟节点的编译文件，再挂载上去
JSX模拟react写法，对render的简写

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

VUE报错You are using the runtime-only build of Vue where the template compiler is not available
template放在字符串中需要经过编译成render函数才可进行下一步   
// 解决：在vue.config.js配置  alias: {   'vue$': 'vue/dist/vue.esm.js' }