Vue常用特性
表单操作
基于Vue的表单操作
- input单行文本
- 通过v-model双向绑定
- textarea多行文本
- select下拉多选
- radio单选框
- checkbox多选框
表单域修饰符
- number:转化为数值(默认是字符串)
- trim:去掉开始和结尾的空格
- lazy:将input事件切换为change事件
<div id="app">
<!-- <input type="text" name="" id="" v-model="age"> -->
<input type="text" v-model.number='age'>
<input type="text" v-model.trim='trimc'>
<input type="text" v-model.lazy='changet'>
<div>{
{
changet}}</div>
<input type="submit" value="点击" @click="handle">
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
age: '',
trimc: '',
changet: ''
},
methods: {
handle(){
console.log(this.age);
console.log(this.trimc);
console.log(this.changet);
}
}
});
</script>
自定义指令
-
为何需要自定义指令
内置指令不满足需求
-
自定义指令的语法规则(获取元素焦点)
Vue.directive('focus' ,{ inserted: function(el){ //获取元素的焦点 el.focus(); } })
-
自定义指令用法
<div id="app">
<input type="text" v-focus>
</div>
<script>
Vue.directive('focus' ,{
inserted: function(el){
//获取元素的焦点
el.focus();
}
})
let vm = new Vue({
el:"#app",
data: {
},
methods: {
}
});
</script>
钩子函数参数
- el:指令所绑定的元素,可用来直接操作DOM
- binding:一个对象,包含:
- name:指令名,不包括v-,前缀
- value:指令的绑定值,
- oldValue:指令绑定的前一个值
局部指令
添加一个额外的指令。
directives: {
focus: {
//指令的定义
inserted: function(el){
el.focus()
}
}
}
计算属性
表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁
computed:{
reversedMessage: function(){
return this.msg.split('').reverse().join('')
}
}
计算属性与方法的区别
- 计算属性是基于它们的依赖进行缓存的
- 方法不存在缓存
<div id="app">
<input type="text" v-model="msg" name="" id="">
<div>{
{
reversed}}</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
msg:""
},
methods: {
},
computed:{
reversed: function(){
return this.msg.split('').reverse().join('');
}
}
});
</script>
过滤器
过滤器的作用
格式化数据,比如将字符串格式化为首字母大写,将日期格式转化为指定的格式。
过滤器的定义
Vue.filter('过滤器名称', function(value){
//过滤器业务逻辑
}
过滤器的使用
//upper:过滤器得名称
<div>{
{msg | upper}}</div>
<div>{
{msg | upper | lower}}</div>
<div v-bind:id | formatId></div>
局部过滤器
filters:{
capitalize: function(){}
}
<div id="app">
<input type="text" v-model="msg">
<div>{
{
msg | upper}}</div>
<div>{
{
msg | upper | lower}}</div>
<div :upp="msg | upper" >{
{
msg}}</div>
</div>
<script>
Vue.filter('upper', function(val){
return val.toUpperCase();
});
Vue.filter('lower', function(val){
return val.toLowerCase();
})
let vm = new Vue({
el:"#app",
data: {
msg: ''
},
methods: {
},
});
</script>
侦听器
侦听器用于监听数据,当数据发生变化是就通知侦听器所绑定的方法
应用场景
数据变化时执行异步或开销较大的操作
(与计算属性有相似的地方)
watch: {
//方法,val表示当前数据的最新值
firstName: function(val){
this.fullName = val + this.lastName;
},
lastName: function(val){
this.fullName = this.firstName + val;
}
}
案例
验证用户名是否可用
需求:输入框中输入姓名,失去焦点时验证是否存在,如果已经存在,提示从新输入,如果不存在,提示可以用。
操作:
1、通过v-model实现数据绑定
2、需要提供提示信息
3、需要侦听器监听输入信息的变化
4、需要修改触发的事件
<div id="app">
用户名:<input type="text" v-model.lazy="msg">
<div>{
{
tip}}</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: '',
tip: ''
},
methods: {
checkname: function (uname) {
//调用接口,可用定时任务模拟接口调用
let that = this;
setTimeout(function () {
//模拟接口调用
if (uname == 'admin') {
that.tip = '用户名已经存在'
}else{
that.tip = '可以注册'
}
},2000)
}
},
watch: {
msg: function (val) {
//调用后台接口验证用户名的合法性
this.checkname(val);
this.tip = "正在验证。。。"
}
}
});
</script>
侦听器
1、采用侦听器监听用户名的变化
2、调用后台接口进行验证
3、根据验证的结果调整提示信息
生命周期(生命周期钩子函数)
主要阶段
- 挂载(初始化相关属性)
- beforeCreate
- created
- beforeMount
- mounted
- 更新(元素或组件的变更操作)
- beforeUpdate
- updated
- 销毁(销毁相关属性)
- beforeDestroy
- destroyed
<div id="app">
<input type="text" name="" id="" v-model="msg">
<button @click="destroy">销毁</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
msg: ""
},
methods: {
destroy: function(){
this.$destroy();
}
},
beforeCreate() {
console.log("beforeCreate...");
},
created() {
console.log("create...");
},
beforeMount(){
console.log("beforeMount...");
},
mounted(){
console.log("mounted...");
},
beforeUpdate(){
console.log("beforeUpdate...");
},
updated(){
console.log("updated...");
},
beforeDestroy(){
console.log("beforeDestroy...");
},
destroyed(){
console.log("destroyed...");
},
});
</script>
生命周期示意图
[图来自官网]
销毁就是释放一些资源
mounted:表示初始化已完成,模板已存在。
Vue实例的产生过程
- beforeCreate在实例初始化之后,数据观测和事件配置之前被调用
- created在实例创建完成之后被立即调用
- beforeMount在挂载开始之前被调用
- mounted el被新创建的vm.$el替换,并挂载到实例上去之后调用的例子
- beforeUpdate数据更新时调用,发生在虚拟DOM打补丁之前
- updated由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后调用
- beforeDestroy实例销毁之前调用
- destroyed实例销毁后调用