Vue构造选项
1.什么是Vue的构造选项
使用过jQuery的小伙伴 都知道当我们在使用jQuery获取一个元素的时候返回的并不是对象本身，而是一个包含可以操作这个元素的方法和属性的API对象，Vue实例也是如此
const vm = new Vue(options); // 这就是一个Vue实例 前面变量声明可以不写 参数options就是构造选项
把Vue的实例命名为vm是尤雨溪的习惯,我们应该沿用
vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新vm的构造函数是Vue,按照ES6的说法，vm所属的类是Vue
optioins是new Vue的参数，一般称之为选项或构造选项
2.options的五类属性
- 数据：data、props、propsData、computed、methods、watch
- DOM：el、template、render、renderError
- 生命周期钩子(函数): beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed，errorCaptured
- 资源:directives、filters、components
- 组合:parent、mixins、extends、provide、inject
- 等等
这里面有些常用有些不常用，常用的着重记就好
3.options中的 el 与 data属性用法
el属性： 表示组件或实例的挂载点
new Vue({
el:'#app', // 表示挂载在id为app的元素上
render:h => h(demo)
})
也可以写成：
new Vue({
render:h => h(demo)
}).$mount('#app')
data属性：表示当前Vue实例的内部数据
支持对象和函数写法，优先使用函数写法
new Vue({
data(){
return {n:0} // 内部数据
},
template:`
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
`,
methods:{
add(){
this.n++
}
}
}).$mount('#app')
为什么要优先使用函数?
为了防止相同的组件引用同一个内部数据
methods属性
里面是事件处理函数或者是普通函数
new Vue({
data(){
return {n:0} // 内部数据
},
template:`
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
`,
methods:{ // 方法一定写在里面 否则就会报错说add()没有定义
add(){
this.n++
}
}
}).$mount('#app')
但是当前methods里面的方法都会在dom重新渲染时执行
4.compomnets 组件
表示使用Vue组件，使用时注意大小写(建议首字母大写)
- 组件的第一种使用方法
新建一个.vue文件，然后使用import引入
import Demo from './demo.vue'
new Vue({
components:{ // 在这里声明并且取名字
Xiaoou:Demo
},
data(){
return {
n:0,
array:[1,2,3,4,5,6]
}
},
template:`
<div id="app">
<Xiaoou/> // 在这里当做HTML使用
<hr>
{{arrayFilter()}}
<button @click="add">+1</button>
</div>
`,
methods:{
add(){
this.n++
},
arrayFilter(){
return this.array.filter(n => n % 2 ===0)
}
}
}).$mount('#app')
- 组件的第二种使用方法
Vue.component('Demo3',{ // 在全局声明
template:`
<div>你好</div>
`
})
new Vue({
components:{
Xiaoou:Demo
},
data(){
return {
n:0,
array:[1,2,3,4,5,6]
}
},
template:`
<div id="app">
<Demo3/> // 在这里引用
<hr>
{{arrayFilter()}}
<button @click="add">+1</button>
</div>
`,
methods:{
add(){
this.n++
},
arrayFilter(){
return this.array.filter(n => n % 2 ===0)
}
}
}).$mount('#app')
- 第三种方式前两种结合起来
const x = { // 定义成对象
template:`
<div>你好</div>
`
}
new Vue({
components:{
Xiaoou:x // 在这里声明
},
data(){
return {
n:0,
array:[1,2,3,4,5,6]
}
},
template:`
<div id="app">
<Xiaoou/> // 在这里使用
<hr>
{{arrayFilter()}}
<button @click="add">+1</button>
</div>
`,
methods:{
add(){
this.n++
},
arrayFilter(){
return this.array.filter(n => n % 2 ===0)
}
}
}).$mount('#app')
优先使用第一种方式，模块化使用
5.常用的生命周期函数
- created 当实例出现在内存中执行指定函数
- mounted -实例出现在页面中
- updated - 实例更新了
- destroyed -实例从页面和内存中消亡了
6.props 外部属性
demo.vue
<template>
<div id="app">
{{message}} // 这里使用属性
</div>
</template>
<script>
export default {
props:['message'] // 这里声明props外部属性，方便外部传值
}
</script>
<style scoped>
.red{
color: red;
}
</style>
引用组件
import Demo from './demo.vue'
new Vue({
components:{Demo},
template:`
<div>
<Demo message="欧阳"/> // 这里props传值
</div>
`,
methods:{
des(){
this.visible = !this.visible
}
},
data:{
visible:true
}
}).$mount('#app')
message里面传值默认是字符串
<Demo message="欧阳"/> // 这里props传值
如果要传变量
<Demo ：message="欧阳"/> // 加上： 则引号里面就是JS代码
也可以传递方法
<div id="app" @click="message">
点我
</div>
new Vue({
components:{Demo},
template:`
<div>
<Demo :message="fn"/>
</div>
`,
methods:{
des(){
this.visible = !this.visible
},
fn(){
console.log('调用了fn')
}
},
data:{
visible:true
}
}).$mount('#app')
