Vue的详细教程--基础语法【上】

2023-09-19 09:02:20

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于Vue的相关操作吧

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

一.插值

1.文本

2.html

3.属性&class绑定&style绑定

4.表达式

二.指令

1.v-if&v-else&v-else-if

2.v-show

3.v-for

三.动态参数

四.过滤器

1.局部过滤器

2.全局过滤器

五.计算属性&监听属性

1.计算属性

2.监听属性

 六.购物车案例

效果

代码

一.插值

1.文本

<!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">
				<h1>文本</h1>
				{{content1}}
			</div>
		</body>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
						content1:'我是天才' ,
						content2 :'<spancstyle="color:red;">我是天才</span>' 
					}
				}
			})
		</script>
	</body>
</html>

2.html

<!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">
				<h1>文本</h1>
				{{content1}}
				<h1>html</h1>
				<h2 v-html="content2"></h2>
			</div>
		</body>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
						content1:'我是天才' ,
						content2 :'<span style="color:red;">我是天才</span>' 
					}
				},
				methods: {
					
				},
			})
		</script>
	</body>
</html>

注意！！！

3.属性&class绑定&style绑定

<!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>
		<style>
			.fs{
				font-size: 38px;
			}
		</style>
		<!-- 定义边界 -->
			<div id="app">
				
				<h1>class</h1>
				<h2 :class="content3 " v-html="content2"></h2>
			</div>
		</body>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
					
						content2 :'<span style="color:red;">我是天才</span>' ,
						content3 :'fs' ,
					}
				},
				methods: {
					
				},
			})
		</script>
	</body>
</html>

4.表达式

<!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>
		<style>
			.fs{
				font-size: 100px;
			}
		</style>
		<!-- 定义边界 -->
			<div id="app">
				<h1>表达式</h1>
				{{content4+2}}</br>
				{{content5.substr(0,4)}}</br>
				<input v-model="content6" />
				{{content6==1 ?'是的':'不细啊'}}
			</div>
		</body>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
						content4 :5, 
						content5 :'我是天才的女人', 
						content6:1
					}
				},
				methods: {
					
				},
			})
		</script>
	</body>
</html>

二.指令

1.v-if&v-else&v-else-if

<!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">
				<h1>v-if...</h1>
				<input v-model="score"/><br/>
				<b v-if="score<60">情商低</b>
				<b v-else-if="score>60 && score<70">情商忽上忽下</b>
				<b v-else-if="score>70 && score<80">情商一般</b>
				<b v-else-if="score>80 && score<90">中等情商</b>
				<b v-else=" ">高情商</b>
			
				
			</div>
		</body>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
						score:69,
					}
				},
				methods: {
					
				},
			})
		</script>
	</body>
</html>

2.v-show

3.v-for

<!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">
				<h1>v-if...</h1>
				<input v-model="score"/><br/>
				<b v-if="score<60">情商低</b>
				<b v-else-if="score>=60 && score<=70">情商忽上忽下</b>
				<b v-else-if="score>70 && score<=80">情商一般</b>
				<b v-else-if="score>80 && score<=90">中等情商</b>
				<b v-else=" ">高情商</b>
				<h1>v-if和v-show的区别</h1>
				<b v-if="ifshow">if</b>
				<b v-show="ifshow">show</b>
				<h1>v-for</h1>
				<i v-for="a in arr">{{a}} &nbsp;</i><br />
				<i v-for="d in dogs">{{d.name}} &nbsp;</i><br />
				<i v-for="i,d in dogs">{{i}} &nbsp;</i><br />
				<!-- 下拉框 -->
				<select>
					<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
				</select><br />
				<!-- 复选框 -->
				<div v-for="h in hobby">
					<input type="checkbox" name="hobby" value="h.id"/>{{h.name}}
				</div>
				
			</div>
		</body>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
						score:69,
						ifshow:false,
						arr:[1,3,5,7,9],
						dogs:[{
							id:1,name:'夏威',
						},{
							id:2,name:'xw',
						},{
							id:3,name:'小威威',
						},{
							id:4,name:'夏威夷',
						}],
						hobby:[{
							id:1,name:'打夏威',
						},{
							id:2,name:'爱xw',
						},{
							id:3,name:'亲小威威',
						},{
							id:4,name:'去夏威夷',
						}],
						
					}
				},
				methods: {
					
				},
			})
		</script>
	</body>
</html>

三.动态参数

<!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>
		<!-- 定义边界 -->
			<div id="app">
				<h1>动态参数</h1>
				<input v-model="evname" />
				<button v-on:[evname]="test">click</button>
			</div>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
					evname:'click'
				};
				},
				methods: {
					test(){
						alert("你再点一下！！！！");
					}
				}
			})
		</script>
