Vue模板语法（上）

最新推荐文章于 2024-07-23 15:45:06 发布
最新推荐文章于 2024-07-23 15:45:06 发布
阅读量59 收藏
点赞数
分类专栏： JAVA基础 文章标签： vue.js javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55556488/article/details/121096931
版权

一.插值

① 文本
          {{msg}}
    ② html
          使用v-html指令用于输出html代码          
    ③ 属性
          HTML属性中的值应使用v-bind指令
  ④ 表达式
          Vue提供了完全的JavaScript表达式支持
          {{str.substr(0,6).toUpperCase()}}
          {{ number + 1 }}
          {{ ok ? 'YES' : 'NO' }}
          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li> 

 例：

<!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   可缩写为  :value="valuestr"-->
			<a v-bind:href="hrefstr">百度</a>
			<input v-bind:value="valuestr"/>
			<p>表达式</p>
			{{str.substring(0,3).toUpperCase()}}
			涵涵：{{number+1}}
			{{ok?'yes':'no'}}
			<span v-bind:id="'sid_'+id">我的Id是js动态生成的</span>
		</div>
	</body>
	<script type="text/javascript">
	//	绑定边界 ES6具体体现
	new Vue({
		el:'#app',
		data(){
			//ctrl+k
			return{
				msg:'vue你大爷的',
				htmlstr:'<h3 style="color:red">这是红色字体</h3>',
				hrefstr:'http://www.baidu.com',
				valuestr:'哈哈哈  太好了吧 ',
				str:'smile',
				number:59,
				ok:true,
				id:50
				};
			
		}
	
	})
		
	</script>
</html>

 二 ：指令

