温故而知新之VUE（二）

2018-11-03 本文已影响3人 lmmy123

模板语法

插值

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

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

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

<form v-on:submit.prevent="onSubmit"></from>

计算属性和侦听器

计算属性

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

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绑定

#对象语法

<div v-bind:class="{active: isActive}"></div>
// 通过设置 isActive的真假来决定active 类

#数组语法

<div v-bind:class="[activeClass, errorClass]" />

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

绑定内联样式

#对象语法
v-bind:style

<div v-bind:style="{color: activeColor, fontSize: fontSize+'px'}" />

<div v-bind:style="styleObject" />

#数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

#自动添加前缀

条件渲染

v-if
v-else
v-else-if
#用key管理可复用的元素
Vue提供了一种方式来表达‘这两个元素时完全独立的，不要复用他们’，只需要添加一个具有唯一值的key属性即可
v-show
不支持<template>元素，也不支持v-else
#v-if VS v-show
v-if，惰性的，如果初始条件为假，不渲染，当条件为真时，才开始渲染，切换过程中事件监听和子组件会适当地被销毁和重建
v-show ,不管初始条件是什么，元素总是会被渲染，并且只是简单的基于css进行切换
v-if有更高的切换开销，v-show有更高的初始化渲染开销，如果需要频繁的切换，则使用v-show
#不推荐v-if 和 v-for一起使用，v-for比v-if有更高的优先级

列表渲染

v-for

<li v-for='(item, index) in items' />
<li v-for='(value, key, index) in items' />

Key
#数组更新检查
#变异方法
Vue包含一组观察数组的变异方法，所以他们将会触发视图更新

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

#替换数组

filter()
concat()
slice()

vm.items[1] = 'x' // 不是响应式的
vm.items.length = 2 // 不是响应式的

// 可以改用下面的写法
vm.set(vm.items, indexofitem, newValue)
vm.items.splice(indexofitem, 1, newValue)
// 第二类问题使用
vm.items.splice(newLength)

#对象更改检测注意事项
Vue不能检测对象属性的添加或删除比如 vm.b = 2
可以通过

Vue.set(object, key, value)
// 或者 vm.$set(object, key, value)
// 添加多个新属性
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'VUE'
})

#显示过滤/排序结果

事件处理

<button @click="fn('msg', $event)" />

methods: {
  fn:function(val, event){
    //业务逻辑
  }
}

#事件修饰符

.stop
.prevent
.capture
.self
.once
.passive 2.3.0新增提升移动端的性能

<div v-on:scroll.passive="onScroll" />

#按键修饰符

@keyup.enter
@keyup.keyCode
config.keyCodes 对象自定义按键修饰符

Vue.config.keyCodes.f1 =12

.exact 修饰符
修饰符允许你控制由精确的系统修饰符组合触发的事件。
#鼠标按钮修饰符

.left
.right
.middle

表单输入绑定

v-model <input> <textarea> <select>