</html>

四.过滤器

1.局部过滤器

<!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>
		<!-- 定义边界 -->
			<div id="app">
				<h1>动态参数</h1>
				<input v-model="evname" />
				<button v-on:[evname]="test">click</button>
				
				<h1>局部过滤器</h1>
				{{content}}<br />
				{{content | filter1}}<br />
				<hr />
				{{content}}<br />
				{{content | filter1 | filter2}}<br />
				<h1>过滤器传参</h1>
				{{content | filter3(4,9)}}<br />
				<hr />
				
				
			</div>
		<script type="text/javascript">
		
			
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				filters:{
					'filter1':function(f){
						return f.substring(0,6);
					},
					'filter2':function(f){
						return f.substring(0,4);
					},
					'filter3':function(f,s,e){
						return f.substring(s,e);
					}
				},
				data(){
					return{
					content:'红红火火恍恍惚惚',
					time:new Date()
				};
				},
				methods: {
					test(){
						alert("你再点一下！！！！");
					}
				}
			})
		</script>
</html>

2.全局过滤器

<!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>
	<script  src="js/date.js" type="text/javascript" ></script>
	</head>
		<!-- 定义边界 -->
			<div id="app">
				<h1>动态参数</h1>
				<input v-model="evname" />
				<button v-on:[evname]="test">click</button>
				
				
				<h1>全局过滤器</h1>
				{{time}}<br />
				{{time | all }}
				
			</div>
		<script type="text/javascript">
			
			// 全局过滤器
			Vue.filter('all', function(value) {
			return fmtDate(value);
			});
			
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
					content:'红红火火恍恍惚惚',
					time:new Date()
				};
				},
				methods: {
					test(){
						alert("你再点一下！！！！");
					}
				}
			})
		</script>
</html>

五.计算属性&监听属性

1.计算属性

<!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">
				<h1>计算属性</h1>
				单价：<input  v-model="price"/>
				数量：<input  v-model="num"/>
				小计：{{sum}}
			</div>
		
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
						price:79,
						num:10,
					}
				},
				computed:{
					sum:function(){
						return this.price * this.num
					}
				},
				methods: {
					
				},
			})
		</script>
	</body>
</html>

2.监听属性

<!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">
				<h1>监听属性</h1>
				千米：<input  v-model="km"/>
				米：<input  v-model="m"/>
			</div>
		
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
						m:1000,
						km:1
					}
				},
				watch:{
					km:function(v){
						//v是千米
						this.m=parseInt(v)*1000
					},
					m:function(v){
						//v是米
						this.km=parseInt(v)/1000
					}
				},
				methods: {
					
				},
			})
		</script>
	</body>
</html>

 六.购物车案例

效果

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<title>购物车</title>
<style>

.cart-title {
  color: white;
  font-size: 24px;
  margin-bottom: 20px;
}

.cart-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.cart-item {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}

.item-image {
  width: 100%;
  height: auto;
}

.item-name {
  margin-top: 10px;
  font-size: 18px;
}

.item-price {
  font-size: 16px;
  color: grey;
}

.item-quantity {
  display: flex;
  align-items: center;
}

.quantity-label {
  margin-right: 5px;
}

.quantity-button {
  cursor: pointer;
  background-color: #eee;
  padding: 5px;
  border: none;
  border-radius: 3px;
}

.subtotal {
  font-size: 16px;
  color: grey;
  margin-top: 5px;
}

.total {
  font-size: 20px;
  margin-top: 10px;
}

  th, td {
    padding: 8px;
    text-align: center;
  }
</style>
</head>
<body>
<div id="app">
  <div class="cart-container">
    <h1 class="cart-title">购物车</h1>
    <table width="100%" border="0;"  cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>商品</th>
          <th>数量</th>
          <th>单价</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id"><!-- 用到了v-for以及属性绑定 -->
          <td >
            <img :src="item.image" style="width: 64px; height: 64px;" alt="商品图片">
            <h3 class="item-name">{{ item.name }}</h3>
          </td>
          <td class="item-quantity">
            <button @click="updateQuantity(item, -1)">-</button><!-- 事件绑定 -->
            <span class="quantity-label">{{ item.quantity }}</span>
            <button @click="updateQuantity(item, 1)">+</button>
          </td>
          <td class="item-price">{{ item.price }}</td>
          <td>
            <p class="subtotal">{{ calculateSubtotal(item) }}</p>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3"></td>
          <td>
            <p class="total" colspan="4" sty>总计{{ calculateTotal() }}</p>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>







