Vue模板语法（一）

最新推荐文章于 2024-05-14 21:04:35 发布
最新推荐文章于 2024-05-14 21:04:35 发布
阅读量204 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60375302/article/details/121051331
版权

目录

一.插值

1、 文本

2、html

3、属性

4、 表达式

二、指令

1、核心指令

①、v-if|v-else|v-else-if

②、 v-show

 ③、v-for

④、v-on

 2、动态参数

 三、过滤器

1、全局过滤器

 2、局部过滤器 

四、计算属性和监听属性

1、计算属性

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>
			<h3>{{msg}}</h3>
			<p>html串</p>
			<div v-html="htmlstr"></div>
			<p>vue中的属性</p>
			<!-- 所有的原生属性，要利用vue变量，都需要在对应的属性前加 v-bind -->
			<a v-bind:href="hrefstr">百度</a>
			<input :value="valuestr"/>
			<p>表达式</p>
			{{str.substring(0,4)}}<hr />
			小黑{{number+1}}<hr />
			{{ok ? 'yes' : 'no'}}<hr />
			<span :id="'id_'+id">xx</span>
	</body>
	
	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		new Vue({ 
			el: '#app',
			data() {
				return {
					msg: '小白不白',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
					hrefstr:'https://www.baidu.com',
					valuestr:'224',
					str:'小白不是小黑',
					number:59,
					ok:true,
					id:123
				}
			}

		})
	</script>
</html>

1、 文本

{{msg}}

<!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>
	</body>	
	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		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>html串</p>
			<div v-html="htmlstr"></div>
	</body>
	
	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		new Vue({ 
			el: '#app',
			data() {
				return {
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
				}
			}
		})
	</script>
</html>

 运行结果;

3、属性

 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>vue中的属性</p>
			<!-- 所有的原生属性，要利用vue变量，都需要在对应的属性前加 v-bind -->
			<a v-bind:href="hrefstr">百度</a>
			<input :value="valuestr"/>
	</body>
	
	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		new Vue({ 
			el: '#app',
			data() {
				return {
					hrefstr:'https://www.baidu.com',
					valuestr:'224'
				}
			}

		})
	</script>
</html>

运行结果：

4、 表达式

 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>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>表达式</p>
			{{str.substring(0,4)}}<hr />
			小黑{{number+1}}<hr />
			{{ok ? 'yes' : 'no'}}<hr />
			<span :id="'id_'+id">xx</span>
	</body>
	
	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		new Vue({ 
			el: '#app',
			data() {
				return {
					str:'小白不是小黑',
					number:59,
					ok:true,
					id:123
				}
			}

		})
	</script>
</html>

运行结果：

二、指令

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

1、核心指令

①、v-if|v-else|v-else-if

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

         他们只能是兄弟元素

          v-else-if上一个兄弟元素必须是v-if

          v-else上一个兄弟元素必须是v-if或者是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>
			分数：<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">
		// 绑定边界 ES6具体表现
		new Vue({
			el: '#app',
			data() {
				return {
					score: 78,
			},
					})
	</script>
</html>

运行结果：

②、 v-show

<!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>
			分数：<input v-model="score" />
			<div v-if="score>80">优秀</div>
			<div v-else-if="score>60">良好</div>
			<div v-else="score<60">还需努力</div>
			<p>v-show</p>
			<div v-show="score>90"> v-show-优秀学员</div>
			<div v-if="score>90"> v-if-优秀学员</div>	
		</div>

	</body>

	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		new Vue({
			el: '#app',
			data() {
				return {
					score: 78,
			}
		})
	</script>
</html>

运行结果：

 

  v-show与v-if的区别：

当v-show与v-if符合判断条件则都出现，若不符合判断条件，v-show被隐藏，而v-if直接消失

 ③、v-for

 遍历数组: 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">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>v-for</p>
			<select v-model="hobbySelect">
				<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
			</select>
			 <input v-model="hobbySelect" /> 
		</div>

	</body>

	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		new Vue({
			el: '#app',
			data() {
				return {
					hobby: [{
							id: "1",
							name: "帅哥"
						},
						{
							id: "2",
							name: "游戏"
						},
						{
							id: "3",
							name: "美女"
						},
					],
					hobbySelect:3
				};
			}		})
	</script>
</html>

运行结果：

CheckBox 

<!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-for</p>
			<select v-model="hobbySelect">
				<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
			</select>
			<div v-for="h in hobby">
				<input  :value="h.id" type="checkbox"/>{{h.name}}
			</div>
		</div>

	</body>

	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		new Vue({
			el: '#app',
			data() {
				return {
					score: 78,
					hobby: [{
							id: "1",
							name: "帅哥"
						},
						{
							id: "2",
							name: "游戏"
						},
						{
							id: "3",
							name: "美女"
						},
					],
					hobbySelect:3
				};
			},
					})
	</script>
</html>

运行结果：

④、v-on

v-on缩写 ： @

<!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-on</p>
			<button v-on:click="handel">触发事件</button>
			<button @click="handel">触发事件2</button>
		</div>

	</body>

	<script type="text/javascript">
		// 绑定边界 ES6具体表现
		new Vue({
			el: '#app',
			methods:{
				handel(){
					alert("触发事件")
				}
			}
		})
	</script>
</html>

 运行结果：

 2、动态参数

动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

<!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]="handel">动态参数</button>
		</div>

	</body>

	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
				 evname:'click'
                //点击两次触发
				//evname:'dblclick'
				};
			},
			methods:{
				handel(){
					alert("触发事件")
				}
			}
		})
	</script>
