一. Vue常用特性
1.1 常用特性概览
- 表单操作
- 自定义指令
- 计算属性
- 侦听器
- 过滤器
- 生命周期
1.2 表单操作
1.基于Vue的表单操作
-
Input 单行文本
-
textarea 多行文本
-
select 下拉多选
-
radio 单选框
-
checkbox 多选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) { height: auto; } form div span:first-child { display: inline-block; width: 100px; } </style> </head> <body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名：</span> <span> <input type="text" v-model='uname'> </span> </div> <div> <span>性别：</span> <span> <input type="radio" id="male" value="1" v-model='gender'> <label for="male">男</label> <input type="radio" id="female" value="2" v-model='gender'> <label for="female">女</label> </span> </div> <div> <span>爱好：</span> <input type="checkbox" id="ball" value="1" v-model='hobby'> <label for="ball">篮球</label> <input type="checkbox" id="sing" value="2" v-model='hobby'> <label for="sing">唱歌</label> <input type="checkbox" id="code" value="3" v-model='hobby'> <label for="code">写代码</label> </div> <div> <span>职业：</span> <select v-model='occupation' multiple> <option value="0">请选择职业...</option> <option value="1">教师</option> <option value="2">软件工程师</option> <option value="3">律师</option> </select> </div> <div> <span>个人简介：</span> <textarea v-model='desc'></textarea> </div> <div> <input type="submit" value="提交" @click.prevent='handle'> </div> </form> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> // 表单基本操作 var vm = new Vue({ el: '#app', data: { uname: 'lisi', gender: 2, hobby: ['2', '3'], // occupation: 3 occupation: ['2', '3'], desc: 'nihao' }, methods: { handle: function() { // console.log(this.uname) // console.log(this.gender) // console.log(this.hobby.toString()) // console.log(this.occupation) console.log(this.desc) } } }); </script> </body> </html>
2.表单域修饰符
-
number：转化为数值
-
trim：去掉开始和结尾的空格
-
lazy : 将input事件切换为change事件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单域修饰符</title> </head> <body> <div id="app"> <label>数字化</label> <input type="text" v-model.number='fm1'> <br> <label>去除空字符</label> <input type="text" v-model.trim='fm2'> <br> <!-- 关于 .lazy 修饰符的作用 --> <!-- .lazy 可以用于用户名等信息提交后的验证 当用户完成输入相关信息 光标离开 文本框后， 可对文本框内容进行验证。 --> <label>切换为change事件</label> <input type="text" v-model.lazy='fm3'> <div>{{fm3}}</div> <button @click='handle'>点击</button> </div> <script src="./js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { fm1: '', fm2: '', fm3: '' }, methods: { handle: function() { // console.log(this.fm1 + 12); console.log(this.fm2.length); } } }) </script> </div> </body> </html>
1.3 自定义指令
1.为何需要自定义指令？
内置指令不满足需求
2.自定义指令的语法规则（获取元素焦点）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
<input type="text">
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
Vue.directive('focus', {
inserted: function(el) {
// 获取元素焦点
el.focus();
}
});
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
3. 带参数的自定义指令（改变元素背景色）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带参数的自定义指令</title>
</head>
<body>
<div id="app">
<input type="text" v-color='bg'>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
// 全局指令可以在任何地方使用
Vue.directive('color', {
inserted: function(el, binding) {
// 根据指令参数设置背景颜色
console.log(binding);
el.style.backgroundColor = binding.value.color;
}
});
var vm = new Vue({
el: '#app',
data: {
bg: {
color: 'pink'
}
},
methods: {}
});
</script>
</body>
</html>
4. 局部指令
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义局部指令</title>
</head>
<body>
<div id="app">
<input type="text" v-color='bg'>
<input type="text" v-focus>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
bg: {
color: 'pink',
}
},
methods: {
},
// 局部指令只能在 vue 局部组件中使用，这里只可在 id="app" 的 html 元素中使用。
directives: {
color: {
bind: function(el, binging) {
el.style.backgroundColor = binging.value.color;
}
},
focus: {
inserted: function(el) {
el.focus();
}
}
},
});
</script>
</body>
</html>
1.4 计算属性
1.为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
2.计算属性的用法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义计算属性</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
methods: {
},
computed: {
reverseString: function() {
// 将字符串反转
return this.msg.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
3.计算属性与方法的区别
-
计算属性是基于它们的依赖进行缓存的
这里的依赖就是指 data 中的数据
如果多次调用一个计算属性，它的依赖不发生改变，那么就会读取缓存中的值；否则会重新计算
-
方法不存在缓存
如果多次调用一个方法，不管它的依赖发不发生改变，都会重新计算
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性与方法的区别</title>
</head>
<body>
<div id="app">
<div>{{reverseMessage()}}</div>
<div>{{reverseMessage()}}</div>
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
methods: {
reverseMessage: function() {
console.log('methods');
return this.msg.split('').reverse().join('');
}
},
computed: {
reverseString: function() {
console.log('computed');
return this.msg.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
1.5 侦听器
1. 侦听器的应用场景
数据变化时执行异步或开销较大的操作
2. 侦听器的用法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>侦听器基本用法</title>
</head>
<body>
<div id="app">
<div>
<span>姓：</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>名：</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 侦听器
var vm = new Vue({
el: '#app',
data: {
firstName: '段',
lastName: '仙子',
fullName: '段 仙子'
},
computed: {
// fullName: function() {
// return this.firstName + ' ' + this.lastName;
// }
},
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>
</body>
</html>
1.6 过滤器
1.过滤器的作用是什么？
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
2. 自定义过滤器及使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器基本用法</title>
</head>
<body>
<div id="app">
<input type="text" v-model='msg'>
<!-- 既可以在插值表达式中使用，也可以在属性绑定中使用，它支持多个过滤器同时使用 -->
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :abc='msg | upper'>测试内容</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
Vue.filter('upper', function(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: '',
},
methods: {}
})
</script>
</body>
</html>
3. 局部过滤器
var vm = new Vue({
el: '#app',
data: {
msg: '',
},
methods: {}，
filters:{
capitalize: function(){}
}
})
4. 带参数的过滤器及使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 过滤器案例：格式化日期
// Vue.filter('format', function(value, arg) {
// if(arg == 'yyyy-MM-dd') {
// var ret = '';
// ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
// return ret;
// }
// return value;
// })
Vue.filter('format', function(value, 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(value, arg);
})
var vm = new Vue({
el: '#app',
data: {
date: new Date()
}
});
</script>
</body>
</html>
1.7 生命周期
1.主要阶段
-
挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted
-
更新（元素或组件的变更操作）
① beforeUpdate
② updated
-
销毁（销毁相关属性）
① beforeDestroy
② destroyed
2. Vue实例的产生过程
① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<button @click='update'>更新</button>
<button @click='destroy'>销毁</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// Vue实例的生命周期
var vm = new Vue({
el: '#app',
data: {
msg: '生命周期'
},
methods: {
update: function() {
this.msg = 'hello';
},
destroy: function() {
this.$destroy();
}
},
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
},
beforeMount: function() {
console.log('beforeMount');
},
mounted: function() {
console.log('mounted');
},
beforeUpdate: function() {
console.log('beforeUpdate');
},
updated: function() {
console.log('updated');
},
beforeDestroy: function() {
console.log('beforeDestroy');
},
destroyed: function() {
console.log('destroyed');
}
});
</script>
</body>
</html>
扫一扫
1452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
