vue @click 多个事件_《Vue构造选项的入门属性》

创建 ​Vue 实例

const vm = new Vue(options)

//有时可以直接这样写
new Vue(options)

• 这样就构造出了​一个Vue实例，这个实例会根据你给的选项，得出一个对象，这个对象我们通常把它命名为​vm(​ViewModel​的缩写)
• ​vm​对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新
• ​options是​​一个对象，是new Vue的参数，一般称之为选项或​构造选项​

options​里面有什么？

根据尤雨溪的文档，进入文档后搜索“选项”，即可得到所有相关文档。

选项一共分为五大类

数据：​ data、​ props、​ propsData、​ computed、​ methods、​ watch
DOM：​ el、 template、​ render、​ renderError、
生命周期钩子：​ beforeCreate、​ created、​ beforeMount、​ mounted、​ beforeUpdate、​ updated、​ activeted、​ deactiveted、​ beforeDestroy、​ destroyed、​ errorCaptured
资源：​ directives、​ filters、​ components
组合：​ parent、​ mixins、​ extends、​ provide、​ inject​
其他：后面再了解

这里先讲解9个入门属性

1. 数据：el - 挂载点

提供一个在页面上已存在的 ​DOM 元素作为 ​Vue 实例的挂载目标。可以是 ​CSS 选择器，也可以是一个 ​HTMLElement 实例。

//html代码
<div id="name">知乎拉布拉多多w</div>

//js代码
new Vue({
    el:'#name'
})

//or
new Vue({

}).$mount('#name')

2. 数据：data - 内部属性

用于存储内部的属性，​data​可以是一个对象，也可以是一个函数。

但组件内的​data​必须是函数，这是因为组件可能被用来创建多个实例。如果 data 仍然是一个的对象，则所有的实例将共享引用同一个数据对象！

通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

//html代码
<div id="demo">
   {{n}}
</div>

//js代码
new Vue({
    el: '#demo',
    data: {
        n:0
    }    
})

//or
new Vue({
    el: '#demo',
    data() {
        return{
          n:0
        }
    }    
})

页面将会展示数字​0​

3. 数据：methods - 方法

用于存放事件处理函数或者是普通函数，其特点是每次渲染都会执行

事件处理函数

//html代码
<div id="demo">
    {{n}}
    //当用户点击按钮就将数字+1
    <button @click="add">+1</button>
</div>

//js代码
new Vue({
    el: '#demo',
    data: {
        n: 0
    },
    methods:{
        add(){
            this.n += 1
        }
    }
})

普通函数

//html代码
<div id="demo">
    {{filter()}}
</div>

//js代码
new Vue({
    el: '#demo',
    data: {
        array: [1, 2, 3, 4, 5, 6, 7, 8]
    },
    methods:{
        filter(){
            return this.array.filter(i => i % 2 === 0)
        }
    }
})

4. 资源：components - 组件

可以创建一个​.vue文件的组件，然后在实例里引用这个组件使用

//demo.vue代码
<template>
    <div>18</div>
</template>

//js代码
import Demo from './Demo.vue'   //引入.vue组件
new Vue({
    el:'#demo',
    components: {
        Age: Demo
    },
    template:`
        <Age/>   //使用.vue组件
    `
})

5. 钩子：created - 实例出现在内存中

在实例创建完成后被立即调用。使用浏览器控制台的​debugger​可以看到，页面还没渲染就开始执行​created​函数了

//html代码
<div id="demo">
    {{n}}
    <button @click="add">+1</button>
</div>

//js代码
new Vue({
    el: '#demo',
    data: {
        n: 0
    },
    methods:{
        add(){
            this.n += 1
        }
    },
    created(){
        debugger
	    alert('实例执行完毕！')
	}
})

6. 钩子：mounted - 实例出现在页面中

实例出现在页面中执行​mounted​函数。和​created​相反，​mounted是实例渲染完成后才执行函数

//html代码
<div id="demo">
    {{n}}
    <button @click="add">+1</button>
</div>

//js代码
new Vue({
    el: '#demo',
    data: {
        n: 0
    },
    methods:{
        add(){
            this.n += 1
        }
    },
    mounted(){
        debugger
	    alert('实例执行完毕！')
	}
})

7. 钩子：updated - 实例更新了

实例更新就执行​updated​函数。每当我点击​button​实例就会更新就会执行updated函数

//html代码
<div id="demo">
    {{n}}
    <button @click="add">+1</button>
</div>

//js代码
new Vue({
    el: '#demo',
    data: {
        n: 0
    },
    methods:{
        add(){
            this.n += 1
        }
    },
    mounted(){
        console.log('呀！我被点击了！')
    }
})

8. 钩子：destroyed - 实例消亡了

//demo.vue代码
<template>
    <div id="demo">{{n}}</div>
</template>
<script>
    export default {
        el: '#demo',
        data(){
            return{
                n: '页面'
            }
        },
        destroyed() {
            console.log('页面被消除了！')
        }
    }
</script>


//js代码
import Demo from './Demo.vue'
new Vue({
    el: '#demo',
    components: {Demo},
    data: {
        visible: true
    },
    template: `
        <div>
            <button @click="toggle">toggle</button>
            <hr>
            <Demo v-if="visible === true"/>
        </div>
    `,
    methods: {
        toggle() {
            this.visible = !this.visible
        }
    }
})

9. 数据：props - 外部属性

​props​可以从外部接受数据

//html代码
<div id="demo"></div>

//demo.vue代码
<template>
    <div>
        我是内部的：{{message}}
        <hr>
        <button @click="fn">+1</button>
    </div>
</template>

<script>
    export default {
        el:'#demo',
        props:['message', 'fn']   //接收外部的数据
    }
</script>

//js代码
import Demo from './Demo.vue'  //引入demo.vue组件
new Vue({
    components: {Demo},
    el:'#demo',
    data: {
        n: 0
    },
    template: `
        <div>
            我是内部的:{{n}}
            <Demo :message="n" :fn="add"/>	//把这里的n和add函数传给demo.vue组件
        </div>
    `,
    methods: {
        add() {
            this.n += 1
        }
    }
})

​<Demo :message="n" :fn="add"/> 这句代码是将​n和​add，从字符串转换为变量和函数，再传给外部组件的