Vue 02 常用特性
Vue:渐进式JavaScript框架，声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建,易用，灵活，高效（20kb运行大小，超快虚拟DOM）
2019-10-04
常用特性概览
- 表单操作
- 自定义指令
- 计算属性
- 过滤器
- 侦听器
- 生命周期
1.表单操作
- input 单行文本
- textarea 多行文本
- select 下拉多选
- radio 单选框
- checkbox 多选框
基于Vue的表单操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
form {
padding: 20px;
line-height: 50px;
}
form textarea{
vertical-align:text-top;
}
</style>
<body>
<div id="app">
<form action="">
<div>
<span>姓名:</span>
<input type="text" v-model='uname'>
</div>
<div>
<span>性别:</span>
<input type="radio" id='male' value="1" v-model='gender'>
<label for="">男</label>
<input type="radio" id='female' value="2" v-model='gender'>
<label for="">女</label>
</div>
<div>
<span>爱好:</span>
<input type="checkbox" value="1" v-model='hobby'>
<label for="">画画</label>
<input type="checkbox" value="2" v-model='hobby'>
<label for="">下棋</label>
<input type="checkbox" value="3" v-model='hobby'>
<label for="">看书</label>
</div>
<div>
<span>职业:</span>
<!-- <select name="" id="" v-model='occupation' multiple='true'> 多选-->
<select name="" id="" v-model='occupation'>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
<option value="4">画家</option>
</select>
</div>
<div>
<span>个人简介:</span>
<textarea v-model='desc'></textarea>
</div>
<input type="submit" @click.prevent='handle' class="btn">
</form>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
uname: '',
gender: 1,
hobby: [1, 2],
// occupation:[1,2]
occupation:1,
desc:'tangtang'
},
methods: {
handle() {
console.log(this.uname)
console.log(this.gender)
console.log(this.hobby.toString())
console.log(this.desc)
}
}
})
</script>
</body>
</html>
2.表单域修饰符
- number:转化为数值
- trim:去掉开始和结尾的空格
- lazy:将input事件切换为change事件(失去焦点的时候触发）
<input v-model.number='age' type='number'>
<input v-model.trim='info' >
<input v-model.lazy='msg' >
3.自定义指令基本用法
- 1.为何需要自定义指令？
- 2.自定义指令的语法规则（获取元素焦点）
- 3.带参数的自定义指令（改变元素的背景色）
- 4.局部指令
内置指令不满足需求
参考下列实例
<input type='text' v-focus >
参考下列实例
<input type='text' v-focus v-color="{color:'pink'}">
实例内加入一个 directive属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义属性-获取焦点</title>
</head>
<body>
<div id="app">
<input type="text" v-focus v-color="{color:'pink'}" >
</div>
<script src="./vue.js"></script>
<script>
// 自定义指令
// 获取元素焦点
Vue.directive('focus',{
inserted(el){
//el表示指令所绑定的元素
el.focus();
}
})
// 改变元素的背景色
Vue.directive('color',{
inserted(el,binding){
//el表示指令所绑定的元素
el.style.backgroundColor=binding.value.color;
}
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
</body>
</html>
4.计算属性
- 1.为何需要计算属性？
- 2.计算属性的用法
表达式的计算逻辑可能会比较复杂，使用计算属性可以使用模板内容更加简洁
computed:{
reversedMessage(){
return this.msg.split('').reverse().join('')
}
}
1⃣️计算属性是基于它们的依赖进行缓存的
2⃣️方法不存在缓存的
5.侦听器
- 1.侦听器的应用场景
- 2.侦听器的用法
数据变化时执行异步或开销较大的操作
watch:{
firstName(val){
//val 表示变化之后的值
this.fullName = val+this.lastName;
},
lastName(val){
this.fullName = this.firstName+val;
}
}
1⃣️.通过v-model实现数据绑定
2⃣️.需要提供提示信息
3⃣️.需要侦听器监听输入信息的变化
4⃣️.需要修改触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>侦听器案例</title>
</head>
<body>
<div id="app">
<div>
<span>用户名：</span>
<input type="text" v-model.lazy='uname'>
<span></span>
</div>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
uname:'',
tip:''
},
methods:{
checkName(uname){
let that = this
//调用接口，但是可以使用定时任务的发格式模拟接口调用
setTimeout(function(){
//模拟接口调用
if(uname=='admin'){
that.tip='用户名已经存在，请更换一个'
}else{
that.tip='用户名可以使用'
}
},2000)
}
},
watch:{
uname(val){
//调用后台接口验证用户的合法性
this.checkName(val)
//修改提示信息
this.tip='正在验证...'
}
}
})
</script>
</body>
</html>
6.过滤器
- 1.过滤器的作用是什么？
- 2.自定义过滤器
格式化数据，比如字符串格式化为首字母大写，将日期格式化为指定的格式等
Vue.filter('过滤器名称',function(val){
//过滤器业务逻辑
})
<div>{ {msg | upper} }</div>
<div>{ {msg | upper | lower} }</div>
<div> v-bind:id="id | formatId "</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过滤器的基本用法</title>
</head>
<body>
<div id="app">
<input type="text" v-model ='msg'>
<div></div>
<div></div>
<div :abc='msg | upper'>测试数据</div>
</div>
<script src="./vue.js"></script>
<script>
// 过滤器
Vue.filter('upper',function(val){
//把val的首字母变为大写
return val.charAt(0).toUpperCase()+val.slice(1)
})
Vue.filter('lower',function(val){
return val.charAt(0).toLowerCase()+val.slice(1)
})
var vm = new Vue({
el:'#app',
data:{
msg:''
}
})
</script>
</body>
</html>
filters:{
capitalize:funcgtion(){
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>格式化日期</title>
</head>
<body>
<div id="app">
<div>{ {date | format('yyyy-MM-dd')} }</div>
</div>
<script src="./vue.js"></script>
<script>
//过滤器案例 格式化日期
// Vue.filter('format',function(val,arg){
// console.log(arg)
// if(arg=='yyyy-MM-dd'){
// var ret = '';
// ret+=val.getFullYear()+'-'+(val.getMonth()+1)+'-'+val.getDate()
// return ret
// }
// })
Vue.filter('format',function(val,arg){
function dateFormat(date,format){
if(typeof date=='string'){
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if(mts && mts.length>=3){
date=parseInt(mts[2])
}
}
date=new Date(date);
if(!date || date.toUTCString()=="Invalid Date"){
return "";
}
var map ={
"M":date.getMonth()+1,//月份
"d":date.getDate(),//日
"h":date.getHours(),//小时
"m":date.getMinutes(),//分
"s":date.getSeconds(),//秒
"q":Math.floor((date.getMonth()+3)/3),//季度
"s":date.getMilliseconds()//毫秒
};
format =format.replace(/([yMdhmsqS])+/g,function(all,t){
var v = map[t];
if(v !==undefined){
if(all.length>1){
v='0'+v;
v=v.substr(v.length-2);
}
return v;
}else if(t==='y'){
return(date.getFullYear()+'').substr(4-all.length);
}
return all;
});
return format;
}
return dateFormat(val,arg)
})
var vm = new Vue({
el:'#app',
data:{
date:new Date()
}
})
</script>
</body>
</html>
7.生命周期
- 挂载(初始化相关属性）
- 更新(元素或组件的变更操作)
- 销毁(销毁相关属性)
1.主要阶段
1⃣️beforeCreate（在实例初始化之后，数据观测和事件配置之前被调用）
2⃣️Created（在实例创建完成后被立即调用）
3⃣️beforeMount （在挂载开始之前被调用）
4⃣️mounted (el 被新创建的vm.$el替换，并挂载到实例上去之后调用的该钩子)
1⃣️beforeUpdate（数据更新时调用，发生在虚拟Dom打补丁之前）
2⃣️updated（由于数据更改导致的虚拟Dom重新渲染和打补丁，在这之后会调用该钩子）
1⃣️beforeDestroy （实例销毁之前被调用）
2⃣️destroyed （实例销毁后调用）
发布时间：2019-10-04