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这个组件

1. 如果data是对象
   new Vue(Demo) 如果两次调用，那么两次调用都使用的是一个Data，如果其中一次修改了data，那另一次调用也会发生改变

2. 如果data是函数，
   new Vue(Demo) 如果两次调用，因为每次使用data, 都会生成一个全新的对象，不会出现两个组件共用同一个data

• method：方法，事件处理函数或者是普通函数
  methods 每次都会更新执行，哪怕和自己没关系

• component：Vue组件
  创建组件有3种方式：

1. 创建一个文件 demo.vue
2. Vue.component('demo3', {definition})
3. 把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 实例从页面和内存中消亡了
  体现destoyred，制作一个简单的toggle组件，点击出现再点击消失

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="n" 传字符串
  :message="n" 传 this.n 数据，用冒号
  :fu="add" 传 this.add 函数

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')