Vue的基本语法上

最新推荐文章于 2022-02-25 13:18:11 发布
最新推荐文章于 2022-02-25 13:18:11 发布
阅读量395 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45464930/article/details/107990771
版权

Vue的基本语法上

前言

今天的博客为大家分享的是Vue的基本语法，学习基本语法之前当然也是可以去看一下Vue的初步学习！

Vue的初步学习

1、插值

主要是用到{{msg}}来进行插值的使用！

1.1、文本插值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue的插值</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>
<div id="app">
<h1>  Vue的插值 title={{title}},ts={{ts}}</h1><br/>
</div>	
<script type="text/javascript">
var  vue=new Vue({
   el:'#app',
   data:function(){
   	return{
   		title:'hello Vue的插值！',
   		ts:new Date().getTime()
   	}
   }
});
</script>
</body>
</html>

效果呈现

在这里插入图片描述

1.2、html

主要是使用v-html指令用于输出html代码！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue的html</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>
<div id="app">
	<h1>Vue的html</h1>
    <div v-html="html"></div><br />
</div>
<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				html:'<input type="text" value="LYF">'
			}
		}
	});
</script>
</body>
</html>

这一行就是使用了v-html指令

 <div v-html="html"></div><br/>

这一行是拼接一个htm片段代码 并且设置默认值

html:'<input type="text" value="LYF">'

效果展示

在这里插入图片描述

1.3、属性

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue的属性</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>
<div id="app">
<ul>
    <h1>3、a标签跳转</h1>
	<a href="https://www.baidu.com">百度</a><br />
	
	<h1>3.1、v-bind属性</h1>
	<a v-bind:href="href">新浪</a><br/>
	
</div>	
</ul>
<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				href:'http://www.sina.com',
			}
		}
	});
</script>
</body>
</html>

a标签跳转方式

<a href="https://www.baidu.com">百度</a><br />

利用v-bind属性跳转方式

<a v-bind:href="href">新浪</a><br/>

只需要在下面定义对应的href属性就好！

效果展示：

在这里插入图片描述

当然你也可以使用Fn+F12键盘开启开发者模式，查看href属性的形式会更加清晰明了！

在这里插入图片描述

1.4、表达式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue的基本语法</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>
  <div id="app">
  
	<h1>4、表达式</h1>
	str={{str.substr(0,6).toUpperCase()}}
	
	<h1>5、数字的表达式</h1>
	number={{number+1}}
	
	<h1>6、三元运算符</h1><br />
	{{ ok ? 'YES':'NO'}}
	
	<h1>7、拼接id</h1>
	<li v-bind:id="'list-'+id">我的Id是js动态生成的!</li>
 </div>	

<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				str:'lyfdezhongshifensi',
				number:15,
				ok:false,
			    id:'LYF'
			}
		}
	});
</script>
</body>
</html>

这一行代码是将字符串截取到第六位，再转大写 !

str={{str.substr(0,6).toUpperCase()}}

这一行代码是给定义的number属性进行+1的赋值！

number={{number+1}}

这一行代码是使用的三元运算符，给ok属性进行定义，当ok属性为false时候，则输出No，反之则输出YES !

{{ ok ? 'YES':'NO'}}

效果展示：

在这里插入图片描述

2、指令

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

2.1、核心指令

(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

2.2、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

注意：三者之间为兄弟元素！

第一种情况：当定义的sex属性为boy：

在这里插入图片描述

第二种情况：当定义的属性为girl：

在这里插入图片描述
第三种情况：当定义的sex属性既不为boy或girl：

在这里插入图片描述

2.3、v-show指令

v-show指令会渲染其身后表达式为false的元素，给这样的元素添加css代码：style=“display:none”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>

<div id="app">
	  <h1>2、v-show显示</h1>
	  <input type="checkbox" v-model="show"/>隐藏或显示
	  <div v-show="show">
		  是李易峰啊！
	  </div>
</div>	

<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				show:false,
			}
		}
 });
</script>
</body>
</html>

效果展示：

在这里插入图片描述

2.4、v-for指令

v-for指令有点类似JS的遍历 !

遍历的种类具体解析
遍历数组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>Vue</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>

<div id="app">
	  <h1>3、v-for循环</h1>
	  <div v-for="st in students">
		  {{st}}
		  {{st.name}}
	  </div>
</div>	

<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				students:[
					{id:1,"name":"小明","sex":"男"},
					{id:2,"name":"小张","sex":"女"},
					{id:3,"name":"小李","sex":"男"},
					{id:4,"name":"小汪","sex":"女"},
					{id:5,"name":"小兰","sex":"女"}
				],
		  }
		}
	});
</script>
</body>
</html>

这种方式有点类似于el表达式的取值！

 {{st.name}}

在这里插入图片描述
v-bind、v-on、 v-model就不做过多解释！

2.5、v-model指令

