Vue常用特性

Posted 2020-11-28 article-record

基于Vue表单操作

input 单行文本

<input type="text" v-model="uname">

单选框

<!-- 需要绑定 value 属性值进行区分 -->
<input type="radio" value="0" v-model="denger"> 男 
<input type="radio" value="1" v-model="denger"> 女

多选框

<!-- 需要绑定 value 属性值进行区分 -->
<input type="checkbox" value="1" v-model="hobby"> 篮球 
<input type="checkbox" value="2" v-model="hobby"> 唱歌 
<input type="checkbox" value="3" v-model="hobby"> 写代码

下拉框

<!-- 如果增加了multiple属性, 实例中data一定要用数组接收 表示可以多选, 如果没有就用数字接收即可 -->
<select v-model="selected" multiple>
   <option value="0">请选择职业</option>
   <option value="1">前端工程师</option>
   <option value="2">后端工程师</option>
</select>

文本域

<textarea cols="30" rows="10" v-model="textarea"></textarea>

var vm = new Vue({
  el: ‘#app‘,
  data: {
    uname: ‘zs‘,
    denger: ‘‘,
    hobby: [],
    selected: [],
    textarea: ‘‘
  },
  methods: {
    handle: function () {
      console.log(this.denger)
      console.log(this.hobby)
      console.log(this.selected)
      console.log(this.textarea)
    } 
  }
})

表单修饰符

• number : 转化为数值
• trim : 去掉开始和结尾的空格
• lazy : 将 input 事件切换为 change 事件

<!-- 将v-model绑定的值改成 number类型 -->
<input type="text" v-model.number="num">

<input type="text" v-model.trim="str">

<!-- 默认情况下 v-model 是绑定 input 事件的: 只要值变化就会触发 lazy是鼠标离开焦点触发-->
<input type="text" v-model.lazy="change">
<div>{{ change }}</div>

自定义指令

实例自动获取焦点

<input type="text" v-focus>

// 引用的时候要加 v- 定义的时候不需要
Vue.directive(‘focus‘, {
  inserted: function (el) {
    el.focus()
  }
})

<input type="text" v-color="{color: ‘orange‘}">

// 带参数的自定义指令
Vue.directive(‘color‘, {
  inserted: function (el, binding) {
    el.style.backgroundColor = binding.value.color
  }
})

var vm = new Vue({
  el: ‘#app‘,
  // 局部指令
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }
})

计算属性

表达式的计算逻辑可能会比较复杂, 使用计算属性可以使模板更加简洁

<div>{{ reverseStr }}</div>

computed: {
  reverseStr: function () {
    // 计算结果必须return 出来
    return this.msg.split(‘‘).reverse().join(‘‘)
  }
}

computed methods 的区别

computed : 基于他们的依赖进行缓存, 也就是说同样的功能, 只要依赖不改变, 只计算一次, 多余的次数到缓存中去读取

methods : 不存在缓存, 每次都要执行

侦听器

应用场景 : 数据变化时执行异步或开销较大的操作, 数据一旦发生变化就通知侦听器所绑定的方法

<div id="app">
  firstName: <input type="text" v-model="firstName">
  lastName : <input type="text" v-model="lastName">
  <div>fullName : {{ fullName }}</div> 
</div>

 vm = new Vue({
  el: ‘#app‘,
  data: {
    firstName: ‘Tom‘,
    lastName: ‘Cat‘,
    fullName: ‘Tome Cat‘
  },
  watch: {
    firstName: function () {
      this.fullName = this.firstName + ‘ ‘ + this.lastName
    },
    lastName: function () {
      this.fullName = this.firstName + ‘ ‘ + this.lastName
    } 
  }
})

过滤器

格式化数据, 比如字符串首字母大写, 格式化日期等

<div>{{ msg | upper }}</div>
<!-- 一级一级处理 -->
<div>{{ msg | upper | lower }}</div>
<div v-bind:data="msg | upper"></div>
<div>{{ date | dataFormat(‘yy-MM-dd‘) }}</div>

// 全局定义
Vue.filter(‘upper‘, function (val) {
  return val.charAt(0).toUpperCase() + val.slice(1)
})

// 局部定义
filters: {
  lower: function (val) {
    return val.charAt(0).toLowerCase() + val.slice(1)
  },
  // 可以带有参数, 要从第二个开始接收
  dataFormat: function (val, date) {
     return // date相关处理
  }
}

Vue 实例产生过程

挂载阶段

1. beforeCreate : 在实例初始化之后 , 数据观测和事件配置之前被调用
2. created : 在实例创建完成后被立即调用
3. beforeMount : 在挂载开始之前调用
4. mounted : el 被新创建的 vm.$el 替换 并挂载到实例上去之后调用

更新阶段

5. beforeUpdate : 数据更新时调用 , 发生在虚拟DOM打补丁之前
6. updated : 由于数据更改导致的虚拟DOM重新渲染和打补丁, 在这之后会调用该钩子

销毁阶段

7. beforeDestroy : 实例销毁之前调用
8. destroyed : 实例销毁之后调用