Vue模板语法

最新推荐文章于 2023-05-12 22:23:10 发布

drunk喵咪

最新推荐文章于 2023-05-12 22:23:10 发布

阅读量202

点赞数

分类专栏： Vue 文章标签： Vue模板语法

本文链接：https://blog.csdn.net/jdrunk/article/details/102593070

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、模板语言
1) 声明式渲染
{{message}}
{{表达式}}
2) 指令
v-model 实现视图和数据的想象绑定
{{}} 在双大括号不仅能绑定属性值，还能绑定表达式

  {{ message.split('').reverse().join('') }}

v-once 实现一次性的插值，数据改变时，插值处的内容不会更新。注意影响到该节点其他数据绑定

<span v-once>这个值将不会改变：{{userName}}</span>

v-text 功能与双大括号相同，v-text里面可以为变量或表达式，可以用字符串拼接两个值
v-html 在页面输出真正的html代码，双大括号输出的为普通文本
v-on:事件类型，用来触发页面事件的指令

常用的事件：
mouseover:鼠标放上事件
mouseout:鼠标移开事件
change：内容改变事件
focus：聚焦事件
blur:失去焦点事件

v-bind:属性，布尔特性 (它们只要存在就意味着值为 true)

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中
v-if=“条件”
v-show=“条件”
当dom元素频繁的显示与隐藏相互切换使用v-show，因为在隐藏与显示切换的时候不操作dom对象只改变dom对象的display属性
v-for=“item in list”
3) 指令简写
v-on:click => @click
v-bind:value => :value

<a v-bind:href="url">...</a>   //href为参数，告诉v-band指令将href和url绑定在一起

	v-slot:slotName="作用域" =>	#slotName

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>class和style</title>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	<style>
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.menus {
			width: 200px;
			text-align: center;
		}
		.menus > li.basic {
			background: pink;
			color: #fff;
			border-bottom: 1px solid #efefef;
			line-height: 2em;
		}
		.menus > li.current {
			background: #fff;
			color: pink;
		}
		.menus > li.aaa {
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<div id="app">
		<ul class="menus">
			<!-- <li v-for='item in list' @click='clickHandler(item)' :class="currentTab === item ?'current':'' ">
				{{item}}
			</li> -->
			<!-- <li v-for='item in list' @click='clickHandler(item)' :class="{basic:true,current:currentTab === item}">
				{{item}}
			</li> -->

			<!-- 都是选中状态 -->
			<!-- <li v-for='item in list' @click='clickHandler(item)' :class="['basic','current']">
				{{item}}
			</li> -->
			<!-- 都是非选中状态 -->
			<li v-for='item in list' @click='clickHandler(item)' :class="['basic','a']">
				{{item}}
			</li>
		</ul>
		{{currentTab}}
	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				a:'aaa',
				//选中顾客管理，相当于模拟点击事件
				currentTab:'顾客管理',
				list:['顾客管理','栏目管理','订单管理','评论管理']		
			},
			methods:{
					clickHandler(item){
						this.currentTab = item;
					}
				}
		})
	</script>
</body>
</html>

<form action="" @submit="submitHandler"></form>
	<form action="" v-on:submit="submitHandler"></form>

	<input type="checkbox" v-bind:value="ids">
	<input type="checkbox" :value="ids">
		:属性 动态绑定，表示ids为变量，去data中匹配这个变量
	<input type="checkbox" value="ids">
		属性 	静态绑定，表示ids为值，也就是value的值为ids
	<div v-bind:style="s"></div>

	new Vue({
		data:{
			ids:[],
			s:{
				color:"red",
				background:"#ededed"
			}
		},
		methods:{
			submitHandler(){

			}
		}
	})

模板语言

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板语言</title>
	<!-- 导入vue -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<div v-if='isShow'>
			你看到我了if
		</div>
		<div v-show='isShow'>
			你看到我了show
		</div>
		{{message}}
		<p>{{message.split('').reverse().join('')}}</p>
		<p>状态 {{status==0?'禁用':'正常'}}</p>
		<p>{{foo()}}</p>
		<p><input type="text" v-bind:value='status'></p>
		<div>
			{{inner}}
		</div>
		<div v-html='inner'></div>
	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				message:'hello Vue',
				status:0,
				inner:'<h2>this is inner</h2>',
				isShow:true
			},
			methods:{
				foo(){
					return 'this is foo'
				}
			}

		})
	</script> 
