vue模板语法上集

最新推荐文章于 2022-09-02 21:21:15 发布

--mq--

最新推荐文章于 2022-09-02 21:21:15 发布

阅读量247

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m12120426/article/details/126666868

版权

一、插值

文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			<h3>{{msg}}</h3>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return {
						msg:'hellow vue',
					}
				}
			})
		</script>
	</body>
</html>

html

使用v-html指令用于输出html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>html</p>
			<div v-html="htmlstr"></div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return {
						htmlstr:'<h3 style="color:green">html片段</h3>'
					}
				}
			})
		</script>
	</body>
</html>

vue属性

HTML属性中的值应使用v-bind指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>v-bind 属性绑定</p>
			<input value="值" />
			<input v-bind:value="valuestr" />
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return {
						msg:'hellow vue',
						htmlstr:'<h3 style="color:green">html片段</h3>',
						valuestr:'vue值'
					}
				}
			})
		</script>
	</body>
</html>

class绑定

使用方式：v-bind:class="a"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<style>
			.a{
				color:pink;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<span :class="classStr">文本内容</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return {
						classStr:'a'
					}
				}
			})
		</script>
	</body>
</html>

表达式

Vue提供了完全的JavaScript表达式支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<style>
			.a{
				color:pink;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
 			<p>vue中可以对变量的进行二次处理</p>
			{{str.substring(0,4)}}<br />
			{{num+4}}<br />
			{{ok?'1':'0'}}<br />
			<span :id="idstr+'id'">书籍信息</span> 
			
			<span :class="classStr">文本内容</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return {
						str:'hello world',
						num:6,
						ok:false,
						idstr:'book_',
						classStr:'a'
					}
				}
			})
		</script>
	</body>
</html>

二、指令

指的是带有“v-”前缀的特殊属性

核心指令

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>v-if</p>
			请输入分数:<input v-model="score" />
			对应的结果：
			<span v-if="score<60">不及格</span>
			<span v-else-if="score<70">合格</span>
			<span v-else-if="score<80">良</span>
			<span v-else-if="score<90">优秀</span>
			<span v-else-if="score<=100">优+</span>
			<span v-else="">输入不合法</span>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					score:0
				}
			}
		})
	</script>
</html>

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

v-for：类似JS的遍历

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>v-for</p>
			<select>
				<option v-for="l in likes" :value="l.id">{{l.name}}</option>
			</select>
			<br />
			<div v-for="l in likes">
				<input type="checkbox" :value="l.id" />{{l.name}}
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					likes:[
						{id:1,name:'军旗'},
						{id:1,name:'桌球'},
						{id:1,name:'乒乓球'},
						{id:1,name:'篮球'}
					]
				}
			}
		})
	</script>
</html>

v-bind

v-on

v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

v-for/v-model一起绑定[多选]复选框和单选框

三、过滤器

全局过滤器

Vue.filter('filterName', function (value) {
 // value 表示要过滤的内容
});

局部过滤器

new Vue({
 filters:{'filterName':function(value){}}
});

四、计算属性&监听器

计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

computed:{}

监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化

watch:{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>计算属性</p>
			<table border="1" style="width: 600px;height: 300px;">
				<tr>
					<td>物品</td>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td>帽子</td>
					<td>{{maoziDanjia}}</td>
					<td>
						<input v-model="maozi" />
					</td>
					<td>
						{{maoziTotal}}
					</td>
				</tr>
				<tr>
					<td>衣服</td>
					<td>{{yifuDanjia}}</td>
					<td>
						<input v-model="yifu" />
					</td>
					<td>
						{{yifuTotal}}
					</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>{{kuziDanjia}}</td>
					<td>
						<input v-model="kuzi" />
					</td>
					<td>
						{{kuziTotal}}
					</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">{{total}}</td>
				</tr>
			</table>
			<p>监听属性</p>
			千米：<input v-model="km" />
			米：<input v-model="m" />
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
			return value.substring(1, 4);
		});
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					maoziDanjia:10,
					yifuDanjia:30,
					kuziDanjia:20,
					maozi:1,
					yifu:1,
					kuzi:1,
					km:2,
					m:2000
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			computed:{
				maoziTotal(){
					return this.maoziDanjia*this.maozi;
				},
				yifuTotal(){
					return this.yifuDanjia*this.yifu;
				},
				kuziTotal(){
					return this.kuziDanjia*this.kuzi;
				},
				total(){
					return this.maoziTotal+this.yifuTotal+this.kuziTotal;
				}
			},
			watch:{
				// v指的是m变量
				m: function(v){
					this.km = parseInt(v)/1000;
				},
				// v指的是km变量
				km: function(v){
					this.m = parseInt(v)*1000;
				}
			}
		})
	</script>
</html>

--mq--

关注

1
点赞
踩
1

收藏

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

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"遍历数组: v-for="item in items", items是数组，item为数组中的数组元素。这些计算将被缓存，并且只在需要时更新。HTML属性中的值应使用v-bind指令。指的是带有“v-”前缀的特殊属性。
复制链接

扫一扫