属性和方法
  1. 每个Vue实例会代理其data对象里所有的对象
var app = new Vue({
    data: {
        message : ''
    }
})

也就是说,可以直接通过:

app.message = 'xxx'

来改变data中出现的属性, 从而引发视图的变化。
2. 注意只有这些被代理的属性是响应的。
如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
3. Vue实例中,带有前缀 $ 的属性会有特殊作用, 比如:

var data = { a: 1 }
var vm = new Vue({
    el: '#example',
    data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

vm.$watch('a', function(newVal, oldVal){
    // 此方法在属性a改变后发生
})

生命周期
  1. beforeCreate : 组件实例刚被创建,组件属性计算之前(data等)
  2. craeted : 组件实例创建完成,属性已绑定,但DOM未生成,$el属性还不存在。
  3. beforeMount : 模板编译/挂载之前
  4. mounted : 模板编译/挂载之后
  5. beforeUpdate : 组件更新之前
  6. updated : 组件更新之后
  7. activated : for keep-alive 组件被激活时调用
  8. deactivated : for keep-alive 组件被移除时调用
  9. beforeDestroy : 组件销毁之前
  10. destroyed : 组件销毁之后

模板语法
  • v-once : 这个节点上的所有绑定,单次插值,之后数据不会再变化
  • v-html : 一般情况 {{ }} 解析出的数据为纯文本,想要输出html内容则可如下,但数据绑定将被忽略,标签中的内容也会被会忽略:
<div id="app">
    <p>{{ message }}</p>
    <p v-html="htmltest"></p>
</div>

new Vue({
    el: '#app',
    data: {
    message: '<span>Hello Vue.js!</span>',
    htmltest: '<span class="test-1">it is html content!</sapn>'
    }
})
  • v-bind : 对于html属性,{{ }}不能用于此。取而代之的是 v-bind
<div v-bind:id="dynamicId"></div>

new Vue({
  el: '#app',
  data: { dynamicId: 'what' }
})
  • 表达式 : 除了变量,还可使用表达式;每个绑定只能包含单个表达式;只能访问白名单中的全局变量,如 Math 和 Date,不要试图访问用户在模板表达式中定义的全局变量。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
  • filters : 类似shell中的管道;
{{ message | filterA('arg1', arg2) }}

new Vue({
  data: {
    message : 'xxx'
  }
  filters: {
    capitalize: function (value, arg1, arg2) {
      //value
    }
  }
})

过滤器函数总接受表达式的值作为第一个参数。
字符串 ‘arg1’ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

  • 缩写 :
<a v-bind:href="url"></a>           //可写为:
<a :href="url"></a>
<a v-on:click="doSomething"></a>    //可写为:
<a @click="doSomething"></a>

计算属性
  • 计算属性 vs 表达式

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

    但若使用频繁,处处如此调用,往往是不可取的。计算属性虽然不是普通的属性,但其也可以被当作一种属性,且依赖于其他属性。如下:

    computed: {
       // 计算属性的 getter方法
       reversedMessage: function () {
           return this.message.split('').reverse().join('')
       }
    }

    计算属性的 getter 方法干净无副作用…

  • 计算属性 vs 函数

    <p>反转语句 : {{ reverseMessage() }}<\/p>
    
    methods: {
     // 计算属性的 getter方法
     reversedMessage: function () {
       return this.message.split('').reverse().join('')
     }
    }

    两种方式得到的结果是完全一样的,不同的地方在于计算属性是基于其依赖的缓存
    至于是否需要缓存,就看实际情况啦

  • 计算属性 vs $WATCH

    $watch 用于监听已有的普通属性,若是沿用上面的例子,那么思路就是指定message以及reversedMessage两个属性,之后监听message属性的变化的同时,改变reversedMessage的值。
    但初始化时必须将reversedMessage手动设置为message的倒序字符串。
    上面例子似乎不妥,所以换用下面的例子:

    data: {
     firstName: 'aaa',
     lastName: 'bbb',
     fullName: 'aaabbb'
    },
    computed: {
     computedFullName: function () {
       return this.firstName + this.lastName;
     }
    },
    watch: {
     firstName: function (val) {
       this.fullName = val + ' ' + this.lastName
     },
     lastName: function (val) {
       this.fullName = this.firstName + ' ' + val
     }
    }

    无论是获取computedFullName还是获取fullName的值都是一样的。但明显计算属性的代码更简洁精炼。

  • 计算属性 set 方法

    <p>完整名字 : {{ fullName }}</p>
    
    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]
       }
     }
    }
Logo

前往低代码交流专区

更多推荐