Vue常用特性

最新推荐文章于 2025-01-25 17:51:16 发布

原创最新推荐文章于 2025-01-25 17:51:16 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

项目同时被 2 个专栏收录

18 篇文章

订阅专栏

Vue基础

16 篇文章

订阅专栏

常用特性概览

表单操作
自定义指令
计算属性
过滤器
侦听器
生命周期

表单操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
		div {
			margin-top: 5px; 
		}
		
		div span:nth-child(1) {
			/*background-color: pink;*/
			margin-right: 30px;
		}
		div textarea {
			margin-left: -15px 
		}
	</style>
</head>
<body>
	<div id="app">
		<form action="http://baidu.com">
			<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>
				<!-- multiple支持多选 -->
				<select v-model="occupation" multiple="true">
					<option value="0">请选择职业</option>
					<option value="1">教师</option>
					<option value="2">软件工程师</option>
					<option value="3">律师</option>
				</select>
			</div>
			<div>
				<span>个人简介</span>
				<textarea name="" id="" cols="20" rows="2" v-model='desc'></textarea>
			</div>
			<input type="submit" value="提交" @click.prevent='handle'>
		</form>
	</div>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				uname: 'list',
				gender: '1',
				hobby: ['2', '3'],
				occupation: ['2', '3'],
				desc: '测试文本'
			},
			methods: {
				handle: function () {
					//当是多选时，将数组转换成字符串
					// console.log(this.hobby.toString());
					//下面放ajax接口
					console.log(this.desc);
				}
			}
		})
	</script>
</body>
</html>

表单域修饰符
在这里插入图片描述

自定义属性

为何需要自定义指令？
内置指令不满足需求
自定义指令的语法规则（获取元素焦点）
在这里插入图片描述
自定义指令用法

<div id="app">
		<input type="text" v-focus>
	</div>
	<script src="js/vue.js"></script>
	<script>
		//自定义指令的定义
		Vue.directive('focus', {
			inserted: function (el) {
				//el表示指令所绑定的元素
				el.focus();
			}
		});
		var vm = new Vue({
			el: '#app',
			data: {

			},
			methods: {
				handle: function () {

				}
			}
		})
	</script>

带参数的自定义指令（改变元素背景色）
在这里插入图片描述

局部指令

计算属性

为何要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
计算属性的用法：
在这里插入图片描述
计算属性与方法的区别：
计算属性是基于它们的依赖进行缓存的
方法不存在缓存

侦听器

在这里插入图片描述
侦听器的应用场景

侦听器的用法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<div>
			<span>用户名：</span>
			<span>
				<input type="text" v-model.lazy='uname'>
			</span>
			<span>{{tip}}</span>
		</div>
	</div>
	<script src="js/vue.js"></script>
	<script>
		// 1.采用侦听器监听用户名的变化
		// 2.调用后台接口进行验证
		// 3.根据验证的结果调整提示信息
		var vm = new Vue({
			el: '#app',
			data: {
				uname:'',
				tip:''
			},
			methods: {
				checkName: function (uname) {
					//调用接口，但是可以使用定时任务的方式模拟接口调用
					var that = this;
					setTimeout(function () {
						//模拟接口调用
						if(uname == 'admin') {
							that.tip = '用户名已经存在'
						} else {
							that.tip = '用户名可以使用'
						}
					}, 2000);
				}
			},
			watch: {
				uname: function (val) {
					//调用后天接口验证用户名的合法性
					this.checkName(val);
					//修改提示信息
					this.tip='正在验证...'
				}
			}
		})
	</script>
</body>
</html>