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

是辉辉啦2023-09-19 10:04

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

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

一.插值

1.文本

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

2.html

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绑定

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>
		<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.表达式

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

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

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

三.动态参数

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.局部过滤器

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>
				
				<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.全局过滤器

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>
	<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.计算属性

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>
				单价：<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.监听属性

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>
				千米：<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>

六.购物车案例

效果

代码

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

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

相关推荐
森叶4 分钟前
Electron 主进程中使用Worker来创建不同间隔的定时器实现过程
前端·javascript·electron
霸王蟹13 分钟前
React 19 中的useRef得到了进一步加强。
前端·javascript·笔记·学习·react.js·ts
霸王蟹13 分钟前
React 19版本refs也支持清理函数了。
前端·javascript·笔记·react.js·前端框架·ts
繁依Fanyi18 分钟前
ColorAid —— 一个面向设计师的色盲模拟工具开发记
开发语言·前端·vue.js·编辑器·codebuddy首席试玩官
codelxy21 分钟前
vue引用cesium，解决“Not allowed to load local resource”报错
javascript·vue.js
程序猿阿伟1 小时前
《社交应用动态表情：RN与Flutter实战解码》
javascript·flutter·react native
明似水1 小时前
Flutter 开发入门：从一个简单的计数器应用开始
前端·javascript·flutter
沐土Arvin1 小时前
前端图片上传组件实战：从动态销毁Input到全屏预览的全功能实现
开发语言·前端·javascript
Zww08912 小时前
el-dialog鼠标在遮罩层松开会意外关闭，教程图文并茂
javascript·vue.js·计算机外设
爱编程的鱼2 小时前
C#接口（Interface）全方位讲解：定义、特性、应用与实践
java·前端·c#
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU06Coze扣子平台完整体验和实践（附国内和国际版对比）07Ubuntu24.04安装中文输入法08DeepSeek各版本说明与优缺点分析09苍穹外卖面试总结10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）