Vue之模板语法（上）

最新推荐文章于 2022-11-10 22:11:25 发布
最新推荐文章于 2022-11-10 22:11:25 发布
阅读量264 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boy_10/article/details/121038441
版权
本文介绍了Vue的模板语法，包括文本插值、使用v-html输出HTML、v-bind指令设置属性、JavaScript表达式支持。深入讲解了v-if、v-else、v-else-if、v-show、v-for指令的用法，以及触发事件和动态参数。还探讨了全局过滤器和局部过滤器的使用，包括过滤器参数的传递。最后，详细阐述了计算属性和监听属性的概念及其应用。
摘要由CSDN通过智能技术生成

一：插值

1.文本

<!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>
	</body>
	<script type="text/javascript">
		 /* 绑定边界 */
		 new Vue({
			 el:'#app',
			 // 方式一
			 data() {
			 	return{
                 msg:'哦吼'
               };
			 }
		 })
	</script>
</html>

结果展示：

 

2.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>文本</p>
			<h3>{{msg}}</h3>
 
			<p>html串</p>
			<div v-html="htmlstr"></div>
		</div>
	</body>
	<script type="text/javascript">
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					msg: '哦吼',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>'
				};
			}
		})
	</script>
</html>
结果展示：

 

3.属性

HTML属性中的值应使用v-bind指令   （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>文本</p>
			<h3>{{msg}}</h3>
 
			<p>html</p>
			<div v-html="htmlstr"></div>
			
			<p>vue的属性</p>
			<!-- 所有原生态的属性，要利用vue的变量，都需要在对应的属性前加v-bind -->
			<a v-bind:href="hrefstr">百度</a>
			
			
		</div>
	</body>
	<script type="text/javascript">
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					msg: '哦吼',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
					hrefstr:'http://www.baidu.com'
				};
			}
		})
	</script>
</html>

结果展示：

点击后会跳转到百度的页面

 

4.表达式

Vue提供了完全的JavaScript表达式支持
          例一：{{str.substr(0,4).toUpperCase()}}

<!--  {{str.substr(0,4).toUpperCase()}} 截取第0位到第四位的值，并全部大写-->
			{{str.substring(0,4).toUpperCase()}}
new Vue({
			el: '#app',
			data() {
				return {
					msg: '哦吼',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
					hrefstr:'http://www.baidu.com',
					str:'abcdefg'
				};
			}
		})

结果展示： 

       例二：{{ number + 1 }}

    张三:{{number+1}}

<!-- {{ number + 1 }} -->
			{{ number + 1 可以做运算}}
new Vue({
			el: '#app',
			data() {
				return {
					msg: '哦吼',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
					hrefstr:'http://www.baidu.com',
					str:'abcdefg',
					number:59
				};
			}
		})

结果展示：

  例三：{{ ok ? 'YES' : 'NO' }}

{{ok ? 'yes' : 'no'}}

 

		new Vue({
			//绑定的哪个边界 
			el: '#app',
			data() {
				return {
					msg: '哦吼',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
					hrefstr:'http://www.baidu.com',
					valuestr:'2231',
					str:'abcdefg',
					number:59,
					ok:true,
				};
			}
		})

      例四：<li v-bind:id="'list-' + id">我的Id是js动态生成的</li> 

<span :id="'id_'+id"></span>

		new Vue({
			//绑定的哪个边界 
			el: '#app',
			data() {
				return {
					msg: '哦吼',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
					hrefstr:'http://www.baidu.com',
					valuestr:'2231',
					str:'abcdefg',
					number:59,
					ok:true,
					id:66
				};
			}
		})

 结果展示：

 二：指令

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

例一：v-if|v-else|v-else-if

<!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-if|v-else|v-else-if</p>
			<!-- v-if|v-else|v-else-if 如果大于80分为优秀，小于80大于60为良好，小于60为还需努力 -->
			分数：<input v-model="score" />
			<div v-if="score>80">优秀</div>
			<div v-else-if="score>60">良好</div>
			<div v-else="score<60">还需努力</div>
		</div>
	</body>
	<script type="text/javascript">
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					score:78
				};
			}
		})
	</script>
