Web前端-Vue.js必备框架（四）

image.png

Web前端-Vue.js必备框架（四）

计算属性：

<div id="aaa">
  {{ message.split('').reverse().join('') }}
</div>

<div id="b">
  <p>dashu: "{{ aaaa}}"</p>
  <p>dashu: "{{ ddd}}"</p>
</div>
var vm = new Vue({
  el: '#b',
  data: {
    aaaa: 'Hello'
  },
  computed: {
    ddd: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

<p>{{ rMessage() }}</p>

methods: {
  rMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

watch回调:

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'da',
    lastName: 'shu',
    fullName: 'da shu'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'da',
    lastName: 'shu'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

数据发生变化，执行异步或开销大的操作：

效果 效果

// 绑定属性
<div v-bind:class="{ active: isActive }"></div>

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text': false
  }
}

计算属性：

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

// 数组
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text'
}

自定义组件：

Vue.component('my-component', {
  template: '<p class="foo">Hi</p>'
})

<my-component class="boo"></my-component>

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '10px'
  }
}

key的重要：

效果

// 每次渲染key都会被重新渲染
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="email address" key="email-input">
</template>

v-if和v-show，v-if为销毁和重建，只有为真才渲染，v-show会渲染，频繁切换使用v-show。

key:

<div v-for="item in items" :key="item.id">
</div>

方法：

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

Vue.set(object, key, value)

Vue.set(vm.userProfile, 'age', 27)

vm.$set(vm.userProfile, 'age', 27)

<my-component v-for="item in items" :key="item.id"></my-component>

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

效果

事件修饰符：

.stop
.prevent
.capture
.self
.once
.passive

效果

// 点击事件将只会触发一次 
<a v-on:click.once="doThis"></a>

效果

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

.ctrl
.alt
.shift
.meta
.left
.right
.middle

<input v-model="message" placeholder="dashucoding">
<p> {{ message }}</p>

修饰符：

.lazy input事件触发后将输入框的值与数据进行同步

<input v-model.lazy="msg">

<input v-model.number="age" type="number"> 用户的输入值转为数值类型

过滤输入的首尾空白字符 <input v-model.trim="msg">

Vue.component('blog', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

努力努力再努力Jeskson