v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>

	<div id="app">
		  <h1>5、利用v-model绑定数据</h1>
		  KB:<input type="text" name="kb" v-model="kb"/><br/>
		  MB:<input type="text" name="mb" v-model="mb"/><br/>
	</div>	
	
	<script type="text/javascript">
		var  vue=new Vue({
			el:'#app',
			data:function(){
				return{
					kb:1024,
					mb:1
				}
			}
		});
	</script>
</body>
</html>

效果展示：

在这里插入图片描述

2.6、v-for/v-model指令

v-for/v-model一起绑定[多选]复选框和单选框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>

<div id="app">
	  <h1>v-model  v-for两者的绑定</h1>
	  <div v-for="st in students">
	  <input type="checkbox" v-model="st.id" />{{st.name}}
	  </div>
</div>	

<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				students:[
					{id:1,"name":"小明","sex":"男"},
					{id:2,"name":"小张","sex":"女"},
					{id:3,"name":"小李","sex":"男"},
					{id:4,"name":"小汪","sex":"女"},
					{id:5,"name":"小兰","sex":"女"}
				],
			}
		}
	});
</script>
</body>
</html>

效果展示：

在这里插入图片描述

2.7、 v-model、watch属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>

<div id="app">
	  <h1>KB和MB之间的转换 监听属性</h1>
	  <!-- 主要是使用了监听属性 在购物车中做小计以及总价的结算可利用该属性-->
	   KB:<input type="text" name="kb" v-model="kb"/><br/>
	   MB:<input type="text" name="mb" v-model="mb"/><br/>
</div>	

<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				kb:1024,
				mb:1
			}
		},
		/* 监听属性*/
		watch:{
			kb:function(v){
				this.mb=v/1024;
			},
			mb:function(v){
				this.kb=v*1024;
			}
		}
	});
 </script>
</body>
</html>

效果展示：

在这里插入图片描述

3、动态参数

可以用方括号括起来的JavaScript表达式作为一个指令的参数

 <a v-bind:[attrname]="url"> ... </a>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>

<div id="app">
	   <h1>8、动态参数</h1>
	   <a v-bind:[attributename]="url">baidu</a>
</div>	

<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				attributename:'href',
				url:'https://www.baidu.com',
			}
		}
	});
</script>
</body>
</html>

动态参数的值可以动态变化 但是需要注意回避大写

效果展示：

在这里插入图片描述
跳转后：

在这里插入图片描述

4、v-bind和v-on的简写

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写 !

  • v-bind的简写: v-bind等同于冒号

  • .v-on的简写： v-on等同于@

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue的基本语法</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>

<div id="app">
	<h1>3.1、v-bind属性</h1>
	<a v-bind:href="href">新浪</a><br/>
	
	<h1>3.1.1、Vue的v-bind简写</h1><br/>
	<a :href="href">新浪微博</a><br/>
	
	<h1>3.1.2、v-on属性</h1><br/>
	<input type="button" value="按钮" v-on:click="onclick()"/>
	
	<h1>3.1.3、Vue的v-on简写</h1>
	<input type="button" value="简写使用的按钮" @click="onclick()" /><br/>
	
</div>	
	
<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				href:'http://www.sina.com',
			}
		},
		methods:{
			onclick(){
				alert(11111);
			}
		}
	});
</script>
</body>
</html>

在这里插入图片描述

当然不管是哪种方式，最种的效果都是一样的！

总结

Vue的基本语法第一部分就到这里了，后续会继续分享Vue的相关知识点，Vue的使用过程中多注意标点符号，方法和方法之间用逗号隔开，属性与属性之间以逗号隔开，以及动态参数中的回避大写！

