VUE学习笔记 -- vue的使用

一、VUE介绍

二、VUE使用案例

1、插值表达式的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	{{message}}
		<div id="app">
			{{message}}<br/>
			{{msg+1}}
			<br/>
			{{flag?"Hello":"vue"}}
			<br/>
			<!--此种写法不写：因为它是声明变量的方式，无法带有返回值，表达式将不能获取数据并显示在浏览器上 {{var test="1"}} 
			一旦被vue接管的区域没有任何内容显示时，则表示vue的语法有错误
			-->
		</div>
		
	
		
	</body>
	<script>
		//view model
		/*
		 * new Vue();创建了一个Vue对象
		 * Vue对象在创建时有一些参数：都是以json格式体现的
		 * Vue的el：它是用于让vue接管某一块区域。
		 * 获取区域时，可以使用和jquery一样的选择方式：id选择器。
		 *
		 *  需求：
		 		在div中显示信息
		 		
		 	在vue的构建中可以定义数据
		 		使用的key是data，它的data是一个对象，需要使用大括号定义数据的内容
		 		大括号中的内容又是json格式数据
		 */
		new Vue({
			el:"#app",
			data:{
				message:"Hello Vue",
				msg:1,
				flag:true
			},
			created: function() {
				 window.location.href="https://www.baidu.com"
			}
		});
		 
		 
		/*  
			原生方式：
			window.onload=function(){
			 window.location.href="https://www.baidu.com"
		 } */
	</script>
</html>

2、vue中的事件函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}  
			<button onclick="clkbtn('js的button')">js的click</button>
			
			<button v-on:click="vueclick('vue的button')">vue的onclick</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			//接管app区域
			el:"#app",
			data:{
				message:"Hello Vue!"
			},
			methods:{
				vueclick:function(msg){
					this.message = msg;
				}
			}
		});
		
		
		/**
			原生js事件
		*/
		var clkbtn  = function (msg){
			alert(msg);
		}
	</script>
</html>

3、事件的默认行为

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
		
			<!-- $event是vue的，而传统js无须定义任何遍历。传统js中就window以及document对象一样，拿过来直接用 -->
			<input type="text" v-on:keydown="fun($event)">
			
			<!--
				事件的默认行为：
					以form表单为例，只要点击按钮，默认认为是提交事件，
					要想阻止form表单的默认提交行为，需要在onsubmit后面加上 return 函数（函数的返回值为boolean类型）
					当返函数返回值为false时，阻止表单提交，即阻止了form表单的默认行为
				<form action="https://www.baidu.com" onsubmit="return checkForm()">
					<input type="text" name="username" id="username"/><br/>
					<input type="submit" value="go"/>
				</form> 
			-->
			
			<input type="text" onkeydown="fun1()">
		</div>
	</body>
	<script>
		/*阻止事件的默认行为
		48-57  96-105
		*/
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun:function(event){
					//取出按下的键盘码
					var keyCode = event.keyCode;
					//判断键盘码是不是在48-57之间，或者是96到105之间
					if((keyCode < 48 || keyCode>57) && (keyCode <96 || keyCode>105) ){
						//阻止事件默认行为
						event.preventDefault();
					}
				}
			}
		});
		
		
	
		/* 	
			传统方式阻止输入框输入数字
			function fun1(){
				//1.获取按下的按键的keyCode
				 var keyCode = event.keyCode; //ie浏览器 
				
				 //var keyCode = event.which;  chrom浏览器
				alert(keyCode);
			}
		*/
		
		
		/* 
			function checkForm(){
			//获取username的文本框的值
			var username = document.getElementById("username").value;
			
			if(username == ''){
				alert("请输入用户名！");
				return false;
			}
		}
		*/
	</script>

</html>

4、vue的onmouseOver事件和事件的传播行为

5、

三、

VUE学习笔记 -- vue的使用

猜你喜欢