Vue 框架-03-鍵盤事件、健值修飾符、雙向數據綁定

時間 2020-06-09

標籤 vue 框架鍵盤事件修飾雙向數據綁定简体版

原文原文鏈接

Vue 框架-03-鍵盤時間及健值修飾符

1、鍵盤事件，當按鍵盤時，在控制檯輸出提示javascript

html 源碼：css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VueLearn-cnblogs/xpwi</title>
		<!--引入自定義的樣式-->
		<link rel="stylesheet" href="css/style.css" />
		<!--引入 vue 核心 js-->
		<script type="text/javascript" src="js/vue.js" ></script>
		
	</head>
	<body>
		
		<!--vue-app 是根容器，定義一個 id，而後在 js 裏操做-->
		<div id="vue-app">
			
			<!--name 具體的值是在 js 中定義的-->
			<h2> 鍵盤 Events </h2>
			<label>姓名：</label>
			<input type="text" v-on:keyup="logName" />
			<label>年齡：</label>
			<input type="text" v-on:keyup="logAge" />
			
		
		</div>
		
		<!--引入本身的 js，注意必須寫在 body 標籤裏最後，由於必須先加載你的整個 HTML DOM，纔回去執行 vue 實例-->
		<script type="text/javascript" src="js/appEvent.js" ></script>
	</body>
</html>

js 源碼：html

//實例化 vue 對象
new Vue({
	//注意代碼格式
	//el：element 須要獲取的元素，必定是 html 中的根容器元素
	el:"#vue-app",
	data:{
	},
	methods:{
		logName: function(){
			console.log("你這正在輸入名字！");
			
		},
		logAge: function(){
			console.log("你這正在輸入年齡！");
			
		}
	}

});

上面代碼是當用戶點擊輸入框後，只要按下鍵盤就會在控制檯打印一次提示，實際應用的並很少，下面介紹當用戶按下回車鍵時，才觸發vue

2、健值修飾符java

下面在時間後面加上：.enter 就能夠實現只監聽 enter 鍵，就能夠實現，當用戶在輸入完成，按下回車鍵時，觸發咱們自定義的事件app

<input type="text" v-on:keyup.enter="logName" />

3、雙向數據綁定 input，selecet，textarea框架

適用：input，selecet，textarea 三種標籤 js 文件種拿到 html 文件種輸入的數據，而後 html 中拿到 js 文件中的數據this

源代碼 html 文件：spa

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VueLearn-cnblogs/xpwi</title>
		<!--引入自定義的樣式-->
		<link rel="stylesheet" href="css/style.css" />
		<!--引入 vue 核心 js-->
		<script type="text/javascript" src="js/vue.js" ></script>
		
	</head>
	<body>
		
		<!--vue-app 是根容器，定義一個 id，而後在 js 裏操做-->
		<div id="vue-app">
			
			<!--name 具體的值是在 js 中定義的-->
			<h2> 鍵盤 Events </h2>
			<label>姓名：</label>
			<!--加一個  ref 用來在 js 文件中拿到 input 標籤中輸入的內容-->
			<input ref="userName" type="text" />
			<label>年齡：</label>
			<input ref="userAge" type="text" v-on:keyup.enter="notice" />
			
			<hr />
			<span>已確認信息：</span>
			<br />
			姓名：{{name}}<br />
			年齡：{{age}}
		
		</div>
		
		<!--引入本身的 js，注意必須寫在 body 標籤裏最後，由於必須先加載你的整個 HTML DOM，纔回去執行 vue 實例-->
		<script type="text/javascript" src="js/appEvent.js" ></script>
	</body>
</html>

源代碼 js 文件：code

//實例化 vue 對象
new Vue({
	//注意代碼格式
	
	//el：element 須要獲取的元素，必定是 html 中的根容器元素
	el:"#vue-app",
	data:{
		name : "",
		age : ""
	},
	methods:{
	
		notice: function(){
			//console.log("你這正在輸入年齡！");
			//this.name 是 js 文件上面定義的一個 name 變量
			this.name = this.$refs.userName.value;
			this.age = this.$refs.userAge.value;
			alert("姓名:" + this.name + " 年齡：" + this.age);
		}
	}

});

4、雙向數據綁定 input，selecet，textarea （二）

上面數據綁定是在按下輸入回車鍵的時候，來回的同步數據，下面介紹另外一種方式，實現雙向數據綁定

雙向數據綁定第二種方法：源代碼 html 文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VueLearn-cnblogs/xpwi</title>
		<!--引入自定義的樣式-->
		<link rel="stylesheet" href="css/style.css" />
		<!--引入 vue 核心 js-->
		<script type="text/javascript" src="js/vue.js" ></script>
		
	</head>
	<body>
		
		<!--vue-app 是根容器，定義一個 id，而後在 js 裏操做-->
		<div id="vue-app">
			
			<!--name 具體的值是在 js 中定義的-->
			<h2> 鍵盤 Events </h2>
			<label>姓名：</label>
			<!--加一個  ref 用來在 js 文件中拿到 input 標籤中輸入的內容-->
			<input ref="userName" type="text" v-model="name" />
			<label>年齡：</label>
			<input ref="userAge" type="text" v-model="age"/>
			
			<hr />
			<span>同步數據：</span>
			<br />
			姓名：{{name}}<br />
			年齡：{{age}}
		
		</div>
		
		<!--引入本身的 js，注意必須寫在 body 標籤裏最後，由於必須先加載你的整個 HTML DOM，纔回去執行 vue 實例-->
		<script type="text/javascript" src="js/appEvent.js" ></script>
	</body>
</html>

源代碼 js 文件：

//實例化 vue 對象
new Vue({
	//注意代碼格式
	
	//el：element 須要獲取的元素，必定是 html 中的根容器元素
	el:"#vue-app",
	data:{
		name : "",
		age : ""
	},
	methods:{
	
		notice: function(){
			//console.log("你這正在輸入年齡！");
			//this.name 是 js 文件上面定義的一個 name 變量
			this.name = this.$refs.userName.value;
			this.age = this.$refs.userAge.value;
			alert("姓名:" + this.name + " 年齡：" + this.age);
		}
	}

});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。