Vue中需要注意的点

箭头函数的使用

new Vue({
  el: '#app',
  data: {
    show: true
  },
  created: () => {
    console.log(this.show)
  },
})

将created钩子写成箭头函数,这里的this将不再指向Vue对象,在浏览器中将会指向window对象,这是因为箭头函数并没有this,this会作为变量一直向上级词法作用域查找,直到找到为止

指令动态参数

Vue从2.6.0开始,可以用方括号括起来的JavaScript表达式作为一个指令参数,举个例子:

<div id="app">
  <input v-on:[event] = "doSomething">
  <button v-on:click="event = 'focus'">change</button>
</div>
new Vue({
  el: '#app',
  data() {
    return {
      event: 'input'
    }
  },
  methods: {
    doSomething () {
      console.log('sss')
    }
  },
})

这里将input的事件监听设置为一个动态的参数event,默认是监听点击事件,当点击change的时候,改为监听focus事件,动态参数预期会求出一个字符串,异常情况下值为null,null值可以用于移除绑定,任何其他非字符串类型的值都会触发一个警告

template中使用方法

methods中提供的方法大多数时候都是用来给其他方法调用的,但是它其实也可以像computed计算属性一样直接写在模板里,举个例子:

<div id="app">{{reversedMessage('hello')}}</div>
var app = new Vue({
  el: '#app',
  methods: {
    reversedMessage: function (message) {
      return message.split('').reverse().join('')
    }
  },
})

有了computed计算属性,为什么还要用methods呢?计算属性是基于响应式依赖进行缓存的,只在相关依赖发生改变时才会重新求值,而methods每次调用都会重新计算,调用methods时可以传参,进行指定计算,但是computed不行,这在遍历数组时十分有用

用key管理可复用元素

Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染,这么做会使Vue变得非常快,

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input key="username" placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input key="email" placeholder="Enter your email address">
</template>
<button @click="change">change</button>
var app = new Vue({
  el: '#app',
  data() {
    return {
      loginType: 'username'
    }
  },
  methods: {
    change () {
      this.loginType = this.loginType === 'username' ? 'email' : 'username'
    }
  }
})

.sync修饰符

在有些情况下,可能需要对一个prop进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源,因此Vue提供了sync修饰符,举个例子:

<div id="app">
  <span>{{title}}</span>
  <text-document v-bind:title.sync="title"></text-document>
</div>
Vue.component('text-document', {
  props: ['title'],
  template: `<button @click="change">change</button>`,
  methods: {
    change () {
      this.$emit('update:title', 'change')
    }
  },
})
new Vue({
  el: '#app',
  data() {
    return {
      title: 'default'
    }
  }
})

当调用this.$emit('update:title','change'),父组件中的title就会改变

表单输入修饰符

.lazy

在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步,可以添加lazy修饰符,从而转变为使用change事件进行同步,举个例子:

<input placeholder="lazy" v-model.lazy="msg" @input="input" @change="change">

.number

如果想自动将用户的输入值转为数值类型。可以给v-model添加number修饰符,这通常很有用,因为即使在type=“number”时,HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析,则会返回原始的值,举个例子:

<input placeholder="number" v-model.number="age" @input="input">

.trim

如果要自动过滤用户输入的首尾空白字符,可以给v-model添加trim修饰符,举个例子:

<input placeholder="trim" v-model.trim="trim" @input="input">

 

posted @ 2019-12-09 14:41  林Clown  阅读(349)  评论(0编辑  收藏  举报