2.1 创建Vue 实例

2.2 new Vue有哪些选项

new Vue（options）有五个选项

红色: 好好学, 必学, 几句话就可以说明白的.
黄色: 高级属性,
绿色: 直接可以会
蓝色: 不常用, 可学可不学
紫色: 比较特殊, 需要讲解一下
灰色: 很不常用, 用的时候看文档

filter表面上很有用, 但实际没啥用, 尽量不要用它. 用methods来代替它.

vue的 data 有bug

2.3 el和data选项

el 和.$mount("") 一样

2.4 methods, components, 四个钩子

为什么组件地方的data 要使用函数而不是对象.
简单来说就是如果遇到同时引用这个组件问题的时候, 因为引入组件的时候是需要实例化(new Vue(Demo))2次, 地址相同一个地方修改了, 另一个地方也相应修改了. 也就是这个组件的内存地址是一样的. 但是是函数返回回来的对象则是不同的地址.

除了main.js里面data 可以写对象, 其他组件地方都要写函数形式.

methods有个bug, 就是每次渲染都会执行, 即使没有变化但是也会执行.

模块化就是把独立的功能放到一个地方

引入组件的3种方式:

console.log(window.Vue)

const Vue = window.Vue

Vue.config.productionTip = false
import Demo from './Demo.vue'

Vue.component("Demo2", {
  template: `
    <div>demo2</div>
  `
})

new Vue({
  components:{
    Demo,
    Demo3: {
      template: `
        <div>demo3</div>
      `
    }
  },
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4]
    }
  },
  template: `
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
      <Demo/>
      <Demo2/>
      <Demo3/>
      <hr>
      {{filter()}}
    </div>
  `,
  methods: {
    add(){
      this.n += 1
    },
    filter(){
      return this.array.filter(i => i % 2 === 0)
    }
  }
}).$mount('#ben')

组件: 可以组合的物件

文件名要用小写\
组件用大写开头

面试点: destroyed怎么用呢

2.5 Props

加:可以传data中的变量和methods的方法.
但是不加:, 传的就是字符串

//data中的n 
<Demo :message="n"/> 
//传的字符串n
<Demo message="n"/> 
<Demo :fn="add"/>

2.6 总结