lee_ming
lee_ming

温故而知新之VUE（二）

模板语法

插值

#文本
Mustache语法(双大括号)
v-once指令——只执行一次性的插值，数据改变，内容不会进行更新
#原始HTML
v-html指令 容易受XSS攻击，请注意使用
#JavaScript表达式

{{ ok?'YES':'NO' }} // 只能是单个 表达式

#v-bind绑定属性
#指令 v-
#修饰符 .

计算属性和侦听器

计算属性

设计初衷是用于简化运算，避免在模板中放入过多的逻辑让模板难以维护

var vm = new Vue({
    el: "#app",
    data: {
        msg: 'Hello word'
   },
   computed: {
        // 计算属性的getter
        newMsg: function(){
          return this.msg.split('').reverse().join('')
        }
   }
})

#计算属性缓存VS方法

methods: {
   newMsg: function(){
         return this.msg.split('').reverse().join('')
    }
}

效果是相同的
不同的是计算属性是基于他们的依赖进行缓存的，如果相关依赖不变，计算属性会返回之前的结果，而不必再次执行函数
方法则总会执行函数
#计算属性VS侦听属性
侦听属性 命令式的

var vm = new Vue({
    el: "#app",
    data: {
        msg: 'Hello word',
        newMsg: ""
   },
   watch: {
        msg: function(newVal,oldVal){
          this.newMsg = newVal + "a new value"
        }
   }
})

#计算属性的setter

computed: {
  newMsg: {
    get: function(){
        return this.msg.split('').reverse().join('')
    },
    set: function(newVal){
        ...// 手动设置setter属性
    }
  }
}

#侦听器
虽然计算属性在大多情况下更适合，当需要在数据变化时执行异步或开销较大的操作时，侦听器更适合

watch: {
    msg: function(newVal,oldVal){
        // 可以执行异步操作或开销较大的操作  
    }
}

还可以使用命令式的vm.$watch API

Class 与 Style绑定

#对象语法


// 通过设置 isActive的真假来决定active 类

#数组语法



data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
绑定内联样式

#对象语法
v-bind:style

#数组语法

#自动添加前缀

条件渲染

v-if
v-else
v-else-if
#用key管理可复用的元素
Vue提供了一种方式来表达‘这两个元素时完全独立的，不要复用他们’，只需要添加一个具有唯一值的key属性即可
v-show
不支持