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
posted @ 2020-11-02 15:53  疯狂的严先生  阅读(47)  评论(0编辑  收藏