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

你的名字 2021-09-18 13:24 391阅读 0赞

![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]
        }
      }
    }

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

![效果][1240]

![效果][1240 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`的重要：

![效果][1240 2]

// 每次渲染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`:

方法：

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>

![效果][1240 3]

事件修饰符：

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

![效果][1240 4]

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

![效果][1240 5]

.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.number="age" type="number"> 用户的输入值转为数值类型

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

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

## 结言 ##

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

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

**作者简介**

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

![努力努力再努力Jeskson][Jeskson]

[image.png]: /images/20210724/bbf64a88fc4e46f0baa3479998f6444b.png
[1240]: /images/20210724/b2a8dd9bff4a4fcd96eddacb17e22441.png
[1240 1]: /images/20210724/62bcce0dbd0d46c49ab5ad002ddb132a.png
[1240 2]: /images/20210724/545536ffac094052b15e48adb4984835.png
[1240 3]: /images/20210724/aabbe902e34646f596a921095e3e0c92.png
[1240 4]: /images/20210724/2752e4edac9b4a08a587e8e505a5fd79.png
[1240 5]: /images/20210724/f6da790d9583432db47b0df3c7cb361c.png
[Jeskson]: /images/20210724/6bc90b991ba44cb4b6a3514d058402a7.png