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

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

})

结言

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

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

作者简介

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

巴特西

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

结言

最新文章

热门文章