Vue常用特性
基于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 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新
push()pop()shift()unshift()splice()sort()reverse()为变异方法
filter()concat()slice()会产生新数组, 需要手动在赋值回来this.arr = this.arr.concat([])
修改数组或对象响应式数据
<div v-for="(item, index) in hobby" :key="index">{{ item }}</div>
<div>{{ person.name }}</div>
<div>{{ person.age }}</div>
<div>{{ person.gender }}</div>
var vm = new Vue({
el: '#app',
data: {
hobby: ['ball', 'codeing', 'game'],
person: {
name: 'zs',
age: 23
}
}
})
// vm.hobby[1] = 'apple'
Vue.set(vm.hobby, 1, 'apple')
vm.$set(vm.hobby, 2, 'banana')
// vm.person.age = 22
Vue.set(vm.person, 'gender', 'man')
vm.$set(vm.person, 'name', 'ls')
Vue 实例产生过程
挂载阶段
beforeCreate: 在实例初始化之后 , 数据观测和事件配置之前被调用created: 在实例创建完成后被立即调用beforeMount: 在挂载开始之前调用mounted: el 被新创建的 vm.$el 替换 并挂载到实例上去之后调用更新阶段
beforeUpdate: 数据更新时调用 , 发生在虚拟DOM打补丁之前updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁, 在这之后会调用该钩子销毁阶段
beforeDestroy: 实例销毁之前调用destroyed: 实例销毁之后调用
