【Vue模板语法上】

最新推荐文章于 2024-08-21 09:03:10 发布
最新推荐文章于 2024-08-21 09:03:10 发布
阅读量630 收藏
点赞数
分类专栏： # Vue前端框架 文章标签： Vue 模板语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43943548/article/details/98068020
版权

目录

前言

开始学习Vue了，Vue是一个非常厉害的前端框架，为了以后的使用，Vue的学习是不能抛下滴。

一些大深层的东西暂时还没学，先把基础打牢了再说。

插值

文本语法

普通的文本输出语法: {{}}
当然里面放的是一个Vue边界里面的变量。

为了方便查看，我就放body，和javaScript里面的数据

body:

<body>
		<div id="app">
			<h3>文本</h3>
			{{msg}}	
		</div>
</body>

JavaScript:

<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: "hello world"
				};
			}
		});
	</script>

在这里插入图片描述

html语法

看到了，就差不多明白了吧，就是可以在javaScript里面写html的代码，
然后同样可以放到html中

比如说<span style ="font-size: 30px;">hello world</span>放到div里面去

body

<body>
		<div id="app">
		
			<h3>html</h3>
			<div v-html="vueHtml">
			</div>
			
		</div>
</body>

JavaScript

<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					vueHtml: '<span style ="font-size: 30px;">hello world</span>',	
				};
			}
		});
	</script>

在这里插入图片描述

bind语法

在vue里面有双向绑定，而bind则是一种单向绑定，并不会影响到变量值的改变
body

<body>
		<div id="app">
		
			<h3>属性bind</h3>
			<input type="text" v-bind:value="msg" />
			
		</div>
</body>

JavaScript

<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: "hello world"
				};
			}
		});
	</script>

在这里插入图片描述

表达式

有了表达式，我们才能对其一些数值对其进行一些逻辑处理，使其更加的方便。

其实说来也跟之前我们使用的El表达式感觉差不多。

body

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

JavaScript

<script type="text/javascript">
	new Vue({
			el: "#app",
			data() {
				return {
					str:"http://www.baidu.com",
					number:6,
					ok:true,
					id:5
				};
			}
		});
</script>

在这里插入图片描述

指令

if 指令

if,else if, else 这是我们经常使用过的语法，而在vue中也是有的。
body

<body>
		<div id="app">
		
			<h3>v-if|v-else|v-else-if的使用</h3>
			<input type="text" v-model="score" />
			<div v-if="score>90">A</div>
			<div v-else-if="score>80">B</div>
			<div v-else-if="score>70">C</div>
			<div v-else-if="score>60">D</div>
			<div v-else="">E</div>
			
		</div>
</body>

JavaScript

<script type="text/javascript">
	new Vue({
			el: "#app",
			data() {
				return {
					score: 88
				};
			}
		});	
</script>

在这里插入图片描述
在这里插入图片描述

v-show指令

有些文本框里面没值的时候div没什么东西可以展示，但是给里面的变量进行双向绑定的时候，也就是变量里面有值的时候会将div里面的值展示出来。
body

<body>
		<div id="app">
		
			<h3>v-show</h3>
				<input type="text" v-model="show" />
				<div v-show="show">
					终于有值了
				</div>
				
		</div>
</body>

JavaScript

<script type="text/javascript">
	new Vue({
			el: "#app",
			data() {
				return {
					show:null
				};
			}
		});	
</script>

没有为变量赋值：

在这里插入图片描述
变量有值后：
在这里插入图片描述

v-for指令

也就是通常情况下的遍历，和迭代

body

<body>
		<div id="app">
		
			<h3>v-for</h3>
			<div v-for="item,index in arr">
				{{item}},{{index}}
			</div>
			<br />
			<div v-for="item,index in objArr">
				{{item.name}},{{index}}
			</div>
				
		</div>
</body>

JavaScript

<script type="text/javascript">
	new Vue({
			el: "#app",
			data() {
				return {
					arr: [1, 3, 4, 6],
					objArr: [{
						id: "s001",
						name: "kk"
					}, {
						id: "s002",
						name : "qbl"
					}, {
						id: "s003",
						name: "坤坤"
					}]
				};
			}
		});	
</script>

遍历一个数组和一个集合。
在这里插入图片描述

动态参数

在通常情况下我们使用v-on指令的时候只能定死某个效果。
比如:v-on:click 点击事件

可动态参数可以随时修改事件

body