</html>

结果展示：随分数的改变而改变

 

 例二：v-show

	<p>v-show</p>
			<div v-show="score>90">v-show上荣誉榜</div>
			<div v-if="score>90">v-if上荣誉榜</div>
			<!-- v-show 和 v-if的区别： 
			                       1.v-show是display隐藏掉了
								   2.v-if的代码直接没了
			-->

结果展示：

 分析：这里大家可能觉得v-if和v-show是一样的，但是其实他们是有区别的

当小于90时

 

 可以看到v-show只是隐藏了，而v-if是完全消失了

例三：v-for   遍历 

<!-- v-for -->
			<select>
				<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
			</select>
new Vue({
			el: '#app',
			data() {
				return {
					score:78,
					  hobby:[
						 {id:"1",name:"洗头"},
						 {id:"2",name:"按摩"}
					 ],
				};
			}
		})

  结果展示：

 做回显

<!-- v-for -->
			<select v-model="hobbySelected">
				<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
			</select>
			<input v-model="hobbySelected" />
new Vue({
			el: '#app',
			data() {
				return {
					score:78,
				  hobby:[
						 {id:"1",name:"洗头"},
						 {id:"2",name:"按摩"}
					 ],
					 hobbySelected:2
				};
			}
		})

结果展示：

 做复选框

<div v-for="h in hobby">
				<input :value="h.id" type="checkbox" />{{h.name}}
			</div>
new Vue({
			el: '#app',
			data() {
				return {
					score:78,
					  hobby:[
						 {id:"1",name:"洗头"},
						 {id:"2",name:"按摩"}
					 ],
					 hobbySelected:2
				};
			}
		})

 结果展示：

 例四：触发事件

 

	<p>v-on</p>
			<button v-on:click="handle">触发事件</button>
			<button @click="handle">触发事件</button>
		</div>
	</body>
	<!-- 绑定边界 -->
	<script type="text/javascript">
		new Vue({
			//绑定的哪个边界 
			el: '#app',
			data() {
				return {
					score:78,
				     hobby:[
						 {id:"1",name:"洗头"},
						 {id:"2",name:"按摩"}
					 ],
					 hobbySelected:2
				};
			},
			methods:{
				handle(){
					alert("触发事件");
				}
			}
		})

两种方式都可以触发 

例五：动态参数

只有点击两次才会触发

<!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>
			<button v-on:[evname]="handle">动态参数</button>
		</div>
	</body>
	<script type="text/javascript">
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					evname:'dblclick'
				};
			},
			methods:{
				handle(){
					alert("触发事件")
				}
			}
		})
	</script>
</html>

三：过滤器

作用：对原始数据进行处理

1.全局过滤器

<!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">
			{{msg|all}}
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
				return value.substring(0,2);
		});
		
		// 局部过滤器
		
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					msg:"abcdefj"
				};
			},
			methods: {
				handle() {
					alert("触发事件")
				}
			}
		})
	</script>
</html>

结果展示：

 

2.局部过滤器 

<!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>
			{{msg|all}}
			<p>局部</p>
			{{msg|single}}
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
				return value.substring(0,2);
		});
		
		// 局部过滤器
		
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					msg:"abcdefj"
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			filters:{
				'single':function(val){
					return val.substring(2,3);
				}
			}
		})
	</script>
</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>全局</p>
			{{msg|all}}
			<p>局部</p>
			{{msg|single}}
			<p>同时</p>
			{{msg|all|single}}
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
				return value.substring(1,4);
		});
		
		// 局部过滤器
		
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					msg:"abcdefj"
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			filters:{
				'single':function(val){
					return val.substring(2,3);
				}
			}
		})
	</script>
