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

<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')
  }
 },
})

<div id="app">{{reversedMessage('hello')}}</div>

var app = new Vue({
 el: '#app',
 methods: {
  reversedMessage: function (message) {
   return message.split('').reverse().join('')
  }
 },
})

<div id="app">
  <template v-if="loginType === 'username'">
   <label>Username</label>
   <input placeholder="Enter your username">
  </template>
  <template v-else>
   <label>Email</label>
   <input placeholder="Enter your email address">
  </template>
  <button @click="change">change</button>
</div>

var app = new Vue({
 el: '#app',
 data() {
  return {
   loginType: 'username'
  }
 },
 methods: {
  change () {
   this.loginType = this.loginType === 'username' "htmlcode">

<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>



现在切换，每次都会重新渲染，但是label元素还是会被复用，因为它没有加唯一key值


v-if与v-for一起使用


Vue的风格指南不推荐同时使用v-if与v-for，当项目中的eslint继承了@vue/standard时，同时使用就会编译报错，但是可以通过在模版上加<!-- eslint-disable -->进行忽略，同时当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if 将分别重复运行于每个v-for循环中


对象变更检测


在Vue中对于已经创建的实例，不允许动态添加根级别的响应式属性，但是我们知道可以通过Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性，那如果需要为已有对象赋值多个新属性呢？举个例子：




<div id="app">{{user.name}}-{{user.age}}-{{user.sex}}</div>




var app = new Vue({
 el: '#app',
 data() {
  return {
   user: {
    name: 'xxx'
   }
  }
 },
 created() {
  this.user = Object.assign({}, this.user, {
   age: 18,
   sex: 'name'
  })
 },
})



可以用Object.assign为这个对象重新赋值，这样就能添加多个新的响应式属性


内联方法访问原始DOM事件


有时在模版中调用方法时，我们需要向方法中传参数，但是同时又要传递原始的DOM事件，怎么处理呢？举个例子：




<div id="app">
 <button @click="share('share info', $event)">share</button>
</div>





var app = new Vue({
 el: '#app',
 data() {
  return {
   user: {
    name: 'xxx'
   }
  }
 },
 methods: {
  share (info, event) {
   console.log(info, event)
  }
 },
})



如例子所示，可以用特殊变量$event把它传入方法


once、passive事件修饰符


Vue中提供了多个事件修饰符， once、passive是后面新增的两个，once用于限定事件只触发一次，passive用于修饰的事件发生后立即触发，用于提升移动端性能


表单输入修饰符


.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">



子组件替换/合并已有的特性


在Vue中对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入type="text"就会替换掉 type="date"并把它破坏！庆幸的是，class和 style特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值，举个例子：




<div id="app">
 <base-input type="text" class="out"></base-input>
</div>




Vue.component('base-input', {
 template: `<input type="date" placeholder="replace" class="default">`
})
new Vue({
 el: '#app',
})



在上例中input的type值为date，class为deafault，在使用子组件时，向子组件中传入type="text" class="out"，此时input的type值会被替换为text，class值会被合并为"default out"，那么如果想要禁用属性继承怎么办呢？可以在组件的选项中设置inheritAttrs:false，举个例子：




Vue.component('base-input', {
 inheritAttrs: false,
 template: `<input type="date" placeholder="replace" class="default">`
})



但是inheritAttrs:false选项不会影响style和class的绑定，因此style和class还是会合并


.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就会改变


总结


这篇文章对Vue中一些容易忽视的点进行了简单的总结，希望看完之后能对大家有所帮助。也希望大家多多支持。