Vue 奇奇怪怪的小技巧
目录
- 1.v-for 循环对象
- 2.动态事件
- 3.“双向绑定” .sync
- 4.获取原始DOM事件
- 5.小型状态管理仓库
- 6.构造器 Vue.extend
1.v-for 循环对象
有时候我们接口所返回数据的是一个对象，但是如果属性太多了，且是一个list，咱们不能一个一个写吧
像这样
<p>{{obj.id}}</p>
<p>{{obj.name}}</p>
<p>{{obj.age}}</p>
...
那如果有更多呢！
老严今年年初之前就碰到过一个接口返回的数据是这样
{
data1:"xxx",
data2:"xxx",
data3:"xxx",
data4:"xxx",
data5:"xxx",
...
data72:"xxx",
}
一个一个复制？来看看 v-for 的操作吧
html
<div id="app">
<p v-for="(val, key, index) in info">{{index}} - {{key}} - {{val}}</p>
</div>
js
new Vue({
el: '#app',
data: {
info: {
'id': 1,
'name': '严老师',
'age': '24'
}
}
})
2.动态事件
某些业务场景下，我们需要动态修改事件
我们可以这样来
html
<div id="app">
<!-- 动态绑定 event -->
<input v-on:[event] = "print" v-model="text" />
<!-- 点击之后改为 input -->
<button v-on:click="event = 'input'">Switching events</button>
</div>
js
new Vue({
el: '#app',
data: {
text:"",
event: 'focus'
},
methods:{
print () {
console.log(this.text)
}
}
})
3.”双向绑定“ .sync修饰符
在项目中，我们经常会操作修改父子组件，我们可能需要对一个 prop 进行“双向绑定”。
或许 2.3.0+ 新增 的 .sync 语法糖能够帮到你
html
<div id="app">
<p>{{title}}</p>
<component-text v-bind:title.sync="title"></component-text>
</div>
js
// 组件
Vue.component('componentText', {
props: ['title'],
template: `<button @click="modifyData">modifyData {{title}} </button>`,
methods: {
modifyData() {
// 通知父组件 我们要修改 title 改为 hello
this.$emit('update:title', 'hello')
}
},
})
new Vue({
el: '#app',
data: {
title: 'default'
}
})
看看效果
4.获取原始DOM事件
有时候需要在模板中需要获取到原始的 DOM事件
html
<div id="app">
<!-- 传入 $event -->
<button @click="getEvent($event)">$event</button>
</div>
js
new Vue({
el: '#app',
methods:{
getEvent(e){
console.log(e)
}
}
})
5.小型状态管理仓库
vuex 好用吗？ 答案是肯定的，但是不是大型项目使用 vuex ,显得过于繁琐冗余 ，所以推荐使用 2.6.0 新增的 Vue.observable()
返回的对象可以直接用于 渲染函数 和 计算属性 内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景
//observable.js
import Vue from 'vue';
export let store = Vue.observable({name:'store 中的老严'});
export let mutations={
changeName(name){
store.name=name;
}
}
home.vue
<template>
<div>
<p>{{ name }}</p>
<button @click="changeName(nameONE)"> 修改name </button>
</div>
</template>
<script>
import { store, mutations } from "../observable";
export default {
data() {
return {
nameONE: "Home页面的老严",
};
},
computed: {
name() {
return store.name;
},
},
methods: {
changeName: mutations.changeName,
},
};
</script>
看看效果吧
6.构造器 Vue.extend
在实际业务开发中我们很少使用 Vue.extend ,基本上是独立组件开发会使用到它，当然如果你觉得 extend 写法符合你的开发思维，加油你是最棒的
html
<div id="baidu"></div>
<baidu></baidu>
js
let baiduExtend = Vue.extend({
template: "<p><a :href='linkUrl'>{{linkName}}</a></p>",
data: ()=> {
return {
linkName: '百度',
linkUrl: 'https://www.baidu.com'
}
}
})
//扩展实例构造器是需要挂载的，我们再进行一次挂载
new baiduExtend().$mount('baidu');
//还可以通过HTML标签上的id或者class来生成扩展实例构造器
new baiduExtend().$mount('#baidu');
结果就是这样了
<p><a href="https://www.baidu.com">百度</a></p>
<p><a href="https://www.baidu.com">百度</a></p>
参考
- https://cn.vuejs.org/v2/api/#Vue-observable
- https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
- https://cn.vuejs.org/v2/api/index.html#Vue-extend