<body>
		<div id="app">
		
			<h3>动态参数</h3>
			<input type="text" v-model="evname" />
			<button v-on:[evname]="xxx">点我</button>
				
		</div>
</body>

JavaScript

<script type="text/javascript">
	new Vue({
			el: "#app",
			data() {
				return {
					evname:"click"
				};
			},
			methods:{
				xxx(){
					console.log("点我干哈");
				}
			}
		});	
</script>

开始的话就是click事件。
在这里插入图片描述
可如果修改文本框的值后就变事件了。
在这里插入图片描述

过滤器

局部过滤器

过滤器就是为你一个边界里面的变量值进行一个修改,再展示到界面上。

却不会修改原来的变量值。

body

<body>
		<div id="app">
		
			<h3>局部过滤器</h3>
			{{msg}}<br />
			{{msg | a}}<br />
			
			<h3>局部过滤器可串联</h3>
			{{msg}}<br />
			{{msg | a | b }}<br />
			{{msg | b | a }}<br />
				
		</div>
</body>

JavaScript

<script type="text/javascript">
	new Vue({
			el:"#app",
			data(){
				return {
					msg:"http://www.baidu.com"
					
				}
			},
			filters:{
				a(v){
					console.log(v);
					return v.substring(4);
				},
				b(v){
					return v.substring(3);
				}
				
			}
			
		});
</script>

普通过滤器
在这里插入图片描述

过滤器可串联
在这里插入图片描述

全局过滤器

顾名思义，是项目开启时，所有的边界都能使用。

body

<body>
		<div id="app">
		
			<h3>全局过滤器</h3>
			{{msg | c }}<br />
				
		</div>
</body>

JavaScript

<script type="text/javascript">

	Vue.filter('c',function(v){
			return v.substring(7);
		})
</script>

在这里插入图片描述

计算属性，监听属性

计算属性

就是为其两个变量值进行一个计算，然后都可以调用这个结果，

通常在购物车里面使用。

body

<body>
		<div id="app">
		
			<h3>计算属性</h3>
			数量:<input type="text" v-model="num" /><br />
			单价:<input type="text" v-model="price"/><br />
			总价:{{total}}
		</div>
</body>

JavaScript

<script type="text/javascript">

	new Vue({
		el:"#app",
		data(){
			return {
				num:1,
				price:6
			}
		},
		computed:{
			
			total(){
				return parseInt(this.num) * parseInt(this.price);
			}
		}
	});
</script>

在这里插入图片描述

监听属性

监听，就是在一个变量的值发生改变的时候要执行的方法，

一旦发生改变就执行方法

body

<body>
		<div id="app">
		
			<h3>监听属性</h3>
			km:<input type="text" v-model="km" /><br />
			m:<input type="text" v-model="m"/><br />
		</div>
</body>

JavaScript

<script type="text/javascript">

	new Vue({
			el:"#app",
			data(){
				return {
					km:1,
					m:1000
				}
			},
			watch:{
				km(v){
					this.m = v*1000;
				},
				m(v){
					this.km = v/1000;
				}
				
			}
			
		});
</script>

在这里插入图片描述

总结

这些东西都是学习Vue的基础知识，没搞明白，之后的学习也难搞。

内容不深奥，只不过我得常回来看看啦。|ू･ω･` )

Thanks♪(･ω･)ﾉ希望对大家有所帮助

么卡
关注
专栏目录
Vue模板语法
qq_62331938的博客
09-02 2560
本篇文章将要分享的内容为Vue的模板语法。
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
【Vue】模板语法
最新发布
sishihao的博客
08-21 1261
在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。ref } from 'vue' let username = ref('张三') function onModifyUsername() {
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
vue模板语法
迪克程序
03-02 342
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 如果你熟悉虚拟
Vue.js系列之三模板语法
weixin_34122548的博客
11-17 99
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 如果你熟悉虚拟 DOM...
Vue 模板语法
wx1762813417的博客
09-18 235
模板语法 1. 插值 文本 {{msg}} html 使用v-html指令用于输出html代码 属性 HTML属性中的值应使用v-bind指令 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? ‘YES’ : ‘NO’ }} < li v-bind:id="‘lis...
Vue.js模板语法深度解析
在Vue.js中，模板语法是实现数据绑定和响应式更新的关键部分。本篇文章将深入讲解Vue.js的常用模板语法。 1. 文本渲染 在Vue.js中，我们可以使用`{{ }}`插值表达式来实时渲染文本内容。当数据模型发生变化时，这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值