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>

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

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了，像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架：性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器：npm vs pnpm
前端·javascript·面试
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07Mac cursor设置jdk、Maven版本08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek RAGFlow构建本地知识库系统10纯离线部署本地知识库LLM大模型