<script>
new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '商品1', price: '￥199', image: 'img/美妆类3.jpg ', quantity: 1 },
      { id: 2, name: '商品2', price: '￥299', image: 'img/美妆类5.jpg', quantity: 1 },
      { id: 3, name: '商品3', price: '￥399', image: 'img/美妆类7.jpg', quantity: 1 },
    ]
  },
  methods: {
    updateQuantity(item, amount) {
      item.quantity += amount;
    },
    calculateSubtotal(item) {
      return '￥' + (parseFloat(item.price.slice(1)) * item.quantity).toFixed(2);
    },
    calculateTotal() {
      let total = 0;
      for (let item of this.items) {
        total += parseFloat(item.price.slice(1)) * item.quantity;
      }
      return '￥' + total.toFixed(2);
    }
  }
});
</script>
</body>
</html>

 好啦，今天的分享就到这了，希望能够帮到你呢！😊😊 

更多推荐

【C++】map，set简单操作的封装实现（利用红黑树）

文章目录一、STL中set与map的源码二、红黑树结点的意义三、仿函数的妙用四、set，map定义迭代器的区别五、map，set迭代器的基本操作：1.begin（）end（）2.operator++3.operator--六、迭代器拷贝构造特殊处理7.源码RBTree.h2.MyMap.h3.MySet.h一、STL中

贝叶斯人工智能大脑与 ChatGPT

文章目录一、前言二、主要内容🍉CSDN叶庭云：https://yetingyun.blog.csdn.net/一、前言论文地址：https://arxiv.org/abs/2308.14732这篇论文旨在研究ChatGenerativePre-trainedTransformer（ChatGPT）在贝叶斯推理情况下解

List与ArrayList

目录一、List及其使用1.1List的概念1.2常见接口的介绍1.3List的使用二、线性表和顺序表2.1线性表2.2顺序表三、ArrayList介绍四、ArrayList的使用4.1ArrayList构造4.2ArrayList的常用方法4.3ArrayList的遍历4.4ArrayList的扩容机制五、Array

三分钟图解事务隔离级别

详细见：三分钟图解事务隔离级别，看一遍就懂数据库中事务指的是什么“锁"是数据库系统区别于文件系统的一个关键特性，其对象是事务，用来锁定的是数据库中的对象，如表、页、行等。锁确实提高了并发性，但是却不可避免地存在一些潜在的并发一致性问题。不过好在锁只会带来四种问题（丢失更新、脏读、不可重复读、幻读），如果可以防止这四种情

项目设计集合（人工智能方向）：助力新人快速实战掌握技能、自主完成项目设计升级，提升自身的硬实力（不仅限NLP、知识图谱、计算机视觉等领域）

优质项目专栏：提升自身的硬实力：汇总有意义的项目设计集合，助力新人快速实战掌握技能，助力用户更好利用CSDN平台，自主完成项目设计升级，提升自身的硬实力。专栏订阅：项目大全提升自身的硬实力资料合集更优惠第一期资料合集：https://download.csdn.net/download/sinat_39620217/8

一文详解 requests 库中 json 参数和 data 参数的用法

在requests库当中，requests请求方法，当发送post/put/delete等带有请求体的请求时，有json和data2个参数可选。众所周知，http请求的请求体格式主要有以下4种：application/jsonapplicaiton/x-www-from-urlencodedmultipart/form

03-JavaScript-函数

函数就是将特定功能的代码封装起来，当需要实现特定功能时，直接调用函数实现即可。一、函数定义和使用1.1定义函数语句式命名函数functionsum(a,b){returna+b;}变量函数表达式是一个匿名函数，它没有函数名letsum=function(a,b){returna+b;};1.2调用函数按顺序传入参数co

网络基础-应用层协议-HTTP/HTTPS

HTTP/HTTPSHTTP基本概念协议格式请求报文请求方法请求资源地址协议版本应答报文常见Header常见状态码与状态描述Cookie&Sessionhttp协议特点HTTPS基本概念对称加密与非对称加密数据摘要&数据指纹HTTPS工作过程探究只采用对称加密只采用非对称加密双方都采用非对称加密对称加密+非对称加密中间

手机提词器有哪些？简单介绍这一款

手机提词器有哪些？手机提词器在现代社会中越来越受欢迎，原因是它可以帮助人们提高演讲和朗读的效果。使用手机提词器可以让人们更加自信地面对演讲和朗读，不至于出现口误或读错字的情况。此外，手机提词器还可以帮助人们节省时间和精力，让人们可以更加专注于演讲和朗读的内容。目前市面上有很多种手机提词器，今天就给大家介绍一款好用的手机

Harmony系统更改手机IP

在当今的互联网环境中，我们经常需要更改手机的IP地址来绕过限制或保护我们的隐私。虽然在一些操作系统上更改IP地址相对较容易，但在Harmony系统上，这可能会有些困难。因此，本文将分享一种在Harmony系统上免费更改手机IP地址的方法。在Harmony系统上，我们可以通过使用VPN（VirtualPrivateNet

