一、options里有什么（options有五类属性）

image.png

• filters表面看上去很有用，但实际上没什么用，尽量不去用它

1. el—挂载点（可用$mount代替）

new Vue({
    el: "#app"
})
//或这样写
new Vue({
    data:{}
}).$mount(elementOrSelector: '#app')

2. data—内部数据

支持对象和函数，优先使用函数（为什么要使用函数？为了确保组件每次调用的data都是一个新的data，而不是共用一个data）

3. methods—方法

它有一个特性，算是bug，每次渲染数据，methods里的方法都要跟着执行一次，即使这个执行的结果毫无变化，所以这就引出了computed

4. components—组件

• 被别人用就叫组件，你是入口就叫实例；
• Vue组件，注意大小写；文件名最好全用小写字母，可以加下划线，因为windons分不清大小写！！！！！！根据经验，组件名用大写字母开头，为了避免跟原生html混淆！！！！！！！（而且不要全部大写！！！）

import Demo from './demo.vue'
import Demo from './Demo.vue'  //这样起文件名windows会分不清是哪个文件，所以文件名全都用小写字母

• 它有三种引入方式；

  
  第一种.png

//第二种
//这个叫组件
Vue.compotent(id:'Demo2' ,definition:{
 template: `
      <div>demo222</div>
`
})  //definition里的选项和new Vue里的选项一样

//这个叫实例
new Vue({
    el: "#app",
    template:`
    <div>
      {{n}}
      <Demo2/>
      <hr/>
    </div>
    `
})

第三种.png

5. 四个钩子

• created——实例出现在内存中，但还没有出现在页面中；
• mounted——实例出现在页面中；
• updated——实例更新了；只要data中的数据有变化就会触发它；
• destroyed——实例消亡了；（如何解释？例如引入一个组件，用一个按钮v-if来控制组件是否出现在页面中，当v-if为false时，组件消失，这时就会触发这个组件的destroyed钩子，而且v-if控制的显示，每次都会重新创建组件）

6. props——外部数据(它是写在子组件里的)

• 在子组件中

  
  子组件.png
• 父组件中该如何传值进去呢？
  ①message="n"，这样传进去的就是字符串n；
  ②:message="n"，前面加个冒号，穿的n是this.n;（牢记：前面不加冒号，即不绑定，你后面传的永远是字符串，即使你传0，那也是字符串0；前面加上冒号，你传的就是引号里面的变量，这时引号里的相当于就是js代码）
  ③:fn="add"，当然也可以传this.add函数进去；
  image.png
  image.png
• 很重要的一点，props的大小写！！！！
  ①props的变量最好全用小写，因为HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符；如果你一定要用大写，那么在绑定属性的时候，一定要转成连字符形式；

//子组件中
props: ['myMoney']

//父组件中的子组件绑定属性时，要转成连字符

<Child :my-money = "allMoney">   //你用小写就不会有这些问题，所以props全用小写吧！！！