指的是带有“v-”前缀的特殊属性
    ① 核心指令
          (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

          v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
            他们只能是兄弟元素
            v-else-if上一个兄弟元素必须是v-if
            v-else上一个兄弟元素必须是v-if或者是v-else-if

          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下标

         v-bind
          v-on
          v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   
            v-for/v-model一起绑定[多选]复选框和单选框

② 参数
          一些指令能够接收一个“参数”，在指令名称之后以冒号表示，例如：
          <a v-bind:href="url">...</a>
          在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定 
          <a v-on:click="doSomething">...</a>
          在这里click参数是监听的事件名。
例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>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">优秀学员</div>
			<div v-if="score>90">优秀学员</div>
			<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 v-for="h in hobby">
				<input :value="h.id" type=checkbox />{{h.name}}
			</div>
			<p>v-on</p>
			<button v-on:click="handle">触发事件</button>
			<button @click="handle">触发事件2</button>
		</div>
	</body>
	<script type="text/javascript">
	//	绑定边界 ES6具体体现
	new Vue({
		el:'#app',
		data(){
			//ctrl+k
			return{
			
				score:78,
				hobby:[
					{id:"1",name:"打球1"},
					{id:"2",name:"打球2"},
					{id:"3",name:"打球3"}
				],
				hobbyselect:3
				};
		},
		methods:{
			handle(){
				alert("hhh");
			}
		}
	
	})
		
	</script>
</html>

三.动态参数 

①从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
          <a v-bind:[attrname]="url"> ... </a>

          同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
          <a v-on:[evname]="doSomething"> ... </a>

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

 ②可简写
          Vue为v-bind和v-on这两个最常用的指令，提供了特定简写
          <a v-bind:href="url">...</a>
          <a :href="url">...</a>
          <a v-on:click="doSomething">...</a>
          <a @click="doSomething">...</a> 

例3：
 

<!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">
	//	绑定边界 ES6具体体现
	new Vue({
		el:'#app',
		data(){
			//ctrl+k
			return{
			
				evname:'dblclick'
			
		}
	},
	methods:{
		handle(){
			alert("hhh");
		}
	}
	})
		
	</script>
</html>

 

 四.过滤器 

全局过滤器
   Vue.filter('filterName', function (value) {
     // value 表示要过滤的内容
   });
   局部过滤器
   new Vue({
     filters:{'filterName':function(value){}}
   });

   vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
   <!-- 在两个大括号中 -->
   {{ name | capitalize }}

   <!-- 在 v-bind 指令中 -->
   <div v-bind:id="rawId | formatId"></div>
   
   注1：过滤器函数接受表达式的值作为第一个参数 
   注2：过滤器可以串联     
        {{ message | filterA | filterB }}
   注3：过滤器是JavaScript函数，因此可以接受参数： 
        {{ message | filterA('arg1', arg2) }}

例4：
 

<!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>
		{{msge|all}},{{msge|filterName}},{{msge|all|filterName}},{{msge|param(4,5)}}
		</div>
	</body>
	<script type="text/javascript">
	//全局过滤器
	 Vue.filter('all', function (value) {
	     // value 表示要过滤的内容
		 return value.substring(1,4);
	   });
	//	绑定边界 ES6具体体现
	new Vue({
		el:'#app',
		data(){
			//ctrl+k
			return{
			
				msge:"abcdef"
			
		}
	},
	   filters:{'filterName':function(valu){
		   return valu.substring(2,3);
	   },
	   'param':function(val,start,end){
		   return val.substring(start,end);
	   }
	   }
	})
		
	</script>
</html>

五 计算属性和监听属性

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

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

   小结：计算属性和监听属性的区别
        自己的理解
         computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
         computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
         举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择 
         与watch之间的区别：

　　     刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
         watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

  那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
        上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!

 例5：
 

<!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: 500px;height: 300px;">
			<tr>
				<td>帽子</td>
				<td>22</td>
				<td>
					<input v-model="maozi" />
				</td>
				<td>
					{{maoziTotal}}
				</td>
			</tr>
			<tr>
				<td>衣服</td>
				<td>23</td>
				<td>
					<input v-model="yizi" />
				</td>
				<td>
					{{yiziTotal}}
				</td>
			</tr>
			<tr>
				<td>裤子</td>
				<td>24</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) {
	     // value 表示要过滤的内容
		 return value.substring(1,4);
	   });
	//	绑定边界 ES6具体体现
	new Vue({
		el:'#app',
		data(){
			//ctrl+k
			return{
			
				maozi:1,
					yizi:1,
				kuzi:1,
				km:2,
				m:2000
			
			
		}
	},
	   computed:{
		   maoziTotal(){
			   return this.maozi*22;
		   },
		   yiziTotal(){
			   return this.yizi*23;
		   },
		   kuziTotal(){
			   return this.kuzi*24;
		   },
		   total(){
			 return   this.maoziTotal+this.yiziTotal+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>

 

 

微醺3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue模板语法
yzq102873的博客
09-02 846
vue模板语法
Vue模板语法
qq_62331938的博客
09-02 2279
本篇文章将要分享的内容为Vue的模板语法。
Vue的模板语法
m0_46176643的博客
04-20 3424
1.3.模板语法 1.3.1效果 第一大类是插值语法：把指定的值放入指定的位置 插值语法往往是用于指定标签体内容(起始标签和结束标签中间所夹着的内容就是一个标签体) 第二大类是指令语法：固定的写法: <h></h> v-bind:是绑定的 意思，它可以给所有的任何一个标签属性动态的去绑定值 简写：v-bind: ====> : 指令语法管理标签属性 总结： Vue模板语法有2大类： 插值语法： 功...
Vue 模板语法-插值
zhanchulan的博客
03-06 672
Vue 的模板语法非常灵活，其中最基础也是最常用的语法就是插值。需要注意的是，在插值语法中，只能使用最基础的 JavaScript 表达式，不能使用语句或控制流语句，例如 if、for 等等。在属性中使用插值语法也很容易，只需要将需要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为属性的值即可。在指令中使用插值语法和在属性中使用类似，将要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为指令的值。在文本节点中使用插值语法非常简单，只需要将需要动态更新的数据包裹在 {{ }} 中即可。
Vue模板语法——插值
热门推荐
布小禅的博客
10-31 1万+
Vue具有自己的模板语法，如果你已经有了后端的学习经验，那么你应该知道，在后端框架中具有框架自带的前端语法，比如django就有自带的模板语法，可以直接写在后端，与服务器进行交互。
Vue 模板语法
sinat_38021004的博客
09-09 1438
模板语法 Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。 模板 template 的三种写法 1. V
Vue2-模板语法
yulingpan123的博客
04-24 389
template三种写法，Vue.js模板语法，指令与修饰符
vue模板语法是什么？
weixin_66375317的博客
05-05 6067
vue模板语法是什么？
Vue中的模板语法
qq_45954420的博客
03-06 701
一、基础语法 1.{{XXX}} 中的内容要写js表达式 且xxx可以自动读取到data中的所有属性 2.一旦data中的数据发生改变 那么页面中用到该数据的地方会自动更新 注意区分 js表达式 和 js代码（语句） js表达式 ：一个表达式会产生一个值，可以放在任何一个需要值得地方 例如 a a+b demo(1) x === y ? 'a' : 'b' js代码（语句）: if(){} for(){} 二、模板语法 1.插值语法 功能：用于解析标签体内容 写法：{{xxx}},xxx
Vue基础之模板语法介绍
m0_73647713的博客
09-18 971
上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
Vue 3模板语法.pdf
02-21
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
Python Formulas模型以JSON格式文件导出导入
最新发布
Humbunklung的专栏
07-23 349
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 315
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 312
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 747
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
vue v-bind：属性（简写是 ：属性）的正确用法
m0_47505062的博客
07-23 237
我有一个自定义组件 coolBtn ，我绑定了它的属性 name，如果只是单纯给它的属性 name 赋一个字符串的值，那么就应该写成。括起来的，表示这是一个变量，这个变量的值是需要到指定的地方去先找到变量 Ice，然后拿到变量里对应的值，最后再给到属性 name，括起来的，表示这是一个具体的值是一个字符串，可以直接赋给属性 name。也就是说，在 vue 的组件中，对其属性进行绑定（也就是赋值）的时候，但如果我想给它赋值一个变量而非某个具体的字符串值的时候，应该写成。，也可以是一个 具体的。
vue基础中的模板语法
04-02
Vue.js的模板语法是用来描述组件的渲染输出的。它使用的是一种基于HTML的模板语言，可以通过一些特定的指令来绑定数据和事件，实现动态数据绑定和交互效果。以下是Vue.js模板语法的基本用法： 1. 插值表达式{{}}：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值