前端原生和主流框架是如何dom的

前言随着互联网技术的发展，前端技术也在不断地发展和更新。DOM（DocumentObjectModel）是前端开发中非常重要的一个概念，可以理解为网页上的所有元素都是DOM节点，通过操作这些节点，可以实现网页的动态效果和交互功能。本文将介绍JavaScript操作DOM、jQuery操作DOM、Vue操作DOM、Rea

热文推荐
  1. mySQL 安装

    一、windows安装包下载mysql官网提供了两种安装方式，一个是zip安装，另一个是msi安装，这里简绍第一种安装方式，第二种简单，不再简绍官网下载，根据自己需要选择版本：MySQL::MySQLCommunityDownloads这里我选择的是5.7版本二、安装文件1.解压到非中文、非特殊字符路径下2.将bin目

  2. 【支持M1】MacDroid for Mac：Mac和Android安卓设备数据互通

    Mac和Android组合始终存在的唯一问题是无法在这些设备之间足够快地传输数据，但是MacDroidformac填补了这一空白。MacDroidmac版是Macos上一款安卓手机数据传输助手，MacDroidmac下载支持Mac和Android设备之间传输照片，视频，音乐和文件夹。不需要特殊的电缆或复杂的解决方案，只

  3. 【QT开发（5）】0919-QT里面新增ui类，新增使用opencv读取图片的普通类，在ui类中显示图片

    参考资料1、QtCreator快速入门_第三版__霍亚飞编著2、《Qt+OpenCV显示图片（Mat转QImage然后显示在QLabel上）》输出材料https://gitee.com/hiyanyx/qt5.14-cpp_-empty_-project/tree/508435b09ff1f794e650cba859b

  4. 关于 firefox 不能访问 http 的解决

    情景：我在虚拟机192.168.x.111上配置了DNS服务器，在kali上设置192.168.x.111为DNS服务器后，使用firefox地址栏搜索域名www.xxx.com，访问在192.168.x.111搭建的网站，本来经192.168.x.111DNS服务器解析后，应该访问的是http://www.xxx.c

  5. 数据在内存中的存储

    文章目录一、整数在内存中的存储二、大小端引言大小端的介绍三、浮点数在内存中的存储储存规则取的过程一、整数在内存中的存储计算机中有3中二进制存储方法，即原码、补码、反码正整数的原码、反码、补码都相同负整数原码、反码、补码各不相同：原码：直接将数值按照正负数的形式翻译成⼆进制得到的就是原码。反码：将原码的符号位不变，其他位

  6. 华为数通方向HCIP-DataCom H12-831题库(单选题：81-100）

    第81题关于结构化的网络故障排除流程中的确认故障阶段的描述，正确的是?A、应关注如何更好的解决故障而不论该故障是否属于自己的负责范围。B、应重视用户的意见，以用户的判断为依据来判断故障问题C、应使影响最小化，尽量不让其他人知道网络出现了故障。D、应确认排障工作是否属于自己的负责范围答案：D解析：当网络出现故障时，首先应

  7. iOS技术博主指南：填写苹果应用上架中的隐私政策信息

    摘要：本文将详细介绍iOS技术博主在苹果应用上架过程中如何填写隐私政策信息。博主可以通过AppStoreConnect为应用程序提供隐私政策网址和用户隐私选项网址，并了解如何填写隐私政策文本。本文将提供步骤和注意事项，帮助博主顺利完成隐私政策信息的填写。引言：为了保护用户的隐私权益，苹果要求所有上架的应用程序必须提供隐

  8. 计算机视觉与深度学习-全连接神经网络-训练过程-欠拟合、过拟合和Dropout- [北邮鲁鹏]

    目录标题机器学习的根本问题过拟合overfitting泛化能力差。应对过拟合最优方案次优方案调节模型大小约束模型权重，即权重正则化(常用的有L1、L2正则化)L1正则化L2正则化对异常值的敏感性随机失活(Dropout)随机失活的问题欠拟合机器学习的根本问题机器学习的根本问题是优化与泛化问题。优化：是指调节模型以在训练

  9. Arcgis提取每个像元的多波段反射率值

    Arcgis提取每个像元的多波段反射率值数据预处理数据预处理阶段需要对遥感图像进行编辑传感器参数、辐射定标、大气校正、正射校正，具体流程见该文章裁剪研究区对于ENVI处理得到的tiff影像，虽然是经过裁剪了，但是还存在黑色的背景值，此时需要用按掩膜提取的方法删除研究区以外的部分。该方法的具体流程在文章中提到然后还需要对