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

    🥳🥳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.文本

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>插值title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 			<div id="app">
    11. 				<h1>文本h1>
    12. 				{{content1}}
    13. 			div>
    14. 		body>
    15. 		<script type="text/javascript">
    16. 			// 构建vue实例 绑定边界	
    17. 			new Vue({
    18. 				el:'#app',
    19. 				data(){
    20. 					return{
    21. 						content1:'我是天才' ,
    22. 						content2 :'我是天才' 
    23. 					}
    24. 				}
    25. 			})
    26. 		script>
    27. 	body>
    28. html>

    2.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>插值title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 			<div id="app">
    11. 				<h1>文本h1>
    12. 				{{content1}}
    13. 				<h1>htmlh1>
    14. 				<h2 v-html="content2">h2>
    15. 			div>
    16. 		body>
    17. 		<script type="text/javascript">
    18. 			// 构建vue实例 绑定边界	
    19. 			new Vue({
    20. 				el:'#app',
    21. 				data(){
    22. 					return{
    23. 						content1:'我是天才' ,
    24. 						content2 :'我是天才' 
    25. 					}
    26. 				},
    27. 				methods: {
    28. 					
    29. 				},
    30. 			})
    31. 		script>
    32. 	body>
    33. html>

    注意！！！

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>插值title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		<style>
    10. 			.fs{
    11. 				font-size: 38px;
    12. 			}
    13. 		style>
    14. 		
    15. 			<div id="app">
    16. 				
    17. 				<h1>classh1>
    18. 				<h2 :class="content3 " v-html="content2">h2>
    19. 			div>
    20. 		body>
    21. 		<script type="text/javascript">
    22. 			// 构建vue实例 绑定边界	
    23. 			new Vue({
    24. 				el:'#app',
    25. 				data(){
    26. 					return{
    27. 					
    28. 						content2 :'我是天才' ,
    29. 						content3 :'fs' ,
    30. 					}
    31. 				},
    32. 				methods: {
    33. 					
    34. 				},
    35. 			})
    36. 		script>
    37. 	body>
    38. html>

    4.表达式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>插值title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		<style>
    10. 			.fs{
    11. 				font-size: 100px;
    12. 			}
    13. 		style>
    14. 		
    15. 			<div id="app">
    16. 				<h1>表达式h1>
    17. 				{{content4+2}}br>
    18. 				{{content5.substr(0,4)}}br>
    19. 				<input v-model="content6" />
    20. 				{{content6==1 ?'是的':'不细啊'}}
    21. 			div>
    22. 		body>
    23. 		<script type="text/javascript">
    24. 			// 构建vue实例 绑定边界	
    25. 			new Vue({
    26. 				el:'#app',
    27. 				data(){
    28. 					return{
    29. 						content4 :5, 
    30. 						content5 :'我是天才的女人', 
    31. 						content6:1
    32. 					}
    33. 				},
    34. 				methods: {
    35. 					
    36. 				},
    37. 			})
    38. 		script>
    39. 	body>
    40. html>

    二.指令

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>指令title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 			<div id="app">
    11. 				<h1>v-if...h1>
    12. 				<input v-model="score"/><br/>
    13. 				<b v-if="score<60">情商低b>
    14. 				<b v-else-if="score>60 && score<70">情商忽上忽下b>
    15. 				<b v-else-if="score>70 && score<80">情商一般b>
    16. 				<b v-else-if="score>80 && score<90">中等情商b>
    17. 				<b v-else=" ">高情商b>
    18. 			
    19. 				
    20. 			div>
    21. 		body>
    22. 		<script type="text/javascript">
    23. 			// 构建vue实例 绑定边界	
    24. 			new Vue({
    25. 				el:'#app',
    26. 				data(){
    27. 					return{
    28. 						score:69,
    29. 					}
    30. 				},
    31. 				methods: {
    32. 					
    33. 				},
    34. 			})
    35. 		script>
    36. 	body>
    37. html>

    2.v-show

    3.v-for

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>指令title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 			<div id="app">
    11. 				<h1>v-if...h1>
    12. 				<input v-model="score"/><br/>
    13. 				<b v-if="score<60">情商低b>
    14. 				<b v-else-if="score>=60 && score<=70">情商忽上忽下b>
    15. 				<b v-else-if="score>70 && score<=80">情商一般b>
    16. 				<b v-else-if="score>80 && score<=90">中等情商b>
    17. 				<b v-else=" ">高情商b>
    18. 				<h1>v-if和v-show的区别h1>
    19. 				<b v-if="ifshow">ifb>
    20. 				<b v-show="ifshow">showb>
    21. 				<h1>v-forh1>
    22. 				<i v-for="a in arr">{{a}}  i><br />
    23. 				<i v-for="d in dogs">{{d.name}}  i><br />
    24. 				<i v-for="i,d in dogs">{{i}}  i><br />
    25. 				
    26. 				<select>
    27. 					<option v-for="h in hobby" :value="h.id">{{h.name}}option>
    28. 				select><br />
    29. 				
    30. 				<div v-for="h in hobby">
    31. 					<input type="checkbox" name="hobby" value="h.id"/>{{h.name}}
    32. 				div>
    33. 				
    34. 			div>
    35. 		body>
    36. 		<script type="text/javascript">
    37. 			// 构建vue实例 绑定边界	
    38. 			new Vue({
    39. 				el:'#app',
    40. 				data(){
    41. 					return{
    42. 						score:69,
    43. 						ifshow:false,
    44. 						arr:[1,3,5,7,9],
    45. 						dogs:[{
    46. 							id:1,name:'夏威',
    47. 						},{
    48. 							id:2,name:'xw',
    49. 						},{
    50. 							id:3,name:'小威威',
    51. 						},{
    52. 							id:4,name:'夏威夷',
    53. 						}],
    54. 						hobby:[{
    55. 							id:1,name:'打夏威',
    56. 						},{
    57. 							id:2,name:'爱xw',
    58. 						},{
    59. 							id:3,name:'亲小威威',
    60. 						},{
    61. 							id:4,name:'去夏威夷',
    62. 						}],
    63. 						
    64. 					}
    65. 				},
    66. 				methods: {
    67. 					
    68. 				},
    69. 			})
    70. 		script>
    71. 	body>
    72. html>

    三.动态参数

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>过滤器title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 		
    9. 			<div id="app">
    10. 				<h1>动态参数h1>
    11. 				<input v-model="evname" />
    12. 				<button v-on:[evname]="test">clickbutton>
    13. 			div>
    14. 		<script type="text/javascript">
    15. 			// 构建vue实例 绑定边界	
    16. 			new Vue({
    17. 				el:'#app',
    18. 				data(){
    19. 					return{
    20. 					evname:'click'
    21. 				};
    22. 				},
    23. 				methods: {
    24. 					test(){
    25. 						alert("你再点一下！！！！");
    26. 					}
    27. 				}
    28. 			})
    29. 		script>
    30. html>

    四.过滤器

    1.局部过滤器

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>过滤器title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	
    8. 	head>
    9. 		
    10. 			<div id="app">
    11. 				<h1>动态参数h1>
    12. 				<input v-model="evname" />
    13. 				<button v-on:[evname]="test">clickbutton>
    14. 				
    15. 				<h1>局部过滤器h1>
    16. 				{{content}}<br />
    17. 				{{content | filter1}}<br />
    18. 				<hr />
    19. 				{{content}}<br />
    20. 				{{content | filter1 | filter2}}<br />
    21. 				<h1>过滤器传参h1>
    22. 				{{content | filter3(4,9)}}<br />
    23. 				<hr />
    24. 				
    25. 				
    26. 			div>
    27. 		<script type="text/javascript">
    28. 		
    29. 			
    30. 			// 构建vue实例 绑定边界	
    31. 			new Vue({
    32. 				el:'#app',
    33. 				filters:{
    34. 					'filter1':function(f){
    35. 						return f.substring(0,6);
    36. 					},
    37. 					'filter2':function(f){
    38. 						return f.substring(0,4);
    39. 					},
    40. 					'filter3':function(f,s,e){
    41. 						return f.substring(s,e);
    42. 					}
    43. 				},
    44. 				data(){
    45. 					return{
    46. 					content:'红红火火恍恍惚惚',
    47. 					time:new Date()
    48. 				};
    49. 				},
    50. 				methods: {
    51. 					test(){
    52. 						alert("你再点一下！！！！");
    53. 					}
    54. 				}
    55. 			})
    56. 		script>
    57. html>

    2.全局过滤器

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>过滤器title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	<script  src="js/date.js" type="text/javascript" >script>
    8. 	head>
    9. 		
    10. 			<div id="app">
    11. 				<h1>动态参数h1>
    12. 				<input v-model="evname" />
    13. 				<button v-on:[evname]="test">clickbutton>
    14. 				
    15. 				
    16. 				<h1>全局过滤器h1>
    17. 				{{time}}<br />
    18. 				{{time | all }}
    19. 				
    20. 			div>
    21. 		<script type="text/javascript">
    22. 			
    23. 			// 全局过滤器
    24. 			Vue.filter('all', function(value) {
    25. 			return fmtDate(value);
    26. 			});
    27. 			
    28. 			// 构建vue实例 绑定边界	
    29. 			new Vue({
    30. 				el:'#app',
    31. 				data(){
    32. 					return{
    33. 					content:'红红火火恍恍惚惚',
    34. 					time:new Date()
    35. 				};
    36. 				},
    37. 				methods: {
    38. 					test(){
    39. 						alert("你再点一下！！！！");
    40. 					}
    41. 				}
    42. 			})
    43. 		script>
    44. html>

    五.计算属性&监听属性

    1.计算属性

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>计算属性&监听属性title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 			<div id="app">
    11. 				<h1>计算属性h1>
    12. 				单价：<input  v-model="price"/>
    13. 				数量：<input  v-model="num"/>
    14. 				小计：{{sum}}
    15. 			div>
    16. 		
    17. 		<script type="text/javascript">
    18. 			// 构建vue实例 绑定边界	
    19. 			new Vue({
    20. 				el:'#app',
    21. 				data(){
    22. 					return{
    23. 						price:79,
    24. 						num:10,
    25. 					}
    26. 				},
    27. 				computed:{
    28. 					sum:function(){
    29. 						return this.price * this.num
    30. 					}
    31. 				},
    32. 				methods: {
    33. 					
    34. 				},
    35. 			})
    36. 		script>
    37. 	body>
    38. html>

    2.监听属性

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>计算属性&监听属性title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 			<div id="app">
    11. 				<h1>监听属性h1>
    12. 				千米：<input  v-model="km"/>
    13. 				米：<input  v-model="m"/>
    14. 			div>
    15. 		
    16. 		<script type="text/javascript">
    17. 			// 构建vue实例 绑定边界	
    18. 			new Vue({
    19. 				el:'#app',
    20. 				data(){
    21. 					return{
    22. 						m:1000,
    23. 						km:1
    24. 					}
    25. 				},
    26. 				watch:{
    27. 					km:function(v){
    28. 						//v是千米
    29. 						this.m=parseInt(v)*1000
    30. 					},
    31. 					m:function(v){
    32. 						//v是米
    33. 						this.km=parseInt(v)/1000
    34. 					}
    35. 				},
    36. 				methods: {
    37. 					
    38. 				},
    39. 			})
    40. 		script>
    41. 	body>
    42. html>

     六.购物车案例

    效果

    代码

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js">script>
    6. <title>购物车title>
    7. <style>
    8.  
    9. .cart-title {
    10.   color: white;
    11.   font-size: 24px;
    12.   margin-bottom: 20px;
    13. }
    14.  
    15. .cart-items {
    16.   display: grid;
    17.   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    18.   gap: 20px;
    19. }
    20.  
    21. .cart-item {
    22.   background-color: white;
    23.   padding: 10px;
    24.   border-radius: 5px;
    25. }
    26.  
    27. .item-image {
    28.   width: 100%;
    29.   height: auto;
    30. }
    31.  
    32. .item-name {
    33.   margin-top: 10px;
    34.   font-size: 18px;
    35. }
    36.  
    37. .item-price {
    38.   font-size: 16px;
    39.   color: grey;
    40. }
    41.  
    42. .item-quantity {
    43.   display: flex;
    44.   align-items: center;
    45. }
    46.  
    47. .quantity-label {
    48.   margin-right: 5px;
    49. }
    50.  
    51. .quantity-button {
    52.   cursor: pointer;
    53.   background-color: #eee;
    54.   padding: 5px;
    55.   border: none;
    56.   border-radius: 3px;
    57. }
    58.  
    59. .subtotal {
    60.   font-size: 16px;
    61.   color: grey;
    62.   margin-top: 5px;
    63. }
    64.  
    65. .total {
    66.   font-size: 20px;
    67.   margin-top: 10px;
    68. }
    69.  
    70.   th, td {
    71.     padding: 8px;
    72.     text-align: center;
    73.   }
    74. style>
    75. head>
    76. <body>
    77. <div id="app">
    78.   <div class="cart-container">
    79.     <h1 class="cart-title">购物车h1>
    80.     <table width="100%" border="0;"  cellspacing="0" cellpadding="0">
    81.       <thead>
    82.         <tr>
    83.           <th>商品th>
    84.           <th>数量th>
    85.           <th>单价th>
    86.           <th>小计th>
    87.         tr>
    88.       thead>
    89.       <tbody>
    90.         <tr v-for="item in items" :key="item.id">
    91.           <td >
    92.             <img :src="item.image" style="width: 64px; height: 64px;" alt="商品图片">
    93.             <h3 class="item-name">{{ item.name }}h3>
    94.           td>
    95.           <td class="item-quantity">
    96.             <button @click="updateQuantity(item, -1)">-button>
    97.             <span class="quantity-label">{{ item.quantity }}span>
    98.             <button @click="updateQuantity(item, 1)">+button>
    99.           td>
    100.           <td class="item-price">{{ item.price }}td>
    101.           <td>
    102.             <p class="subtotal">{{ calculateSubtotal(item) }}p>
    103.           td>
    104.         tr>
    105.       tbody>
    106.       <tfoot>
    107.         <tr>
    108.           <td colspan="3">td>
    109.           <td>
    110.             <p class="total" colspan="4" sty>总计{{ calculateTotal() }}p>
    111.           td>
    112.         tr>
    113.       tfoot>
    114.     table>
    115.   div>
    116. div>
    117.  
    118.  
    119.  
    120.  
    121.  
    122.  
    123.  
    124. <script>
    125. new Vue({
    126.   el: '#app',
    127.   data: {
    128.     items: [
    129.       { id: 1, name: '商品1', price: '￥199', image: 'img/美妆类3.jpg ', quantity: 1 },
    130.       { id: 2, name: '商品2', price: '￥299', image: 'img/美妆类5.jpg', quantity: 1 },
    131.       { id: 3, name: '商品3', price: '￥399', image: 'img/美妆类7.jpg', quantity: 1 },
    132.     ]
    133.   },
    134.   methods: {
    135.     updateQuantity(item, amount) {
    136.       item.quantity += amount;
    137.     },
    138.     calculateSubtotal(item) {
    139.       return '￥' + (parseFloat(item.price.slice(1)) * item.quantity).toFixed(2);
    140.     },
    141.     calculateTotal() {
    142.       let total = 0;
    143.       for (let item of this.items) {
    144.         total += parseFloat(item.price.slice(1)) * item.quantity;
    145.       }
    146.       return '￥' + total.toFixed(2);
    147.     }
    148.   }
    149. });
    150. script>
    151. body>
    152. html>

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

  • 相关阅读:
    Spring Cloud微服务：Loadbalancer 实战
    Maven解决静态资源过滤问题
    天黑了、让我为你关窗帘吧
    Spring Boot 常用注解详解：全面指南
    Dirac delta function （狄拉克 delta 函数）
    【Linux成长史】Linux基本指令大全
    通讯录多版本代码归纳
    Elastic Search6.8.0安装
    C语言中realloc函数解析
    Maven打包错误：Please refer to XXXXX for the individual test results._zhizhiqiuya
  • 原文地址：https://blog.csdn.net/m0_74315688/article/details/132993745