Vue的属性有哪些？
-
el: 挂载点
-
data: 推荐用函数
data: {
n:0
}
data: function(){
return {
n: 0
}
}
import Demo from './demo.vue'
new Vue({
data: function(){
return {
n: 0
}
},
render: h=>h(X, [h(Demo), h(Demo)])
})
为啥推荐data用函数呢？
假设现在通过Import ... from Vue文件得到的一个组件，再render这个组件
-
如果data是对象
new Vue(Demo) 如果两次调用，那么两次调用都使用的是一个Data -
如果data是函数
new Vue(Demo) 如果两次调用，因为每次使用data, 都会生成一个全新的对象，不会出现两个组件共用同一个data
methods 每次都会更新执行，哪怕和自己没关系
组件
创建组件有3种方式：
-
创建一个文件 demo.vue
-
Vue.component('demo3', {definition})
-
把1和2结合起来
import Demo2 from './demo2.vue' // 第一种方式
Vue.component('Demo3', { // 第二种方式
template:`
<div>demo3333</div>
`
})
用new Vue({})生成的对象是实例，我们可以在实例里使用组件：
new Vue({
components: {
Demo2: Demo2
Demo4: { // 第三种方式
template:`
<div>demo4444</div>`
},
template: `
<div>
<Demo2></Demo2> // 在这里插入组件
<Demo3></Demo3>
</div>`,
}).$mount('#app')
我是入口，我就是实例； 我用别人，别人就是组件
我们可以组合多个组件
组件可以看做是实例中的实例
new Vue({
components: { // 组件内部的定义和实例的定义是一模一样的
Frank: {
data: function () {
return {
n: 0
}
},
template: `<div>Frank's n : {{n}}</div>`
}
},
data: function () {
return {
n: 0,
}
},
template: `
<div class="red">
{{n}}
<button @click="add">+1</button>
<hr>
<Frank></Frank>
</div>`,
methods: {
add() {
this.n += 1
},
},
}).$mount('#app')
界面如下：
那么我们优先使用哪一种呢？
第一种
因为第一种体现了模块化的思想
import Demo from './demo.vue'
new Vue({
components: {
Demo: Demo
},
})
ES6的新语法中，如果对象里，key和value一样，可以缩写为：
import Demo from './demo.vue'
new Vue({
components: {Demo},
})
组件要用大写开头
四个钩子
-
created
-
mounted
-
updated
-
destoryed 这个组件在页面上隐藏了
前面三个都好理解，但是destoryed咋体现？
为了体现这个功能
我们做一个简单的toggle组件，
点击按钮, div就出现，再点击，div就消失
组件部分代码如下：
Demo.js
<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data: function () {
return {
n: 0,
}
},
methods: {
add() {
this.n += 1
},
},
created(){
console.log('我出现在内存中，但没有在页面中')
},
mounted(){
console.log('我已经出现在页面中')
},
updated(){
console.log('更新了')
console.log(this.n)
},
destroyed() {
console.log('已经消亡了')
}
}
</script>
<style scoped>
</style>
main.js
const Vue = window.Vue
Vue.config.productionTip = false
import Demo from './demo.vue'
new Vue({
data: function(){
return {
visible: true
}
},
components: {Demo},
template: `
<div>
<button @click="toggle">toggle</button>
<Demo v-if="visible === true"></Demo>
</div>
`,
methods: {
toggle(){
// 每次点击，都把visible变量的值取反，这样就可以做到点击一次，出现，点击两次，消失
this.visible = !this.visible
}
},
}).$mount('#app')
在线例子可以查看：
同时我们可以做实验发现，组件destoryed之后，重新出现的那个组件是重新create的
举例：此时，我们+1，把结果加到3， 然后点击toggle, 组件消失，此时再点击toggle, 如果出现的结果是3，就证明还是之前的组件，如果出现的结果是0， 那么就是新产生的组件
可以看到当结果是3后，点击两次toggle, 出现的结果是0， 由此证明是新生成的组件
props:
传字符串
传值，用冒号
核心代码：
注意：message
最后效果：
在线测试
还可以传一个函数进去
下面的代码实现了：
点击组件demo的按钮, 外部的n+1, 更新的n用 :message再传进去内部组件，于是内部组件的n也同步更新
demo.vue
<template>
<div class="red">
这里是demo内部
{{message}}
<button @click="fn">call fn</button>
</div>
</template>
<script>
export default {
props: ['message', 'fn']
}
</script>
<style scoped>
.red {
background: coral;
border: 1px solid red;
}
</style>
main.js
const Vue = window.Vue
Vue.config.productionTip = false
import Demo from './demo.vue'
new Vue({
data: function () {
return {
n: 0
}
},
components: {Demo},
template: `
<div>
这里是外部的实例：{{n}}
<Demo :message="n" :fn="add"></Demo>
</div>
`,
methods: {
add() {
this.n += 1
}
}
}).$mount('#app')
本文为fjl的原创文章，著作权归本人和饥人谷所有，转载务必注明来源
