vue基本语法及案例（一）

最新推荐文章于 2024-02-04 14:52:21 发布

Jiang呀

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量403

点赞数 1

分类专栏：前端框架文章标签： vue javascript js html

本文链接：https://blog.youkuaiyun.com/JiangHu_Java/article/details/108076403

版权

前端框架专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Vue的基本语法，包括插值、指令、动态参数、v-on与v-bind的简写、过滤器、监听属性和计算属性。通过示例代码展示了如何使用v-if、v-show、v-for、v-model等特性，以及动态参数和简写的用法。同时，解释了计算属性与监听属性的区别和应用场景。

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

前言

上篇博客介绍了vue的简介、安装步骤、生命周期，这篇博客主要讲述vue的一些基本语法！

插值

文本插值

其实就是我上篇博客所举的简单例子，使用{{}}来显示字符串：

html插值

将html代码存入一个vue的v-html指令中，利用div将其显示出来；

属性赋值

使用v-bind指令绑定属性并将其赋值；

表达式

使用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>
				<li>
					<p>
						1.1文本 title={{title}},ts={{ts}}
					</p>
				</li>
				<li>
					<p>
						1.2html 
						<div v-html="html"></div>
					</p>
				</li>
				<li>
					<p>
						1.3 属性
						<div>
							<a v-bind:href=href>百度</a>
							<button v-on:click="onClick">点我呀</button>
						</div>
					</p>
				</li>
				<li>
						1.4 表达式
					<p>
						{{str.substr(0,6).toUpperCase()}}
						{{number + 1}}
						{{ok ? 'yes' : 'no'}}
					</p>
				</li>
				<li v-bind:id="'list-' + id">
						我的Id是js动态生成的
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					title:'Hello Vue!!!',
					ts:new Date().getTime(),
					html:'<input type="text" value="0">',
					href:'https://www.baidu.com',
					str:'hello',
					number:10,
					ok:false,
					id:22
				}
			},
			methods:{
				onClick(){
					alert("666");
				}
			}
		});
	</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指令

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

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

3、v-else上一个兄弟元素必须是v-if或者是v-else-if；

此三为兄弟元素

测试代码：

<!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>
				<li>
					<div v-if="sex == 'boy'">
						boy
					</div>
					<div v-else-if="sex == 'girl'">
						girl
					</div>
					<div v-else>
						noSex
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					sex:'girl'
				}
			}
		});
	</script>
</html>

测试结果：
在这里插入图片描述

最后出现的是一个girl。

其实就是看带的条件是否满足，满足则执行这个模块的代码，不满足就接着下一个继续看是否满足条件，以此类推到最后。

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">
			<ul>
				<li>
					<input type="checkbox" v-model="show"  />隐藏或者显示
					<div v-show="show">
						lalalalalala
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					show:false
				}
			}
		});
	</script>
</html>

显示效果：

不勾选时隐藏
在这里插入图片描述
勾选时显示

在这里插入图片描述
v-for指令

看见for咱们就知道是遍历了！

不过有一点不一样的是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>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表达式

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>

显示效果：
在这里插入图片描述

动态参数

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

这里有一个注意事项就是写参数名时回避大写

测试代码：

<!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>

显示效果：
在这里插入图片描述
可以看到参数自动变了！

v-on与v-bind的简写

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.filter('filterName', function (value) {
     // value 表示要过滤的内容
   });

测试代码：

<!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">
		<div>
			全局过滤器：
			{{aaa|b}}
		</div>
	</div>	
	


	
	<script type="text/javascript">
		
		Vue.filter('b', function (value) {
			console.log(value);
			return value.substr(0,6).toUpperCase();
		   });
		
		var  vue=new Vue({
			el:'#app',
			data:function(){
				return{
					kb:1024,
					mb:1,
					aaa:'hello'
				}
			}
		});
	</script>
</body>
</html>

在这里插入图片描述

局部过滤器

语法：
new Vue({
     filters:{'filterName':function(value){}}
   });

测试代码：

<!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">
		<div>
			局部过滤器：
			{{aaa|a}}
		</div>
	</div>	
	


	
	<script type="text/javascript">
		
		var  vue=new Vue({
			el:'#app',
			data:function(){
				return{
					kb:1024,
					mb:1,
					aaa:'hello'
				}
			},
			filters:{
				'a':function(str){
					console.log(str);
					return str.substr(0,6).toUpperCase();
				}
			}
		});
	</script>
</body>
</html>

测试结果：

在这里插入图片描述
设置的aaa默认值为hello，经过过滤器的作用变成了大写。

自定义过滤器

vue也允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

语法：
   <!-- 在两个大括号中 -->
   {{ name | capitalize }}

   <!-- 在 v-bind 指令中 -->
   <div v-bind:id="rawId | formatId"></div>

监听属性

我们可以使用watch来响应数据的变化

语法：
xxx：代表被监听的属性，必须存在
watch:{
	xxx:function(v){
	}
}

代码示例：

<!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
				}
			},
			watch:{
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			}
		});
	</script>
</body>
</html>

结果：
在这里插入图片描述

计算属性

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

语法：
 computed:{
       xxx:function(){
          
       }
   }

计算属性=监听属性？

两者虽然效果相似，但是还是有区别的：

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

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

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

我们用的时候优先选择？

监听属性比计算属性复杂的多，因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods。