09-15Vue的学习

MVVM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>MVVM</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<h1>你好{{name}}</h1>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			
			const vm = new Vue({
				el:'#box',
				data:{
					name:'张三'
				}
			})
			console.log(vm);
		</script>
	</body>
</html>

数据代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue - 数据代理</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			
			let user = {
				age:18,
				name:'张三'
			}
			
			let rSex = "男";
			
			//不可修改
			Object.defineProperty(user,'sex',{
				//value:'男',  不能和set get同时使用
				//writable:true, //设置值是否可修改  默认false  不能和set get 同时使用
				configurable:true,//设置属性是否可删除 默认false
				enumerable:true,//设置属性是否可枚举 默认false
				get:()=>{
					//console.log("有人在读值");
					return rSex;
				},
				set:(value)=>{
					rSex = value;
				}
			})
			
			//循环枚举
			for(let key in user){
				console.log(user[key]);
			}
			
			setTimeout(()=>{
				rSex = "女";
			},3000);
			console.log(user);
		</script>
	</body>
</html>

插值语法2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue插值语法2</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<h1>你好{{name}}</h1>
			<h1>{{1+1}}</h1>
			<h1>{{1==1}}</h1>
			<h1>{{$options}}</h1>
			<!-- 
				插值语法： 
					可以进行算术运算，可以进行判断，插值语法实际上找的就是vm，vm里面有什么这里就可以放什么。
			-->
		</div>
		
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				data:{
					name:'张三'
				}
			})
			
			console.log(vm);
		</script>
	</body>
</html>

点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的点击事件</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
			.myul{
				width: 300px;
				height: 90px;
				overflow-y: auto;
			}
			.myul > li{
				width: 100%;
				height: 20px;
			}
			.myul > li:nth-child(odd){
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h1 v-on:click="msg">你点我试试</h1>
			<button type="button" @click="deleteUser(1001,$event)">删除</button><br>
			<a href="http://www.baidu.com" @click.prevent="baiduMsg">阻止默认行为</a><br><br><br><br>
			<div @click="msg2" style="width: 300px;height: 200px;background-color: aquamarine;">
				<button type="button" @click.stop="msg1">阻止事件冒泡</button>
			</div><br>
			<button type="button" @click.once="delete2">删除2(只执行一次)</button>
			
			<ul class="myul" @scroll="mywhell">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
			</ul>
			
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				methods:{
					msg(){
						alert("试试就试试");
					},
					deleteUser(uid,event){
						alert("删除成功"+1001);
						console.log(event);
					},
					baiduMsg(){
						alert("点击了百度");
					},
					msg1(){
						alert("消息1触发");
					},
					msg2(){
						alert("消息2触发");
					},
					delete2(){
						alert("我被删除了");
					},
					mywhell(){
						console.log("正在滚动");
					}
					
				}
			})
		</script>
	</body>
</html>

键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<input type="text" placeholder="请输入用户名" @keydown="userName"/><br>
			<!-- 自定义别名 -->
			<input type="text" placeholder="自定义别名" @keydown.caps-lock="capsLock"><br>
			<!-- 组合按键 -->
			<input type="text" placeholder="组合按键" @keydown.ctrl.s="save">
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				methods:{
					userName(e){
						console.log(e.key,e.keyCode);
					},
					capsLock(){
						console.log("你打开了大小写");
					},
					save(){
						console.log("保存成功");
					}
					
				}
			})
		</script>
	</body>
</html>

插值语法实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值语法实现</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			姓名：<input type="text" v-model="name"><br>
			公司：<input type="text" v-model="company"><br>
			<h2>{{name}}@{{company}}.com</h2>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				data:{
					name:'',
					company:''
				}
			})
		</script>
	</body>
</html>

方法实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过方法实现</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			姓名：<input type="text" v-model="name"><br>
			公司：<input type="text" v-model="company"><br>
			<h2>{{email()}}</h2>
			<h2>{{email()}}</h2>
			<h2>{{email()}}</h2>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				data:{
					name:'',
					company:''
				},
				methods:{
					email(){
						console.log("执行");
						return this.name + "@" + this.company + ".com";
					}
				}
			})
		</script>
	</body>
</html>

计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			姓名：<input type="text" v-model="name"><br>
			公司：<input type="text" v-model="company"><br>
			<h2>{{email}}</h2>
			<h2>{{email}}</h2>
			<h2>{{email}}</h2>
		</div>
		<script>
			/* 
			计算属性：
				多处调用只会执行一次，用方法会执行多次，使用计算属性可以提高代码运行效率。
				和methods相比最大的好处是计算属性有缓存
			*/
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				data:{
					name:'',
					company:''
				},
				computed:{
					email:{
						//当有人使用email这个属性时调用
						get(){
							console.log("执行")
							return this.name + "@" + this.company + ".com";
						}
					}
				}
			})
		</script>
	</body>
</html>

最后修改于 2021-09-15 17:28:18

如果觉得我的文章对你有用，请随意赞赏

扫一扫支付