Vue框架---Vue模板语法（一）

鑫709

已于 2022-05-08 00:21:51 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

于 2022-04-27 22:06:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_59610127/article/details/124430532

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了Vue.js的模板语法，包括文本和HTML插值、属性绑定、表达式、指令（如v-if/v-else/v-for/v-show）、计算属性、监听属性、过滤器和计算属性的使用。通过实例展示了如何在Vue应用中实现数据绑定、条件渲染、列表渲染等基本功能，并对比了监听器和过滤器的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-if|v-else|v-else-if

根据其后表达式的bool值进行判断是否渲染该元素

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上

插入

文本

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>{{msg}}</span>
			</ol>	
		</div>
	</body>
	
	<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					ts:new Date().getTime(),
					msg:'hellow vue!!!'			
                }
			},
			methods:{
			}
		});
	</script>

html

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

<div id="app">
	<h1>{{ts}}</h1>
	<h2>插值</h2>
	<ol>
		<li>文本</li>
		<span>{{msg}}</span>
			<li>v-html</li>
		<span v-html="html"></span>
	</ol>	
		</div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					ts:new Date().getTime(),
					msg:'hellow vue!!!',
					html:'<input type="text" value="2" />' 
				}
			},
			methods:{
			}
		});
	</script>

属性

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

    <style>
		.cl{
			color: red;
		}
	</style>
	
		<div id="app">
			<ol>
				<li>v-bing 绑定值</li>
				<span v-bind:class="clg">
					111111111111111111111
				</span>
				<!-- 
				v-model 数据双向绑定
				v-bingd 绑定标签属性值
				{{}}:插值 针对标签中文本值进行插入操作
				 -->
			</ol>	
		</div>

	<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					clg:'cl'
				}
			}
		});
	</script>

表达式

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

<div id="app">
	<ol>	
			<li>表达式</li>
			 {{msg.substr(0,6).toUpperCase()}}
			{{ number + 1 }}
			{{ ok ? 'YES' : 'NO' }}
			 <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
			</ol>	
		</div>

	<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					number:'2',
					ok:true,
					id:2
				}
			}
		});
	</script>

指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

核心指令

v-if|v-else|v-else-if

根据其后表达式的bool值进行判断是否渲染该元素

<div id="app">
	<h2>指令</h2>
		  <ol><br>
	    	<li>v-if/v-else-if/v-else</li>
			<span v-if="sex=='boy'">
				111111111111111
			</span>
			<span v-else-if="sex=='girl'">
				222222222222222
			</span>
			<span v-else>
				333333333333333
			</span>
		 </ol>	

	</div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					sex:'girl ',
				}
			}
		});
	</script>

v-show

v-show="boolean变量/boolean值/表达式"代表显示隐藏。当boolean变量/值/表达式为true时代表显示，否则为false。用该方式来控制显示隐藏并不是将标签移除，而是隐藏起来（即对象未被移除，只是隐藏起来了）。

    <li>v-show和v-model</li>
		<div>
			<input type="checkbox"  v-model="flag"/>已阅读协议
			<div v-show="flag">
				4444444444444444444444
			</div>
		</div>
<script>
	var vm=new Vue({
		el:'#app',
		data:function(){
			return{
				flag:false
			}	
		},
	});
</script>

v-for

基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items"，items是一个数组，item是当前被遍历的数组元素

<div id="app">
            <div v-for="(d,i) in arrays">
				i={{i}}	id={{d}}
			</div>
				
			<div>
				<select>
					<option value="">--请选择---</option>
					<option v-for="d in depts" v-bind:value="d.id">
						{{d.name}}
					</option>
				</select>
			</div> 
				
			<div   v-for="d in depts">
				<input type="checkbox" v-bind:value="d.id" v-model="rs" />{{d.name}}
			</div>
</div>



<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'girl ',
					flag:false,
					depts:[
						{id:1,name:'研发部'},
						{id:2,name:'市场部'},
						{id:3,name:'客服部'},
						{id:4,name:'人事部'},
					]
				}
			}
		});
	</script>

参数及动态参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">
<li>参数,动态参数及简写</li>
				<span>
					<a v-bind:[attrname]="url">百度</a><br>
					<a v-on:[eventname]="doCilck()">点我</a>
					<br><br><br>
					<!-- 简写 
					v-bind:简写 :  如 v-bind:id -> :id
					v-on简写变成@   如 v-on:click -> @click
					-->
					<a 	:[attrname]="url">百度</a><br>
					<a @[eventname]="doCilck()">点我</a>
			</span>
</div>

