Vue-构造选项

options五类属性

数据：data数据、props属性、propsData（propsValue）、computed被计算出的、
methods方法、watch观察
方法与函数：
方法：面向对象，一定依附于对象 obj.sayhi()
函数：数学 sayhi()
都是function
DOM：el容器、template html 完整版用、render html 非完整版用、renderError
生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured
资源：directives指令、filters过滤器、components组件
组合：parent、mixins、extends、provide、inject

属性

el：挂载点，可以替换为$mount

el: '#app',
.$mount( '#app')

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，那另一次调用也会发生改变
如果data是函数，
new Vue(Demo) 如果两次调用，因为每次使用data, 都会生成一个全新的对象，不会出现两个组件共用同一个data

method：方法，事件处理函数或者是普通函数
methods 每次都会更新执行，哪怕和自己没关系
component：Vue组件
创建组件有3种方式：

创建一个文件 demo.vue
Vue.component('demo3', {definition})
把1和2结合起来

import Demo2 from './demo2.vue'  // 第一种方式

Vue.component('Demo3', {   // 第二种方式
    template:`
    demo3333
    `
})

用new Vue({})生成的对象是实例，我们可以在实例里使用组件：
new Vue({
    components: {
        Demo2: Demo2
        Demo4: {   // 第三种方式
        template:`
       demo4444`

    },
    template: `
            
           // 在这里插入组件
        
     `,
}).$mount('#app')

组件可以组合起来，实例中的实例

new Vue({
    components: { // 组件内部的定义和实例的定义是一模一样的
        Frank: {
            data: function () {
                return {
                    n: 0
                }
            },
            template: `Frank's n : {{n}}`
        }
    },
    data: function () {
        return {
            n: 0,
        }
    },
    template: `
            
                {{n}}
                
                
                
            `,
    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 实例从页面和内存中消亡了
体现destoyred，制作一个简单的toggle组件，点击出现再点击消失

Demo.js

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: `
            
                
                
            
    `,
    methods: {
        toggle(){
          // 每次点击，都把visible变量的值取反，这样就可以做到点击一次，出现，点击两次，消失
            this.visible = !this.visible
        }
    },

}).$mount('#app')

同时我们可以做实验发现，组件destoryed之后，重新出现的那个组件是重新create的
举例：此时，我们+1，把结果加到3，然后点击toggle, 组件消失，此时再点击toggle, 如果出现的结果是3，就证明还是之前的组件，如果出现的结果是0，那么就是新产生的组件
可以看到当结果是3后，点击两次toggle, 出现的结果是0，由此证明是新生成的组件

props: 外部数据，也叫属性
message="n" 传字符串
:message="n" 传 this.n 数据，用冒号
:fu="add" 传 this.add 函数

demo.vue

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: `
            
               这里是外部的实例：{{n}}
                
            
    `,
    methods: {
        add() {
            this.n += 1
        }
    }

}).$mount('#app')

Vue-构造选项

options五类属性

属性

你可能感兴趣的:(Vue-构造选项)