</html>

运行结果;

 三、过滤器

1、全局过滤器

 Vue.filter('filterName', function (value) {

     // value 表示要过滤的内容

   });

<!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}}<hr />
		</div>
	</body>

	<script type="text/javascript">
	//全局过滤器
		Vue.filter('all', function(value) {
			// value 表示要过滤的内容
			return value.substring(0,3)
		});
		new Vue({
			el: '#app',
			data() {
				return {
					msg: "小白不是小黑"
				};
			}
		})
	</script>
</html>

运行结果：

 2、局部过滤器 

局部过滤器

   new Vue({

     filters:{'filterName':function(value){}}

   });

<!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|single}}<hr />
			<p>过滤器串联   </p>
			{{msg|all|single}}<hr />
			<p>过滤器带参数：</p>
			{{msg|param(1,4)}}			
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					msg: "小白不是小黑"
				};
			},
			filters:{
				'single':function(val){
					return val.substring(2,3)
				},
				'param':function(val,star,end){
					return val.substring(star,end)
				}
			}
		})
	</script>
</html>

②、过滤器串连

 {{msg|all|single}}

③、带参数

{{msg|param(1,4)}}

 'param':function(val,star,end){
                    return val.substring(star,end)
                }

 运行结果：

 

四、计算属性和监听属性

1、计算属性

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理

<!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: 600;height: 300px;">
				<tr>
					<td>衣服</td>
					<td>100</td>
					<td>
						<input v-model="yifu" />
					</td>
					<td>
						{{yifuTotal}}
					</td>
				</tr>
				<tr>
					<td>书</td>
					<td>30</td>
					<td>
						<input v-model="book" />
					</td>
					<td>
						{{bookTotal}}
					</td>
				</tr>
				<tr>
					<td>鞋子</td>
					<td>70</td>
					<td>
						<input v-model="xiezi" />
					</td>
					<td>
						{{xieziTotal}}
					</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">{{total}}</td>
				</tr>
			</table>
		</div>

	</body>

	<script type="text/javascript">
	//全局过滤器
		Vue.filter('all', function(value) {
			// value 表示要过滤的内容
			return value.substring(0,3)
		});
		new Vue({
			el: '#app',
			data() {
				return {
					yifu: 1,
					book:1,
					xiezi:1,
					km:2,
					m:2000
				};
			},
			computed:{
				yifuTotal(){
					return this.yifu*100
				},
				bookTotal(){
					return this.book*30
				},
				xieziTotal(){
					return this.xiezi*70
				},
				total(){
					return this.yifuTotal+this.bookTotal+this.xieziTotal
				}
			},
		
		})
	</script>
</html>

运行结果：

2、监听属性

   watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

<!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>
			千米：<input v-model="km"/> 
			米：<input v-model="m"/>
		</div>

	</body>

	<script type="text/javascript">
	//全局过滤器
		Vue.filter('all', function(value) {
			// value 表示要过滤的内容
			return value.substring(0,3)
		});
		new Vue({
			el: '#app',
			data() {
				return {
					km:2,
					m:2000
				};
			},
			methods: {
				handel() {
					alert("触发事件")
				}
			},
			watch:{
				m:function (v){
					this.km= parseInt(v)/1000;
				},
				km:function (v){
					this.m= parseInt(v)*1000;
				}
				
			}
		})
	</script>
</html>

 运行结果：

