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

计算属性：

    
       {
   { message.split('').reverse().join('') }}
    

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

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

watch回调:

    
     {
   { fullName }}
    
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]    }  }}

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

// 绑定属性
    
    
data: {  isActive: true,  hasError: false}

    
data: {  classObject: {    active: true,    'text': false  }}

计算属性：

    
data: {  isActive: true,  error: null},computed: {  classObject: function () {    return {      active: this.isActive && !this.error,      'text-danger': this.error && this.error.type === 'fatal'    }  }}

// 数组
    
data: {  activeClass: 'active',  errorClass: 'text'}

自定义组件：

Vue.component('my-component', {  template: '
Hi
'})
    

    
data: {  styleObject: {    color: 'red',    fontSize: '10px'  }}

key的重要：

// 每次渲染key都会被重新渲染
    
    

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

key:

方法：

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

Vue.set(object, key, value)Vue.set(vm.userProfile, 'age', 27)vm.$set(vm.userProfile, 'age', 27)
    
    

事件修饰符：

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

// 点击事件将只会触发一次 

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

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

 {
   { message }}

修饰符：

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

 用户的输入值转为数值类型

过滤输入的首尾空白字符 

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

结言

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

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

作者简介

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