VUE对象

const vm = new Vue({…})
Vue是一个函数
重要属性

data

用函数

el

与$mount有替换关系

template

替换被挂载的元素
内部可以写data的数据 {{n}}
也可以写methods的方法{{filter()}}

watch

watch:
  obj: {
    handler(){
    },
   deep: true
  }

设置了deep为true
obj内部的属性变量，那么obj就变

注意点：

watch不要用箭头函数
箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

指令

做demo过程中，遇到了一个由于html script 加载顺序导致的bug。
https://segmentfault.com/a/1190000013615988
script放在header 还是body 有讲究。

简单的部分不记录了

v-bind实现绑定内联样式

<div :style="{'color':color, 'fontSize': fontSize + 'px'"}">demo</div>

css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebab-case ），
渲染后

<div style ="color:red; font-size:14px">text</di>

v-once 定义它的元素或者组件只渲染一次

<div v-once>{{message}}</div>

表单使用动态绑定

<input type="checkbox" v-model="picked" :true-value="value1" :false-value="value2">
        <label>the check</label>
        <p>{{picked}}</p>
        <p>{{value1}} </p>
        <p>{{value2}} </p>

疑问： v-model和value的到底谁起作用？

Vue实例的写法

1. new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { App },
   })

2.

new Vue({
    router,
    template: '<App/>',
    components: { App },
}).$mount('#app')

3.

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

1. 和上面的一样

   new Vue({
   router,
   render:function(h){
       return h(App);
   },
   }).$mount('#app')