标签:写代码 选择 逻辑 补丁 turn v-model textarea pre model
<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 : 不存在缓存, 每次都要执行
应用场景 : 数据变化时执行异步或开销较大的操作, 数据一旦发生变化就通知侦听器所绑定的方法
<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相关处理
}
}
挂载阶段
beforeCreate
: 在实例初始化之后 , 数据观测和事件配置之前被调用created
: 在实例创建完成后被立即调用beforeMount
: 在挂载开始之前调用mounted
: el 被新创建的 vm.$el 替换 并挂载到实例上去之后调用更新阶段
beforeUpdate
: 数据更新时调用 , 发生在虚拟DOM打补丁之前updated
: 由于数据更改导致的虚拟DOM重新渲染和打补丁, 在这之后会调用该钩子销毁阶段
beforeDestroy
: 实例销毁之前调用destroyed
: 实例销毁之后调用
标签:写代码 选择 逻辑 补丁 turn v-model textarea pre model
原文地址:https://www.cnblogs.com/article-record/p/12866346.html