1.options的五类属性
- data数据
- props属性
- computed被计算出来的
- methods方法（面向对象的函数obj.function）
- watch观察
- el挂载点（用模版替换页面的中的哪一个模块）
- template html的内容（完整版使用）
- render渲染（与template二选一，非完整版用）
- directives指令
- filters过滤器（表面上很有用其实不常用，一般不用）
- components组件（如果在一个文件中引用另一个vue文件，就需要组件）
- mixins混入
- extends拓展
- provide提供
- inject注入
- mounted挂载之后
2.常用的options及其用法
1）el--挂载点
//使用$mount挂载
const vm = new Vue({
render(h) {
return h(Demo)
}
})
vm.$mount('#frank')//挂载到frank上去
//不使用$mount
const vm = new Vue({
el:‘#frank’
render(h) {
return h(Demo)
}
})
2）data--内部数据
- data可以是一个对象，也可以是一个函数，且优先使用函数，目的是为了组件的复用使得每个组件都可以有一份data的拷贝，防止不同组件修改数据时被相互覆盖。
- 组件中的data必须用函数
//data为函数时
data() {
return {
n: 0
}
},
//data为对象时
data:{
n: 0
},
3）methods--方法（事件处理函数或普通函数）
//事件处理函数：
methods: {
add() {
this.n += 1;
},
},
//主动调用：每次渲染都会执行一次
const vm = new Vue({
data: {
n: 0,
array: [1, 2, 3, 4, 5, 6, 7, 8]
},
template: `
<div class="red">
{{filterArray()}} //这是js的filter，不是vue的filter
</div>
`,
methods: {
filterArray() {
return this.array.filter(i => i % 2 === 0)
}
},
})
4）components--使用vue组件
- 创建组件的两种方式：一是直接创建.vue文件，.vue文件就是一个组件。组件最好用大写开头
- 什么是组件：可以和别人组合在一起的东西
- 如何使用demo.vue组件：
//方法1（优先使用）：首先将demo.vue引入到js，然后声明如下代码：
import Demo from './Demo.vue'
const vm = new Vue({
components: {
frank: Demo //frank1为名字，Demo为对应的值，也可以直接写为Demo：Demo，直接简写为Demo。
},
})
//方法2:
Vue.components('demo2', { template: `<div>demo2</div>` })
//方法3:还可以将方法1和2结合起来
components: {
frank: { template: `<div>demo222222</div>` }
},
//引入组建后就可以直接在template中引入：
template: `
<frank/>
`
5）生命周期钩子
- 实例出现在内存中--created
- 实例出现在页面中--mounted
- 实例更新了--updated（打印的永远是最新的数据）
- 实例消亡了--destroyed
6）props--外部属性
用来接收外部数据，由外部属性来传值
实例1：
//Demo.vue文件
<script>
export default {
props: ["message"], //从外部接收一个message，
};
</script>
//main.js文件
const vm = new Vue({
components: { Demo },
template: `
<div>
<Demo message = "你好我是message" />
</div>
`,
})
message = ""传的永远是字符串类型；
:message = "n"则根据n的值决定传的message的类型
3.methods和函数的区别
方法：面向对象概念，有对象的时候说方法，前面一定会有一个对象（obj.sayhi( )）
函数：数学概念