</body>
</html>

2、事件机制
（1）事件绑定

v-on:eventType="handler"
@eventType="handler"
@eventType="js表达式"

<div @click="handler">添加</div>
methods:{
	handler(event){

	}
}

	事件源          div
	事件处理函数		handler
	事件对象			event

（2）事件对象
1）事件处理函数中没有参数

<button @click="add"></button>
methods:{
	add(event){
		event就是事件对象
	}
}

2）事件处理函数中有参数

<button @click="add(3,$event)"></button>
methods:{
	add(num,event){
		num 为3
		event就是事件对象
	}
}

事件类型修饰符
1>事件修饰符

@eventType.prevent
@eventType.stop
@eventType.self
@eventType.once
@eventType.capture
@scroll.passive

2>按键修饰符
只适用于keyup、keydown、keypress

@keyup.enter
@keyup.tab
@keyup.delete
@keyup.esc
@keyup.space
@keyup.up
@keyup.right
@keyup.down
@keyup.left

3>系统修饰键

@eventType.ctrl
@eventType.alt
@eventType.shift
@eventType.meta

4>鼠标按键修饰符
适用于mouseup、mousedown、mousepress

@eventType.left
@eventType.right
@eventType.middle

事件机制

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件机制</title>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>
<body>
	<div id="app">
		<p>num:{{num}}</p>
		<button @click='add(3,$event)'>增加</button>
		<button @click='num++'>增加</button>

	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				num:1
			},
			methods:{
				add(a,event){
					console.log('event:',event);
					this.num++;
				}
			}
		})
	</script>
</body>
</html>

3、动态绑定class与style
1) class

:class="表达式"
:class="{className:flag}"
	className存在与否取决于flag是否为true
:class="['basic',a]"

style

style="backgrond:pink;color:#fff"
	=>
	:style="{background:'pink',color:'#fff'}"
	=>
	:style="{background:a,color:b}"
	data:{
		a:"pink",
		b:"#fff"
	}
	=>
	:style="[a,b]"
	data:{
		a:{background:"pink"},
		b:{color:"#fff"}
	}

4>条件渲染
v-if
v-else-if
v-else

案例分析：

<div v-if='flag' :key="1">
	hello
</div>
<div v-else :key="2">
	world
</div>

v-show

<div v-show='flag'>
	hello
</div>

flag===true 显示
条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>
<body>
	<div id="app">
		<div class="userinfo">
			<p v-if='user===null'>
				<a href="">登录</a>
				没有密码？
				<a href="">注册</a>
			</p>
			<p v-else-if='user.super'>
				<em>{{user.name}}</em>
				<span>{{usr.telephone}}</span>
			</p>
			<p v-else>
				<strong>{{user.name}}</strong>
				<span>{{user.telephone}}</span>
			</p>
		</div>
	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				user:null,
				loginType:'username'
			},
			created(){
				setTimeout(()=>{
					this.user={
						name:'terry',
						telephone:'1888888888',
						super:false
					}
				},1000)
			}
		})
	</script>
</body>
</html>

列表渲染

<ul>
	<li v-for="item in list" :key="item">
		{{item}}
	</li>
</ul>

data:{
	return {
		list:["国际新闻","国内新闻","体育新闻"]
	}
}

list.pop()
list.push()

drunk喵咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模板语法

1、模板语言1) 声明式渲染{{message}}{{表达式}}2) 指令v-on:事件类型v-bind:属性v-if=“条件”v-show=“条件” 当dom元素频繁的显示与隐藏相互切换使用v-show，因为在隐藏与显示切换的时候不操作dom对象只改变dom对象的display属性v-for=“item in list”v-html=“v”3) 指令简写v-on:cl...
复制链接

扫一扫