vue computed、vue watch、组件、父子组件、模板分离、prop传值、emit传值

一、computed 和 methods
computed 依赖缓存
methods每次都重新执行
除此以外注意html中调用的写法上的不同：

//箭头写法，传递this
computed: {
    totalPage: _this => _this.tableList.length,
    fileName: _this => _this.dataForm.file.length ? _this.dataForm.file[0].raw.name : null
  },

二、watch监控
watch可以提取到每一次变化发生时，变化后的值和变化前的值

三、组件
（语法知识点：template中的内容如果有很多条需要用一个大<div>......</div>包裹起来。）
3.1创建构造器+注册组件

3.2语法糖
Vue.component('标签名',{template:'<div>......</div>'})

在Vue实例里添加compoents:{'标签名':{template:'<div>......</div>'}}

四、父子组件(用语法糖版本)

五、模板分离
5.1template

5.2script type=“text/x-template”

六、组件里创建变量

但是要注意这样一个错误：
图2与图1的区别在于，图2的返回值是一个对象，图1的返回值是一个值。对于数据的存储，对象会返回那个对象的地址，而如果仅仅是个值就会新创建一个对象取其地址，每次的创建都是不同的对象不同的地址。
这也是为什么data要写成data()的原因，data是一个function而不是一个属性

七、父组件向子组件传值props

八、子组件向父组件传值emit
1监控鼠标点击事件click→2子节点执行click1方法（emit发射被接收的事件名和数据）→3父节点接收clicked事件（带数据）→4执行change方法

注：为什么④change不是change（msg），因为root组件下没定义msg，msg只是被存在root组件下，可以被方法调用，但是我们不能调用，这里还没找到更好更对称的写法

例1：子传父+信息提取

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
    <h1>您点击的是{{msg}}</h1>
    <html-button v-on:itemclick="change1"></html-button>
</div>

<template id="btn">
    <div>
      <button v-for="item in btnmsg" v-on:click="click1(item)">{{item.name}}</button>
    </div>
</template>

<script>
   Vue.component('html-button',{
       template:'#btn',
       data(){
           return{
               btnmsg:[
                   {id:'1',name:'yi'},
                   {id:'2',name:'er'},
                   {id:'3',name:'san'},
                   {id:'4',name:'si'},
               ]
           }
       },
       methods:{
           click1(item){
            this.$emit('itemclick',item )
           }
       }
   })
    new Vue({
	    el: '#app',
        data:{
            msg:''
        },
        methods:{
            change1(item){
                this.msg=item.id
            }
        }
    })
</script>