vue常用内置指令

最新推荐文章于 2024-07-02 09:49:13 发布

心郎

最新推荐文章于 2024-07-02 09:49:13 发布

阅读量2.1k

点赞数 1

分类专栏：前端_vue

本文链接：https://blog.csdn.net/u011301203/article/details/64940728

版权

前端_vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vue常用内置指令</title>
        <style>
        </style>
    </head>

    <body>
    	<!--数据绑定-->
        <div id="app">
			{{msg}}
			<div v-text='msg'></div>  <!--数据绑定-->
			<div v-html='msg'></div>  <!--数据绑定 能读取html标签-->
		</div>
		
		<!-- 双向数据绑定 -->
		<div id="app1">
			<input type="text" v-model='msg' placeholder="edit me" /> 
			<p>Message is: {{ msg }}</p>
		</div>
		
		<div id='app2'>
			<!-- 绑定一个属性 -->
			<img v-bind:src="imageSrc">
			
			<!-- 缩写 -->
			<img :src="imageSrc">
			
			<!-- class 绑定 表达式成立则显示这个class或属性-->
			<div :class="{ red: isRed }">v-bind</div>
			<div :class="[classA, classB]">v-bind</div><!-- 传递类名-->
			<div :class="[classA, { classC: isB, classD: isC }]"></div>
		</div>
		
		<div id='app3'>
			<div v-if="type === 'A'"> A </div> <!-- 原理：创建标签; -->
			<div v-else-if="type === 'B'"> B </div>
			<div v-else-if="type === 'C'"> C </div>
			<div v-else> Not A/B/C </div>
			
			<div v-show='false'>asdasdasd</div> <!-- 原理：display: none; -->
			
			<div v-if="type === 'A'"> A </div> <!-- 原理：创建标签; -->
			<div v-else> B </div>
		</div>
		
		<div id='app4'>
			<div v-for="item in items1">
			  {{ item.name }}{{ item.age }}
			</div>
			<div v-for="(val, key) in items2">
			  {{ key }}：{{ val  }}
			</div>
		</div>
		
		<div id="app5">
			<button v-on:click="greet">vue_click</button>
			<button @click="greet">uve_click_缩写</button>
			<button v-on:click="doSomeing('hello', $event)">vue_click_内连</button>
			<!-- 停止冒泡 -->
			<button @click.stop="doThis"></button>
			<!-- 阻止默认行为 -->
			<a href="www.baidu.com" @click.prevent="doThis">a标签</a>
			<!-- 阻止默认行为，没有表达式 -->
			<form @submit.prevent>阻止默认行为</form>
			<!--  串联修饰符 -->
			<button @click.stop.prevent="doThis"></button>
			<!-- 键修饰符，键别名 -->
			<input @keyup.enter="onEnter">
			<!-- 键修饰符，键代码 -->
			<input @keyup.13="onEnter">
		</div>
    </body>
    <script src="js/vue.js"></script>
    <script>
       var app = new Vue({
       	el:'#app',
       	data:{
       		msg:'vue数据绑定！ <h1>h1标签</h1>'
       	}
       })
       
       var app1 = new Vue({
       	el:'#app1',
       	data:{
       		msg:''
       	}
       })
       
       var app2 = new Vue({
       	el:'#app2',
       	data:{
       		imageSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490188766664&di=a146b957af864d76c3d27c7bbad4eabf&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20110505%2Fbki-20110505023143-2085807902.jpg',
       		isRed:true,
       		classA:'class1',
       		classB:'calss2',
       		isB:true,
       		isC:false
       	}
       })
       
       var app3 = new Vue({
       	el:'#app3',
       	data:{
       		type:'AA'
       	}
       })
       
       var app4 = new Vue({
       	el:'#app4',
       	data:{
       		items1:[{'name':'张飞','age':19},{'name':'马超','age':10},{'name':'刘备','age':18}],
       		items2:['曹操','关于','张飞']
       	}
       })
       
       var app5 = new Vue({
       	el:'#app5',
       		data: {
       		name:'vue.js'
       	},
       	methods: {
       		greet: function (event){
       			alert('hello'+this.name);
       			alert(event.target.tagName);
       		},
       		doSomeing: function(vel,event){
       			alert(vel);
       			alert(event.target.tagName);
       		},
       		doThis:function(){
       			alert('什么都不干');
       		}
       	}
       })
       
       
    </script>

</html>