Vue入门，简单使用_property styles vue-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46119030/article/details/108852997

本文是Vue.js的基础教程，介绍了Vue的渐进式特性、数据双向绑定、点击事件、插值和计算属性的使用。通过实例演示了如何在HTML中引入Vue，创建双向绑定的输入框，实现点击事件以及计算属性的功能，帮助初学者快速掌握Vue的基本操作。

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

vue

vue的引入标签
- vue简介
- 引入vue标签
vue入门使用

vue的引入标签

vue简介

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架，而且是中国人开发的。
vue官网.
用vue进行开发的话，可以实现数据标签的双向绑定，也就是响应式数据绑定。大大节省了之前要获取数据标签的内容，或者赋值给HTML元素的代码。

这真的是简的不得了的简介。下面来一张图是我所理解的vue数据和标签之间的关系。
在这里插入图片描述
通过图片应该对vue有了更好的理解。下面就开始操作vue吧。

引入vue标签

这里，用到了一个免费的CDN加速网站，当然免费的可能会出现意外，比如哪天就倒闭了，不过我肯定是不希望的。
BootCDN.
打开网页搜索vue，就会出现vue及一些版本号。我这里选中的是，2.6.10。
在这里插入图片描述

当然直接copy下面的代码也可以。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

这样就能使用vue了。

vue入门使用

双向绑定

之前不是说了能双向绑定嘛，现在就来试试。
①要定义一个边界，好让vue能够知道哪块地方归他管，一般定义 id=“app”。
② script 标签必须放在body下面，因为代码是从上到下执行的。
③{{}} 是vue的语法，有点像EL表达式。
④new 出来一个Vue,大括号里
el: "#app"这个表示的就是我只管id为app的盒子里面的东西。
data: 就是数据在这里可以定义属性。
methods:方法，用于事件交换时使用的函数，暂时用不上。
⑤这里给文本框了一个属性 v-model:value=“msg”。就是给文本框赋值，他会和{{msg}}的值相同。

<!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">
			{{ts}}
			<input v-model:value="msg"></input>
			<div>
					{{msg}}
			</div>
		</div>
			
			
		
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				msg:'123'
				
			},
			methods:{}
			
		});
		
		
	</script>
</html>

敲完之后运行代码==============我是一条可爱的分割线 ========================

在这里插入图片描述

你会惊奇的发现，文本框改变的同时，下面的数据也改变了。
这就是数据的双向绑定。

点击事件

点击事件其实和以前差不多，万变不离其宗。
①这里用上了之前 methods，在methods中定义一个方法。每次点击都会让msg数据加一。

methods:{
				doClick:function(){
					this.msg++;
				}
				
			}

之前写点击事件，会加上onClick属性。
②在vue中也要加上一个属性。在按钮上加入 v-on:Click=“doClick” doClick就是方法名。
现在写一个文本框使数据和msg绑定。

<input v-model:value="msg"></input>
<button v-on:Click="doClick">点击</button>

然后运行代码==============我是一条可爱的分割线 ========================

在这里插入图片描述

这样每当你点击按钮的时候，文本框和下面的数据都会加一。这样就实现了点击事件了。

插值

上面有讲了一种插值方式，文本框加入 v-model:value。
这里再介绍两种可以插入标签的插值方式。其中一种可以插入标签。
①其实只要把 v-model:value 换成 v-html就好了。
②v-bind:align=“align” 其实和v-model:value差不多。

<!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">
			<!--插值-->
			<div>
				{{msg}}
			</div>
			<div>
				<p v-html="msg2"></p>
			</div>
			<div>
				<p v-bind:align="align">我是第三种插值方式</p>
				<p>{{msg.substr(0,3)}}</p>
			</div>
			
			
		</div>
		
	</body>
	<script>
		
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'我是第一种插值方式',
				msg2:'<font color="red">我是第二种插值方式</font>',
				align:'right'
			},
				
			
		});
		
	</script>
</html>

然后运行代码===============我是可爱的分割线 ==================
在这里插入图片描述
如果出现了以下界面，恭喜你哦。

计算属性

接下来在介绍一下计算属性，其实他还有一个好兄弟叫做监听属性。和他的用法很像，就不怎么介绍了（一定不是我上课没听）。
之前写项目购物车的时候，改变一个商品数量就要改变总价，之前很麻烦，因为要获取HTML标签的值，算出来之后再用js代码赋值给总价的HTML代码。现在不需要了，用vue双向绑定属性来实现一个非非非非常简易的购物车。

计算属性写在computed中，写在methods的下面，与他是平行关系。
监听属性可以写在data里面的，还可以定义在watch中。下面是具体实现：

<!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>
		<h1>购物车</h1>
		<div id="app">
			<div>{{ts}}</div>
		    <form action="success.html">
				<table border="1" width="50%">
					<tr>
						<td>商品名</td>
						<td>{{gname}}</td>
						<td>香蕉</td>
						<td>总价</td>
					</tr>
					<tr>
						<td>商品价格</td>
						<td>{{gprices}}</td>
						<td>{{gprices2}}</td>
						<td></td>
					</tr>
					<tr>
						<td>商品数量</td>
						<td><input type="text" v-model="count"></td>
						<td><input type="text" v-model="count2"></td>
						<td></td>
					</tr>
					<tr>
						<td>总价</td>
						<td>{{sum}}</td>
						<td>{{sum2}}</td>
						<td>{{sum3}}</td>
					</tr>
					
				</table>
				
				
			</form>
			
		</div>
		
		
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				gname:'苹果',
				gprices:'10.0',
				gprices2:'4.0',
				count:1,
				count2:1
			},
			methods:{},
			<!--计算属性-->
			computed:{
				sum:function(){
					return this.count*this.gprices;
				},
				sum2:function(){
					return this.count2*this.gprices2;
				},
				sum3:function(){
				    return this.sum+this.sum2;
				}
			}
			
			
			
			
		});
		
		
		
	</script>
	
	
</html>