Vue对象常用属性

数据属性data

数据属性的基本用法

new Vue({
    data:{
        '带引号的键'：值,
        url:"www.baidu.com" // 带引号的键
    }
})

在Vue实例中，我们通常会定义一些数据属性，这些数据可以直接被用于被挂载的标签中插值或绑定属性。数据属性在Vue对象的data属性中，但是可以直接通过对象.出来。

防止引用冲突的数据属性

常在Vue组件的定义中使用：

Vue.component('home',{
	template:``,
	data(){return{
		'数据对象键':'数据对象值'
	}}
})

因为对象是引用传值的，对于要复用的组件来说，直接将data属性绑定一个对象会造成引用冲突，所以我们通过函数每次产生一次数据对象传出。

方法属性methods

方法属性集合存储Vue对象中定义的函数，这里的属性也可以直接被直接.出。

new Vue({
    methods:{
        handleXxx(){
            console.log(this)  // vue对象本身
        },
    }
})

如果将方法属性中的函数作为插值调用函数()传入html界面，无论什么数据发生了更新，这个函数都会重新执行一遍，但我们只需要在相关数据发生变化时才需要重新执行，此时就需要介绍计算属性。

计算属性computed

• 只有函数体的相关数据发生变化时才会重新执行计算的函数集合
• 调用时会伪装成数据属性，要返回出计算（运行）结果
• 集合与Vue对象的computed属性

<div id="app">
    <input type="number" v-model.number="numList[0]">
    <input type="number" v-model.number="numList[1]">
    <input type="number" v-model.number="numList[2]">
    <input type="number" v-model.number="other">
    <p>{{getSum()}}</p>   调用时作为函数调用
    <p>{{sumList}}</p>  调用时作为数据属性使用
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {numList: [1, 2, 3], other: 0},  // 将此列表分元素绑定几个数字输入框，使其方便变化
        // 函数
        methods: {
            getSum() {
                console.log('普通函数执行了')
                let total = 0
                for (let num of this.numList) {
                    total += num
                }
                return total
            },
        },
		// 计算属性
        computed: {
            sumList() {
                console.log('计算属性函数执行了')
                let total = 0
                for (let num of this.numList) {
                    total += num
                }
                return total
            }
        }
    })
</script>

监听属性watch

监听简单理解就是对data数据进行一个change事件绑定，当数据发生变化时会触发一个函数的执行。

定义方式：

new Vue({
    watch:{
        属性名(){
          // 属性变化时触发的代码  
        },
    }
})

对输入框的数据进行监听：

<div id="app">
    <input type="text" v-model.trim="inputText">
    <p v-for="word in filterWord">{{word}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            inputText: '',
            hotWord: [
                "怎么装机","怎么装一台机器", "怎么养鸡",
                "怎会如此","鸡你太美", "现有鸡还是现有蛋",
            ],
            filterWord: this.hotWord,
        },
        methods: {},
        watch: {
            inputText() {
                this.filterWord = this.hotWord.filter(
                    word => word.indexOf(this.inputText) >= 0
                )
            }
        }
    })
</script>

• 对数据发生变化的事件控制更加的简单
• 不局限于对input框的数据变化做监听

组件属性components

用于注册子组件的属性，可以直接在内部书写，也可以在外部定义好对象后，在内部直接注册。

let 组件3 = {templates。。。}
components:{
    组件1:{templates。。。},
    组件2:{templates。。。},
    组件3
}

组件自定义属性props

注册和调用：

components:{
    组件1:{templates。。。
        props:['outerattr'] // 这里注册的属性可以在组件标签中添加
        },
}
// 调用
templates:`<div>{{outerattr}}</div>`

从外部传入数据方式：

<组件1 :outerattr="rootdata"></组件1>

组件自定义事件

• 将子组件中的代码中添加this.$emit('自定义事件',数据)
• 在组件标签中@自定义事件名="外部函数"
• 外部函数需要定义形参接收子组件传输的数据

<组件 @自定义事件="外部函数"></组件>
<script>
	// 子组件定义
    let 子组件 = {
        ...
        methods:{func(){this.$emit('自定义事件',数据)}}
    }
    
    new Vue({
        ...
        methods:{
            xxx(数据形参){对数据形参进行处理，可以用于传值等}
        }
    })
</script>