小白不黑哦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
知识总结 Vue
qianjun111111的博客
02-24 453
1. Vue实例化 1.创建一个app （application应用） 2 定义数据data 3 把app实例挂在到#app节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue/js/vue.js" type="text/javascript" charset="utf-8">&
vue模板语法上集
qq_53601862的博客
10-30 182
一.插值 1.文本 {{msg}} <!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&gt...
Vue（二）——基本操作
rjlmylover_zyw的博客
09-11 1120
data里面的值发生变化时，input标签里面的值也会变化，同时因为v-model，当input标签里的值变化时，data里面的值也变。给里面的绑定了点击事件，当里面的被触发之后会让外层的也触发，我们不想让外层的触发，就要阻止冒泡。和插值表达式只能渲染纯文本内容，如果把包含HTML标签的字符串渲染为页面的HTML元素，用。如果默认不需要被展示，后期才又可能被展示，使用v-if。vue控制父元素下面的子元素，el就是他们的父元素。用来在不操作DOM的情况下，快速获取表单的数据。双向绑定指令针对表单。
Vue学习v-if与v-else-if
最新发布
李长渊的博客
05-14 981
Vue学习v-if与v-else-if
vue基本语法使用
qq_43551769的博客
11-08 373
20191108 1、插件表达式：{{}} （1）例子： <p>{{msg}}</p> （2）作用： ​ 用于传递vue对象中定义的数据变量，双向绑定的，vue对象中的数据和页面中数据是跟随对方变化而变化的。 2、常见指令：v-cloak、v-bind、v-on、v-model、v-for、v-if、v-show （1）v-cloak ​ ①例子： <style...
Vue.js基础1
weixin_44289981的博客
05-17 268
Vue.js基础 一.Vue基础： 1.Vue基础代码结构与插值表达式： <body> <div id="app"> <p>{{message}}</p> </div> </body> <script> var app = new Vue({ el: '#app', data: { message:"学习Vue" } }) </script> 值得注意的是，当网络较慢时，网页还
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，文本插值是使用 Mustache ...
Vue 3模板语法.pdf
02-21
Vue.js的模板语法为开发者提供了一种简单、直观的方式来构建交互式的Web应用。它不仅支持基本的文本插值和属性绑定，还提供了许多高级功能，如条件渲染、列表渲染和自定义指令等。通过深入理解这些概念和技术，...
day01-Vue模板语法.zip
01-17
Vue模板语法是Vue.js的一个核心特性，它允许开发者使用声明式的HTML来描述应用的状态与视图之间的关系。以下是一些关于Vue模板语法的关键知识点： 1. **数据绑定**：Vue使用双大括号`{{ }}`进行文本插值，将数据...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
Vue-基础
u011360133的专栏
05-28 269
看Vue文档整理笔记，便于自己学习 目录 1、模板语法 2、计算属性和侦听器 计算属性：computed声明一个计算属性reversedMessage 方法：methods 侦听属性：watch有一些数据需要随着其它数据变动而变动时使用 计算属性的 setter，计算属性默认只有 getter，需要时可以提供一个 setter 侦听器：当需要在数据变化时执行异步或开销较大...
vue中的常用基础指令
weixin_50641294的博客
02-26 290
vue中的常用基础指令总结 1.v-text指令（内容渲染指令） <template> <div> <h1>这个文件主要说明v-text的使用</h1> <p>作用:设置标签的文本内容</p> <p>{{msg}}</p&g...
Vue 常见指令
qq_41304707的博客
11-16 180
v-on <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> var vm = new Vue({ el: '#app', data:{ message:'LOVE' }, methods:{
Vue基础语法（1）
Xmengyan的博客
08-29 166
一.插值操作 1.Mustache (双大括号) {{}} 例： <div id="app"> <p>{{message}}</pp> <p>{{message}} 易烊千玺!</p> <p>{{counter * 2p> </div>3 <script> const app = new Vue({ el: '#app', data: { message
Vue基础知识总结（二）
张媛的博客
05-29 158
8、vue插槽 8.1、案例1（了解插槽）: 父组件：mytest.vue <template> <div> <div>大家好我是父组件</div> </div> <myslot> <p>测试一下吧~内容在这里显示</p> </myslot> </template> <script> ...
Vue学习笔记09- v-else-if的玩法
doublewe的博客
01-17 397
前言： 我们使用v-if、v-else-if和v-else就可以像条件判断一样去玩这个标签。 1.首先我们创建一个vue实例： 这次我们使用随机数来玩这个条件语句。 const app = new Vue({ el: "#app", //根据名称操作div,作用域只在该div data: { random: 0 ...
Vue模板语法（二）
凉茶铺的博客
01-17 2074
介绍了vue条件语句、v-show、template元素、v-show和v-for模板语法的使用方法，对其用法进行了说明。
vue.js--条件语句 v-else-if
qq_57218752的博客
03-21 1280
条件语句 v-else-if 条件语句 v-else-if指令的作用与JavaScript中else if语句效果一样，应用指令可以进行更多的判断和输出不同的结果 下面从一道经典的题来看看如何使用： 将某学校的学生成绩转化为不同等级 优秀 大于等于90分 良好 大于等于75分 及格 大于等于60分 不及格 小于60分 在这里分成四个部分用传统的JavaScript的else if语句想想怎么写！在这里先思考一下 其实v-else-if语句和你所想的没有太大区别。 <!DOCTYPE html
vue模板语法里读取数组的某一项
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个元素，可以这样写： ``` {{ list[1] }} ``` 注意：数组下标是从0开始的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值