Vue对象常用属性
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'] // 这里注册的属性可以在组件标签中添加
// props:{attr: String, num: Number} // 注册的属性指定数据类型
// props:{attr:{type: String, required: True, default:'默认值'}}
// 注册的属性加默认值和限制条件{属性值：{数据类型，必要性，默认值}}
},
}
// 调用
templates:`<div>{{outerattr}}</div>`
从外部传入数据方式：
<组件1 :outerattr="rootdata"></组件1>
组件自定义事件
- 将子组件中的代码中添加
this.$emit('自定义事件',数据) - 在组件标签中
@自定义事件名="外部函数" - 外部函数需要定义形参接收子组件传输的数据
<组件 @自定义事件="外部函数"></组件>
<script>
// 子组件定义
let 子组件 = {
...
methods:{func(){this.$emit('自定义事件',数据)}}
}
new Vue({
...
methods:{
xxx(数据形参){对数据形参进行处理，可以用于传值等}
}
})
</script>
mixin属性
我们可以将一些属性打包到一个对象中，这个对象中的属性与组件属性一致，有data、methods等属性。
这个对象以mixin注册到组件中，那么组件可以按照属性分类使用这些属性。
mixin一般用于提取多组件都会用到的数据方法等属性，以便各组件使用。
使用js导出mixin对象
其实就是正常的对象导出，不过这些属性对应组件要用到的属性：
// 举例 mixin/commonAttr.js
export default {
data() {
return {
name: '都可能用到的数据属性',
company: '公司信息',
icoImg: '公司ico图片地址'
}
},
created() {
console.log('数据创建完成')
}
}
引用mixin
- 局部注册
<template> <div>这里直接按照data的方式插值mixins中的插值{{company}}</div> </template> <script> // 组件中注册 import commonAttrs from "@/mixin/commonAttrs"; export default { ... mixins:[commonAttrs] } </script> - 全局注册
//main.js中对Vue实例直接进行mixin混入，后续整个工程的组件都会混入 import commonAttrs from "@/mixin/commonAttrs"; Vue.mixin(commonAttrs) // Vue.mixin(commonAttrs2) 全局也可以多混入几个 // 后续的所有组件都可以直接使用mixin对象中的属性。
