vue基本语法及案例（一）

关注

原创最新推荐文章于 2026-09-15 16:13:27 发布 454 阅读 AI 写同款· GEO 优化 ›

使用moveit！控制真实机械臂（5）——编写真实机械臂节点中的action服务程序上一篇文章中，我们简要介绍了ROS中action的基本知识，为了控制真实机械臂，我们已经修改了moveit配置文件，使得moveti启动后具备一个control_msgs::FollowJointTrajectoryAction类型的action客户端，接下来，我们完成该类型action的另一半，编写C++程序来实现action的服务端。由于底层机器人控制程序一般差别都很大，这里展示的只是编程要点... 阅读详情

前言

上篇博客介绍了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。

收录于

前端框架

标签

#vue #javascript #js #html

如何创建 SAP ABAP CDS View 的 Association 所以本文我们虽然学习了如何创建 SAP CDS View 的 association，知道了 association 是用来在 CDS View 里将两张数据库表关联起来，但根本不知道怎么使用这个 association. 而且从 association 的写法来看，似乎和本教程之前介绍 inner join，left join 这些数据库表的连接操作没什么区别，都是根据两张表的 carrid 和 connid 字段相同进行的连接。只看到了我们在 CDS View 源代码实现里，放出来的四个字段。阅读详情

vue基本语法及案例（一）

vue基本语法（一）

前言

插值

指令

动态参数

v-on与v-bind的简写

过滤器

监听属性

计算属性

相关推荐