vue 入门笔记 04 模板语法_指令

模板语法_指令

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			
			<p v-if="arrar.length == 9">{{mes}}</p>
			<p v-else>"暂五数据... .. ."</p>
			
			<a href="https://www.google.com">google 你就懂了</a>			
			<a v-bind:href="google">google 一下 你就懂了</a>
			
			<button  v-on:click="btnClick">btnClick</button>
			
			<input type="text" v-on:keydown="keydown"/>
			<p></p>
			<input type="text" v-on:keydown.37="keydow37"/>
			
			<p></p>
			
			<a v-bind:href="google" v-on:click.prevent="showPage">google AAAAA 你就懂了</a>	
			
			<p></p>
			<p @click="showPage01">缩写</p>
			
			
		</div>
		
 
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{ //数据
					mes:"你好 vuew",
					arrar:[0,1,2,3,4,5,6,7,8,9],
					google:"https://www.google.com",
				},
				methods:{//方法 对象 属性
					
					btnClick:function(){
						console.log("btnClick");
					},
					
					keydown:function(event){
						let e = window.event || event;
						console.log("keydown: "+e.keyCode);
					},
					
					keydow37:function() {
						console.log("Keycode 37 down");
					},
					
					showPage:function () {
// 						mui.alert('message','title','btnValue',function (e) {
// 						   e.index
// 						},'div')
						alert("你大爷 很好i");
					},
					
					showPage01:function(){
						alert("你大爷 这是缩写");
					}
				},
				components:{
					
				}
			})
		</script>
		
		
		
	</body>
</html>

小结：

1. Vue指令：指令 (Directives) 是带有 v- 前缀的特殊特性。还可以自定义扩展

v-if

v-else

v-bind : 完整写法 <a v-bind:href="google">google 一下你就懂了</a>

缩写写法 <a :href="google">google 一下你就懂了</a>

v-on :完整写法 <button v-on:click="btnClick">btnClick</button>

缩写写法 <button @click="btnClick">btnClick</button>

vue 入门笔记 04 模板语法_指令

模板语法_指令

猜你喜欢