</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>全局</p>
			{{msg|all}}
			<p>局部</p>
			{{msg|single}}
			<p>同时</p>
			{{msg|all|single}}
			<p>过滤器传参</p>
			{{msg|param(4,5)}}
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
				return value.substring(1,4);
		});
		
		// 局部过滤器
		
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					msg:"abcdefj"
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			filters:{
				'single':function(val){
					return val.substring(2,3);
				},
				'param':function(val,start,end){
					return val.substring(start,end);
				}
			}
		})
	</script>
</html>

 结果展示：

 

四：计算属性&监听属性 

1.计算属性

<!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>30</td>
					<td>
						<input v-model="xi" />
					</td>
					<td>{{xiTotal}}</td>
				</tr>
				<tr>
					<td>剪</td>
					<td>30</td>
					<td>
						<input v-model="jian" />
					</td>
					<td>{{jianTotal}}</td>
				</tr>
				<tr>
					<td>吹</td>
					<td>188</td>
					<td>
						<input v-model="chui" />
					</td>
					<td>{{chuiTotal}}</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">{{total}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
				return value.substring(1,4);
		});
		
		// 局部过滤器
		
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					xi:1,
					jian:1,
					chui:1
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			computed:{
				xiTotal(){
					return this.xi*30;
				},
				jianTotal(){
					return this.jian*30;
				},
				chuiTotal(){
					return this.chui*188;
				},
				total(){
					return this.xiTotal+this.jianTotal+this.chuiTotal;
				}
			}
		})
	</script>
</html>

结果展示：

修改变量相关的也会改变

 

2.监听属性

