Vue常用特性（表单操作，自定义指令，表单域修饰符，计算属性，侦听器）
Vue常用特性（这些都会在下面的案例中展现）1，表单操作input单行文本，textarea多行文本，select下拉多选，radio单选框，checkbox多选框2，自定义指令为何需要自定义指令？内置指令不满足需求内置指令分为 全局和局部3，表单域修饰符number：转化为数值trim：去掉开始和结尾空格lazy：将input事件切换成change事件3，计算属性为何需要计算属性？表达式的计算逻
·
Vue常用特性（这些都会在下面的案例中展现）
1，表单操作
input单行文本，textarea多行文本，select下拉多选，radio单选框，checkbox多选框
2，自定义指令
为何需要自定义指令？
内置指令不满足需求
内置指令分为 全局和局部
3，表单域修饰符
number：转化为数值
trim：去掉开始和结尾空格
lazy：将input事件切换成change事件
3，计算属性
为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁
4，侦听器
侦听器使用场景
数据变化时执行异步或开销较大的操作
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<form>
<!--文本框 v-model="msg"默认值 -->
用户名:<input type="text" v-model="msg"><br/>
<!--单选 v-model="gender" gender可以根据value值默认选中 -->
性别：<input type="radio" value="0" v-model="gender">男 <input type="radio" value="1" v-model="gender">女<br/>
<!--下拉菜单 如果默认选择一个v-model="perfession" perfession这里根据value的值进行选择 如果默认选择多个perfession可以使用数组的形式 需要加上multiple -->
职业：<select name="perfession" v-model="perfession" multiple>
<option value="1">老师</option>
<option value="2">工程师</option>
<option value="3">前端</option>
<option value="4">后端</option>
</select>
爱好：
<!-- 复选框 v-model="hobby"默认选择多个 hobby使用数组的形式 -->
<input type="checkbox" value="1" v-model="hobby">足球
<input type="checkbox" value="2" v-model="hobby">篮球
<input type="checkbox" value="3" v-model="hobby">台球
<input type="checkbox" value="4" v-model="hobby">网球
<input type="checkbox" value="5" v-model="hobby">乒乓球<br/>
<!-- 文本域 v-model="intreduce" intreduce进行默认值 -->
简介<textarea name="intreduce" v-model="intreduce"></textarea><br/>
<!-- prevent取消默认行为 -->
<input type="submit" value="提交" @click.prevent="handle">
</form>
<div>
<!-- number转化为数值 不使用number会进行字符串拼接 -->
<input type="text" v-model.number="msg1"><br>
<button @click="handle1">点击</button><br>
<!-- trim去掉开始和结尾的空格 中间的空格不能去除-->
<input type="text" v-model.trim="msg2">{{msg2}}<br>
<button @click="handle2">点击2</button><br>
<!-- lazy将input事件切换为change事件 -->
<input type="text" v-model.lazy="msg3">{{msg3}}<br>
</div>
<div>
<!-- v-fouce使用我们自定义的指令 -->
获得焦点<input type="text" v-fouce ><br>
获得焦点<input type="text" v-color="color" >
</div>
<div>
{{info}}
<!-- split('')根据空格切割 reverse()进行翻转 join('')根据空格拼接展示 -->
{{info.split('').reverse().join('')}}<br>
<!-- 计算属性会缓存 只调用一次除非值发生变化 -->
{{reverseString}}
<!-- 第二次会调用缓存里的 -->
{{reverseString}}
<!-- 方法没有缓存 每次都会重新执行 -->
{{reversehandle()}}
{{reversehandle()}}
</div>
<div>
<!-- 侦听器实现更改姓名 -->
<input type="text" v-model="firstname"/><br>
<input type="text" v-model="lastname"/><br>
{{fullname}}
<!-- 计算属性实现更改姓名 -->
{{watdemo}}
</div>
</div>
<script type="text/javascript">
// 自定义全局指令（所有组件都能访问） fouce指令名称
Vue.directive('fouce', {
// el代表所使用这个指令的本身
inserted:function(el){
// focus()获取焦点
el.focus();
}
})
Vue.directive('color', {
// el代表所使用这个指令的本身 binding传过来的参数
inserted:function(el,binding){
// 修改背景颜色 binding.value拿使用这个指令的参数的值 在此，就是拿获得焦点的文本框里面指令
el.style.backgroundColor=binding.value;
}
})
new Vue({
el:"#app",
data:{
msg:"zzp",
gender:"1",
perfession:["1","2"],
hobby:["1","3"],
intreduce:"haha",
msg1:"",
msg2:"",
msg3:"",
color:"blue",
info:"hello",
firstname:"周",
lastname:"星驰",
fullname:"周"+"---"+"星驰"
},
methods: {
handle:function(){
console.log(this.intreduce);
},
handle1:function(){
console.log(this.msg1+22);
},
handle2:function(){
console.log(this.msg2.length);
},
reversehandle:function(){
console.log("reversehandle")
return this.info.split('').reverse().join('');
}
},
// 自定义局部指令 只有当前组件能够访问
directives:{
color:{
inserted:function(el,binding){
// 修改背景颜色 binding.value拿使用这个指令的参数的值 在此，就是拿获得焦点的文本框里面指令
el.style.backgroundColor=binding.value;
}
}
},
computed: {
// 直接当做普通属性调用不加括号
// 任何data中数据变化立即重新计算
// 计算属性会缓存
reverseString:function(){
console.log("reverseString")
// 必须retrun结果
return this.info.split('').reverse().join('');
},
watdemo:function(){
return this.firstname+"---"+this.lastname;
}
},
// 侦听器
watch: {
//firstname 要观察的对象(一般为非DOM事件)
firstname:function(val){//val代表侦听的数据
this.fullname=val+"---"+this.lastname;
},
lastname:function(val){
this.fullname=this.firstname+"---"+val;
}
},
})
</script>
</body>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)