<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					arrays:[1,2,3,4,5],
					url:'https://www.baidu.com',
					attrname:'href',
					eventname:'dblclick'
				}
			},
			methods:{
				doCilck(){
					alert(123);
				}
			}
		});
	
	</script>

简写

v-bind:简写 : 如 v-bind:id -> :id
v-on简写变成@ 如 v-on:click -> @click

过滤器

使用：

在html中使用：{{变量 | filters中定义的方法}}
在filters:{}中定义所有管道符后面的方法

全局过滤器

全局过滤器定义在实例化外面,过滤全局

局部过滤器

局部过滤器写在vue里面，过滤

<div id="app">
			<h1>{{ts}}</h1>
			
			<h2>过滤器(全局|局部)</h2>
				<div>
					<span>局部过滤器</span>
					{{title|strFilter}}
					<br />
					<span>全局过滤器</span>
					{{dt|dateFilter}}<br />
					<span>过滤器嵌套</span>
					{{dt|dateFilter|strFilter}}
				</div>
				
		</div>

<script>
		//全局过滤器
		Vue.filter('dateFilter',function(v){
			return fmtDate(v,'yyyy年MM日dd');
		});
	
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					ts:new Date().getTime(),
					title:'hellow vue!!!',
					dt:new Date()
				}
			},
			methods:{
			},
			//局部过滤器
			filters:{
				strFilter:function(a){
					return a.substr(0,6).toUpperCase();
				}
			}
			
		});
	
	</script>

属性计算

计算属性中的函数的调用方法和普通函数不同，其不需要加括号调用。只需写出方法名即可调用。

<div id="app">
			<h1>{{ts}}</h1>
			<h2>计算属性</h2>
			<div v-for="s in sore">
				编号={{s.id}} 科目={{s.name}} 成绩={{s.sc}}
			</div>
			
			<span>总分：{{sum}}</span>
			
		</div>

<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					ts:new Date().getTime(),
					sore:[
						{id:1,name:'语文',sc:110},
						{id:2,name:'数学',sc:120},
						{id:3,name:'理综',sc:230},
						{id:4,name:'英语',sc:50}
					]
				}
			},
			computed:{
				sum:function(){
					let s=0;
					//面试题 let 与var区别
					//let 是局部变量  var是全局变量 容易产生数据干扰
					for(let sc of this.sore)
						s+=sc.sc;

					return s;
				}
			}
		});
</script>

计算总成绩，这样就不再需要获取其中标签元素的值，就可以直接计算标签属性的值

在计算属性中需要注意的几点；

如果在页面中动态绑定计算属性，计算属性必须有返回值。
在计算属性的方法中，方法中返回值的变量改变时都会调用该方法（对象和数组对其本身进行操作/引用改变时会调用（eg:数组进行push/splice操作以及重新给其赋值时会调用））
计算属性的get和set方法（在下面例子中，改变firstName/secondName/fullName都会导致其余两个变化）

监听属性

监听变量的变化。函数名为变量名。
若改变数组的元素/对象属性值不会触发watch中的函数，只有当对数组/对象本身进行操作时才会触发（数组/对象的重新赋值、数组的增删）
watch中的每个方法可以接收两个值==（newVal,oldVal）==，只有当数组和对象的引用改变时，新值和旧值时不同的。若只是对数组进行增加元素、删除元素操作，新旧值仍是相同的。

<div id="app">
			<h1>{{ts}}</h1>
			<h2>计算属性</h2>
			kb:<input type="text" v-model="kb"/><br><br>
			mb:<input type="text" v-model="mb"/>
		</div>
<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					ts:new Date().getTime(),
					kb:1024,
					mb:1
				}
			},
			watch:{
				//监听属性必须保证属性存在
				kb:function(v){
					this.mb=v/1024;
				},
				
				mb:function(v){
					this.kb=v*1024;
				}
			}
		});
	</script>

监听两个变量的值，其中一个变了，另一个也跟着变

监听器和过滤器的区别

一般是使用计算属性，因为他有缓存
methods一般是处理业务使用的，只要手动调用了这个方法就会执行，但是computed计算属性，因为他有缓存
watch，是对我们data上面的一些数据进行观察和响应；一般的时候使用计算属性替代watch；因为滥用watch的话，会影响性能。(最开始的Angularjs1.x 就有这个问题)。但是watch有它自己的使用场景，别人不能替代。当需要在数据变化时执行异步或开销较大的操作时。

代码提取码：kjn0

至此，Vue模板语法（一）介绍完毕，由于作者水平有限难免有疏漏，欢迎留言纠错。