<!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>30</td>
					<td>
						<input v-model="xi" />
					</td>
					<td>{{xiTotal}}</td>
				</tr>
				<tr>
					<td>剪</td>
					<td>30</td>
					<td>
						<input v-model="jian" />
					</td>
					<td>{{jianTotal}}</td>
				</tr>
				<tr>
					<td>吹</td>
					<td>188</td>
					<td>
						<input v-model="chui" />
					</td>
					<td>{{chuiTotal}}</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);
		});
		
		// 局部过滤器
		
		/* 绑定边界 */
		new Vue({
			el: '#app',
			data() {
				return {
					xi:1,
					jian:1,
					chui:1,
					km:2,
					m:2000
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			computed:{
				xiTotal(){
					return this.xi*30;
				},
				jianTotal(){
					return this.jian*30;
				},
				chuiTotal(){
					return this.chui*188;
				},
				total(){
					return this.xiTotal+this.jianTotal+this.chuiTotal;
				}
			},
			watch:{
				// m
				m: function(v){
					this.km= parseInt(v)/1000;
				},
				// km
				km: function(v){
					this.m= parseInt(v)*1000;
				}
			}
		})
	</script>
</html>

结果展示：

 

马六安
关注
Vue之模板语法(上)
xieminglu的博客
08-19 344
1. 模板语法 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()...
Vue模板语法
qq_62331938的博客
09-02 2568
本篇文章将要分享的内容为Vue的模板语法。
vue模板语法上集
weixin_30794491的博客
08-20 165
模板语法上集 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 ...
Vue中父子组件通信
qq_43576662的博客
08-25 869
子组件触发父组件方法 在子组件children.vue中，通过this.$emit来触发父组件father.vue的事件 methods: { children(){ this.$emit("ok"); //父组件的事件名称 } } 父组件father.vue中，当ok事件被触发则会执行父组件中的father方法 <template> <children @ok="father"></children> </template> <scri.
Vue2.0开发之——Vue基础用法-使用JavaScript表达式(18)
我的博客
11-10 661
在vue提供的模板渲染语法中，除了支持绑定简单的数据外，还支持JavaScript表达式的运算{ {ok?more。
Vue-事件等
莫莫
06-16 746
Vue事件vue的参数对象vue事件修饰符按键修饰符计算属性---`computed`监听---`watch`过滤---管道----`filters : {}`案例---过滤小数以及更加条件案例---电话3-4-4模式自定义指令案例--- 图片加载骨架 vue的参数对象 el vue的作用域 data vue的定义初始数据 methods vue的事件方法中心 computed vue的计算属性，从现有属性计算新的数据 watch vue监听，如果监听对象，必须有deep : true 声明周期钩子函数
Vue模板语法（一）
zxy15974062965的博客
10-29 417
一、插值 1.1文本 文本中的数据绑定是数据绑定最常见的形式，就是使用双大括号 {undefined{}}，这个大括号的内容时刻与响应式系统中监测的数据绑定着，只要响应式系统中的数据发生变化，大括号的内容就会跟着发生变化，接下来我们来试试一下吧。 示例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- v.
Vue 3模板语法.pdf
最新发布
02-21
### Vue 3模板语法知识点详解 #### Vue.js模板语法概述 Vue.js采用了基于HTML的模板语法，这使得开发者能够以声明式的方式将DOM绑定至底层组件实例的数据。Vue.js的所有模板都是合法的HTML，因此可以被遵循规范的...
go-vue-ssr:Go的预编译模板引擎，类似于vue的模板语法
03-10
Go的预编译模板引擎，类似于vue的模板语法。 嘿，走吧 有关的 ：不用预编译，更方便的vue-like模板引擎。 原因 服务端渲染相较于前端渲染有以下好处： 利于内容型网站的SEO。 在性能更差的手机端浏览体验更佳。 ...
Vue学习(第一章 Vue核心）
ok_1234的博客
01-23 905
这里写目录标题Vue的基本使用vue的基本使用模板语法计算属性和监视回调函数class与style绑定条件渲染列表渲染 Vue的基本使用 vue的基本使用 引入vue.js 创建vue对象 el:指定根element（选择器） data:初始化数据（页面可以访问） 双向数据绑定：v-model 显示数据：{{xxx}} 理解vue的mvvm实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
vue和es6的学习笔记
cccc0906的博客
08-01 665
vue 基础 显示数据 文本显示数据用{{}}，html代码显示数据用v-html指令； 使用js表达式 {{a+1}} {{ok?‘yes’:‘no’}}如果满足ok就显示yes不满足就显示no 指令 v-if控制显示隐藏: 满足条件就显示，不满足就不显示 v-bind响应式更新 v-on:click点击时间 动态参数：可以用方括号括起来的 JavaScript 表达式作为一个指令的参数 组件 组件的复用 一个组件的date选项必须是一
利用Vue的插槽和插件功能扩展组件的自定义功能
rocklee的专栏
07-14 823
目标：让Jmodal具有安插自定义按钮的功能步骤自定义的取消和确定取用$emit(‘xx’)的方法直接调用相关事件以实现动态关联事件的调用 调用JModal 要指明slots有什么，再提供插件
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 687
Vue的基础语法
Vue:使用JavaScript 表达式
weixin_30443813的博客
04-26 409
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div&gt...
Vue模板语法（上）
遥是此间桃花庵
09-17 158
1. 模板语法 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? ‘YES’ : ‘NO’...
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
整理vue2.0中的指令
青蛙背蝎子过河的博客
07-31 254
1.  v-bind(语法糖 ":"). 将dom的属性值变成js环境,或者绑定样式和类; 2.  v-model. 实现数据双向绑定; 3.  v-on(语法糖"@").  为dom绑定事件; 4.  v-if,v-else,v-else-if.  条件模板指令. v-if可通过true和false的切换实现创建和删除元素; 5.  v-show   实现元素的显隐,配合.demo-en...
vue键盘按下事件_vue修饰符可能是东半球最详细的文档（滑稽）
weixin_33594662的博客
01-26 850
前端媛猿读完需要8分钟速读仅需 5分钟作者：李大雷https://segmentfault.com/a/1190000016786254为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~目录表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符(实在不知道叫啥名字)表单修饰符填写表单，最常用的是什么？input！v-mo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值