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. 构造选项
2.1 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
- 等等
这里面有些常用有些不常用，常用的着重记就好。
2.2 options中的 el 、 data 、method属性用法
el属性： 表示组件或实例的挂载点
new Vue({
el:'#app', // 表示挂载在id为app的元素上
render:h => h(demo)
})
// 又或者是
new Vue({
render:h => h(demo)
}).$mount('#app')
data属性：表示当前Vue实例的内部数据
可以使用对象和函数写法，优先使用函数写法，是为了防止重复渲染相同的组件引用同一个内部数据。
methods属性：里面是事件处理函数或者是普通函数
new Vue({
data(){
return {n:0} // 内部数据
},
template:`
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
`,
methods:{
add(){
this.n++
}
}
}).$mount('#app')
但是当前methods里面的方法都会在dom重新渲染时执行。
2.3 compomnets 组件
表示使用Vue组件，使用时注意大小写(组件名建议首字母大写，文件名建议小写，为防止不分辨大小写的系统造成失误)
- 组件的第一种使用方法
新建一个.vue文件，然后使用import引入
import Demo from './demo.vue'
new Vue({
components:{ // 在这里声明并且取名字
Akane:Demo
},
data(){
return {
n:0,
array:[1,2,3,4,5,6]
}
},
template:`
<div id="app">
<Akane/> // 在这里当做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('Demo2',{ // 在全局声明
template:`
<div>demo2</div>
`
})
new Vue({
data(){
return {
n:0,
array:[1,2,3,4,5,6]
}
},
template:`
<div id="app">
<Demo2/> // 在这里引用
<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:{
Akane:x // 在这里声明
},
data(){
return {
n:0,
array:[1,2,3,4,5,6]
}
},
template:`
<div id="app">
<Akane/> // 在这里使用
<hr>
{{arrayFilter()}}
<button @click="add">+1</button>
</div>
`,
methods:{
add(){
this.n++
},
arrayFilter(){
return this.array.filter(n => n % 2 ===0)
}
}
}).$mount('#app')
若命名与组件名相同，可以缩写成components: {Demo},
2.4 四个钩子
- created -当实例出现在内存中执行指定函数
- mounted -实例出现在页面中
- updated - 实例更新了
- destroyed -实例从页面和内存中消亡了
实例演示。引入一个Demo组件，显示任意内容，然后创建一个按钮，点击之后显示/隐藏该内容，可以在控制台看到改组件内容产生、出现、更新以及消亡。
new Vue({
components: { Demo },
data: {
visible: true,
},
template: `
<div>
<button @click="toggle">toggle</button>
<hr>
<Demo v-if="visible"/>
</div>
`,
methods: {
toggle() {
this.visible = !this.visible
},
},
}).$mount("#akane")
2.5 props 外部属性
Demo.vue
<template>
<div class="red">
{{message}} // 这里使用属性
</div>
</template>
<script>
export default {
props:['message'] // 这里声明props外部属性，方便外部传值
}
</script>
<style scoped>
.red{
color: red;
}
</style>
引用组件之后添加别的内容。
new Vue({
// render: (h) => h(Demo),
components: { Demo },
data: {
visible: true,
n: 0,
},
template: `
<div>
<Demo :message="n" :fn="add"/> // 这里props传值
{{n}}
</div>
`,
methods: {
add() {
this.n += 1
},
},
}).$mount("#akane")
<Demo message="n" >默认是将字符串n传值给 message ，加上引号之后<Demo :message="n" >就变为将变量 n 的值传给 message，传函数也是一样<Demo :fn="add" >
网友评论