秃头程序汪
关注
专栏目录
vue基础语法
weixin_66277385的博客
04-27 792
模板语法 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...
VUE只显示名字最后一个字，其他的用*代替
Lidadeng的博客
03-18 1138
用过滤函数filter就可以了。 过滤函数filter,是与mounted，created平级位置 过滤函数filter，与mounted平级!value是要修改的参数值在这里插入图片描述 第一个参数是显示的字段，第二个是过滤器函数的名字在这里插入图片描述 ...
v-for遍历时在遍历后的数据后面加上符号处理
weixin_41940856的博客
02-25 548
<span v-for="(item1, index1) in list" :key="index1"> <span >{{item}}</span> <span v-if="index1 != list.length - 1" :key="`${index1}_1`" >、</span >..
Eighth season eleventh episode,Rachel became very horny??????
xiyangxia666hui的博客
04-03 1983
[Scene: Central Perk, Rachel is looking around the shop as Phoebe returns from getting some more coffee.] Rachel: Phoebe? Phoebe: Yeah? Rachel: Look at that guy by the window, wow! Phoebe: He's awfully short and I think he's talking to himself. And to be c
The shifting preoccupations of the 20th century and the early years of the 21st.
Robin's Log
03-14 2029
Very few words are coined in isolation. Each neologism holds a clue, however faint, of the time in which it was created. The following choice of a single word from each of the last hundred years is in
Fourth season thirteenth episode,Rachel has a crush on some guy???
xiyangxia666hui的博客
11-07 4982
[Scene: A Theatre, Chandler and Ross are there to watch the premiere of Kathy's play.] Chandler: Okay, she is the star of the play. And she is my girlfriend! I get to have sex with the star of the play! Ross: People can hear you. Chandler: I know!! (The pl
vue基本语法讲解.pdf
05-11
Vue 基本语法讲解 一、 Vue 项目重点概念介绍 1. 单页面应用程序：单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序将所有的功能局限在...
vue基本语法综合案例
08-09
vue基本语法综合案例
vue3语法记录 vue3语法记录
最新发布
04-20
### Vue 3 语法记录与知识点详解 #### 监视数据变化：`watch` Vue 3 中 `watch` 的功能非常强大，它可以帮助开发者监视多种类型的数据变化，包括 `ref`、`reactive` 对象、函数返回值以及包含上述类型的数组。 1....
Eighth season fifteenth episode,Joey fell in love with Rachel??????
xiyangxia666hui的博客
04-07 1万+
[Scene: Central Perk. Rachel is getting a cup of coffee as Joey and Phoebe enter and sit down.] Phoebe: Oh! Hey, Rach! Rachel: Hi! Hey, Happy Valentine's Day! Phoebe: Oh, you, too. Joey: Hey, so, uh, how's it going living over at Ross'? Rachel: It's good.
python下载图片
wulong710的专栏
04-08 1294
用python下载图片 import requests import functools import os import chardet import threading import asyncio from concurrent.futures import ThreadPoolExecutor from html.parser import HTMLParser from enum import Enum gPool = ThreadPoolExecutor(30) gLock = threa
Fourth season fifth episode,Chandler likes Joey‘s new girlfriend???
xiyangxia666hui的博客
10-31 2778
[Scene: Central Perk, the gang's all there. Ross has a slip of paper that he throws on the ground tying to get Rachel's attention.] Ross: (picking up the slip of paper) Hello! What's this? Oh right its that girl's phone number. (Rachel ignores him) Yeah-ye
Fourth season twenty-third episode,Ross‘s wedding,the uncut one,uncut,uncut!!!(a little long)
xiyangxia666hui的博客
11-17 7161
[Scene: Chandler and Joey's, Joey and Chandler are getting ready for the flight to London and Monica comes running in.] Monica : Guys, hurry up! The flight leaves in four hours! It could take time to get a taxi! There could be traffic! The plane could leav
first season twelfth episode,Ross is having a boy!!! or girl???
xiyangxia666hui的博客
07-03 2974
[Scene: Central Perk, everyone is there. Ross working on crossword puzzle, starts humming theme from The Odd Couple. Chandler joins in, followed by Monica and Phoebe, then the whole gang. Ross starts humming theme from I Dream Of Jeannie.] Chandler: No-no-
装饰器模式
Fisher3652的博客
07-22 617
1.装饰器模式 一种用于代替继承的技术，无需通过继承增加子类就能扩展对象的新功能。使用对象的关联关系代替继承关系，更加灵活，同时避免类型体系的快速膨胀。 优点： 灵活性：装饰器模式将功能切分成一个个独立的装饰器，在运行期可以根据需要动态的添加功能，甚至对添加的新功能进行自由的组合； 扩展性：当有新功能要添加的时候，只需要添加新的装饰器实现类，然后通过组合方式添加这个新装饰器，无需修改已有代码，符合开闭原则； 与代理模式的区别： 装饰器模式偏重对原对象功能的扩展，扩展后的对象仍是是对象本身；然而代理模式偏重
Second season twelfth and thirteenth episode,what happened in the search for Marcel?
热门推荐
xiyangxia666hui的博客
09-20 2万+
[Scene: In a TV commercial that the gang is watching at Monica and Rachel's.] [A guy is sitting at his desk and his boss comes in and drops a huge pile of papers on his desk. The guy looks dejected.] COMMERCIAL VOICEOVER: Can't get the monkey off your back
java窗体 个人信心_帮忙写下代码java swing,个人信息实例
weixin_35803480的博客
02-25 203
展开全部本人急忙62616964757a686964616fe59b9ee7ad9431333332636264做的:有什么不合要求的请再告诉我：packageshow;importjavax.swing.*;importjava.awt.*;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;publ...
Vue进阶（七十二）：css 样式中 逗号、空格、冒号、点号、~、＞的区别
IT全栈 华强工作室
09-09 5482
css中用逗号隔开表示两个不同类的样式类名用同一个样式； 空格隔开表示从属包含关系，是当前的元素子元素； 逗号隔开表示并列关系，两者之间没有任何关系，可以使用同一个样式。 比如下面的代码示例： <div class="content"> <span class="content-child">子内容</span> 内容</div> &lt...
前端开发vue基本语法
01-04
以下是Vue前端开发的基本语法示例： 1. 条件渲染： ```html <div id="hello-vue"> 现在你能看到我 看不到 const HelloVue = { data() { return { seen: true } }, }; vm = Vue.createApp(HelloVue)....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值