• vue的语法讲解（上篇）--全网最详细的解答

    目录

    一.插值⭐

    1.1 文本插值

    1.2 html

    1.3 属性

    1.4 表达式

    二.指令⭐

      2.1 v-if/v-else-if/v-else的使用

              2.2  v-if 与v-show的区别

      2.3 v-for的使用

     2.4 下拉框的使用

    2.5 复选框的使用 

    2.6 动态参数 --双击与单击

    三.过滤器

     3.1 局部过滤器

    3.2 全局过滤器

    四.计算属性和监听器（监听属性）⭐

    4.1 计算属性

    4.2 监听属性

    五.购物车案例

     今天的分享就到这啦！！

    一.插值⭐

            1.1 文本插值

    1. <head>
    2. 		<meta charset="utf-8">
    3. 		<title>插值</title>
    4. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    6. 	</head>
    7. 	<body>
    8. 		<!-- 定义边界 -->
    9. 		<div id="contect">
    10. 			{{msg}}
    11. 		</div>
    12. 		
    13. 		<script type="text/javascript">
    14. 			new Vue({
    15. 				el:"#contect",
    16. 				data(){
    17. 					return{
    18. 						msg:"hello CSDN"
    19. 					}
    20. 				}
    21. 			})
    22. 		</script>
    23. 		
    24. 		
    25. 	</body>

            效果：

            

         1.2 html

              html文本需要使用 v-html来实现效果

    1. <body>
    2. 		<!-- 定义边界 -->
    3. 		<div id="contect">
    4. 			文本:    {{msg}}  <br>
    5. 			html解析:<b v-html="msg2"></b>
    6. 		</div>
    7. 		
    8. 		<script type="text/javascript">
    9. 			new Vue({
    10. 				el:"#contect",
    11. 				data(){
    12. 					return{
    13. 						msg:"hello CSDN",
    14. 						msg2:" 我是佩奇"
    15. 					}
    16. 				}
    17. 			})
    18. 		</script>
    19. </body>

    效果：

    1.3 属性

                    属性要借用  ：Class来实现属性的转换

    1. <style type="text/css">
    2. 			.f30{
    3. 				font-size: 30px;
    4. 			}
    5. 		</style>
    6. 	</head>
    7. 	<body>
    8. 		<!-- 定义边界 -->
    9. 		<div id="contect">
    10. 			文本:    {{msg}}  <br>
    11. 			html解析:<b v-html="msg2"></b> <br>
    12. 			属性：<b :class="msg3" v-html="msg2"></b> <br>
    13. 		</div>
    14. 		
    15. 		<script type="text/javascript">
    16. 			new Vue({
    17. 				el:"#contect",
    18. 				data(){
    19. 					return{
    20. 						msg:"hello CSDN",
    21. 						msg2:" 我是佩奇",
    22. 						msg3:"f30"
    23. 					
    24. 					}
    25. 				}
    26. 			})
    27. 		</script>

    效果：

    1.4 表达式

            有计算，截取字段，以及三元运算符
    1. <body>
    2. 		<!-- 定义边界 -->
    3. 		<div id="contect">
    4. 			文本:    {{msg}}  <br>
    5. 			html解析:<b v-html="msg2"></b> <br>
    6. 			属性：<b :class="msg3" v-html="msg2"></b> <br>
    7. 			表达式：{{num+1}} <br>
    8. 				截取：{{warn.substr(0,2)}}<br>
    9. 				<input v-model="ok"/>
    10. 				{{ok==1?"我是乔治":"我是佩奇"}}
    11. 		</div>
    12. 		
    13. 		<script type="text/javascript">
    14. 			new Vue({
    15. 				el:"#contect",
    16. 				data(){
    17. 					return{
    18. 						msg:"hello CSDN",
    19. 						msg2:" 我是佩奇",
    20. 						msg3:"f30",
    21. 						num:6,
    22. 						warn:"你好，我是乔治",
    23. 						ok:1
    24. 					}
    25. 				}
    26. 			})
    27. 		</script>

    效果：

    二.指令⭐

            2.1 v-if/v-else-if/v-else的使用

                    相当于以前的 if...else..

    1. <!-- 定义边界 -->
    2. 		<div id="contect">
    3. 			<p>v-if/v-else-if/v-else的使用</p>
    4. 			<input v-model="score"/><br>
    5. 			<b v-if="score < 60">落后了哦~🙂</b>
    6. 			<b v-else-if="score >=60 && score <70 ">加油！！💪</b>
    7. 			<b v-else-if="score >=70 && score <80">还差一点哦~</b>
    8. 			<b v-else-if="score >=80 && score <90">就只有一点点啦！💪</b>
    9. 			<b v-else="">成功啦！你真棒！</b><br >
    10. 		小于60 不及格（落后了哦~🙂）<br >
    11. 		60-70 及格（加油！！💪）<br >
    12. 		70-80 一般（还差一点哦~）<br >
    13. 		80-90 良好（就只有一点点啦！💪）<br >
    14. 		大于90 优秀（成功啦！你真棒！）<br >
    15. </div>

            效果：

          2.2  v-if 与v-show的区别

            v-if 是"条件渲染"的指令，它会根据条件的真假来动态地添加或删除元素及其对应的组件

            v-show 是"条件显示"的指令，它会根据条件的真假来显示或隐藏元素。无论条件是真是假，元素始终存在于 DOM 中，只是通过 CSS 控制其显示状态。

            2.3 v-for的使用

    1. <!-- 定义边界 -->
    2. 		<div id="contect">
    3. 		
    4. 		<p> v-for的使用</p>
    5. 		<i v-for="u in users ">{{u}}&nbsp;</i>
    6. 		</div>
    7. 		
    8. 		<script type="text/javascript">
    9. 			new Vue({
    10. 				el:"#contect",
    11. 				data(){
    12. 					return{
    13. 						users:[{
    14. 							name:"佩奇",id:1
    15. 						},{
    16. 							name:"乔治",id:2
    17. 						},{
    18. 							name:"珊迪",id:3
    19. 						}]
    20. 					}
    21. 				}
    22. 			})
    23. 		</script>

    效果：                                                                                                                                         

     2.4 下拉框的使用

    1. <body>
    2. 		
    3. 		<!-- 定义边界 -->
    4. 		<div id="contect">
    5. 		<p> 下拉框的使用</p>
    6. 		<select>
    7. 			<option v-for=" u in users" :value="u.id">
    8. 				{{u.name}}
    9. 			</option>
    10. 		</select>
    11. 		
    12. 		</div>
    13. 		<script type="text/javascript">
    14. 			new Vue({
    15. 				el:"#contect",
    16. 				data(){
    17. 					return{
    18. 						users:[{
    19. 							name:"佩奇",id:1
    20. 						},{
    21. 							name:"乔治",id:2
    22. 						},{
    23. 							name:"珊迪",id:3
    24. 						}]
    25. 					}
    26. 				}
    27. 			})
    28. 		</script>
    29. 		
    30. 	</body>

    效果：

    2.5 复选框的使用 

    1. <body>
    2. 		
    3. 		<!-- 定义边界 -->
    4. 		<div id="contect">
    5. 			<p>复选框的使用</p>
    6. 		<div v-for="u in users"  >
    7. 		<input type="checkbox" name="users" :value="u.id"/>{{u.name}}
    8. 		</div>
    9. 		
    10. 		</div>
    11. 		
    12. 		<script type="text/javascript">
    13. 			new Vue({
    14. 				el:"#contect",
    15. 				data(){
    16. 					return{
    17. 						users:[{
    18. 							name:"佩奇",id:1
    19. 						},{
    20. 							name:"乔治",id:2
    21. 						},{
    22. 							name:"珊迪",id:3
    23. 						}]
    24. 					}
    25. 				}
    26. 			})
    27. 		</script>
    28. 		
    29. 	</body>

    效果：

     

    2.6 动态参数 --双击与单击

                    它们的不同就是下面圈出来的

            

    效果：第一个按钮是单击，第二个是双击

     

    三.过滤器

            3.1 局部过滤器

            局部过滤器是在组件内部定义的过滤器，只在该组件的模板中可用。

            以下代码中有三个局部过滤器的使用，基本上的作用是差不多的，我觉得可以用数学中的交集并集来理解，或者是用来截取其中一段文字来理解

    2. 		<div id="contect">
    3. 		<p>局部过滤器基本应用p>
    4. 		{{msg | filterA}}
    5. 		<p>局部过滤器串行使用p>
    6. 		{{msg}}<br>
    7. 	    {{msg | filterA}}<br>
    8. 		 {{msg | filterA|filterB}}<br>
    9. 		 <p>局部过滤器传参p>
    10. 		 {{msg | filterC(2,6)}}
    11. 		 
    12. 		 
    13. 		 
    14. 		div>
    15. 		
    16. 		<script type="text/javascript">
    17. 			new Vue({
    18. 				el:"#contect",
    19. 				filters:{
    20. 					'filterA':function(v){//v表示要过滤的内容
    21. 						return v.substring(0,6);
    22. 					},
    23. 					'filterB':function(v){
    24. 						return v.substring(2,4);
    25. 					},
    26. 					'filterC':function(v,begin,end){
    27. 						return v.substring(begin,end);
    28. 					}
    29. 				},
    30. 				data(){
    31. 					return{
    32. 						msg:"这是我的弟弟乔治"
    33. 					}
    34. 				}
    35. 			})
    36. 		script>
    37.
    效果：

    3.2 全局过滤器

         全局过滤器是在 Vue 实例化之前定义的过滤器，它可以在所有组件的模板中使用。
            下面主要是一个时间的处理, 首先写一个时间的js---data.js
    1. //给Date类添加了一个新的实例方法format
    2. Date.prototype.format = function (fmt) {
    3. 	//debugger;
    4.     var o = {
    5.         "M+": this.getMonth() + 1,                 //月份
    6.         "d+": this.getDate(),                    //日
    7.         "h+": this.getHours(),                   //小时
    8.         "m+": this.getMinutes(),                 //分
    9.         "s+": this.getSeconds(),                 //秒
    10.         "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    11.         "S": this.getMilliseconds()             //毫秒
    12.     };
    13.     if (/(y+)/.test(fmt))
    14.         fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    15.     for (var k in o)
    16.         if (new RegExp("(" + k + ")").test(fmt))
    17.             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    18.     return fmt;
    19. };
    20.  
    21. function fmtDate(date, pattern) {
    22. 	var ts = date.getTime();
    23.     var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    24.     if (pattern) {
    25.         d = new Date(ts).format(pattern);
    26.     }
    27.     return d.toLocaleString();
    28. };
    接着将其引入我们的项目中
    1. 		
    2. 		
    3. 		<div id="contect">
    4. 		 <p>全局过滤器p>
    5. 		 {{time}}<br />
    6. 		 {{time|fmtDataFilter}}
    7. 		 
    8. 		div>
    9. 		
    10. 		<script type="text/javascript">
    11. 			Vue.filter('fmtDataFilter',function(value){
    12. 				return fmtDate(value);
    13. 			});
    14. 			new Vue({
    15. 				el:"#contect",
    16. 				data(){
    17. 					return{
    18. 						msg:"这是我的弟弟乔治",
    19. 						time:new Date()
    20. 					
    21. 					}
    22. 				}
    23. 			})
    24. 		script>
    效果：                                                                                                                                

    四.计算属性和监听器（监听属性）⭐

    计算属性是单方影响，而监听属性是双方影响

            4.1 计算属性

    1. <body>
    2. 		
    3. 		<!-- 定义边界 -->
    4. 		<div id="contect">
    5. 			<!-- 单方影响 -->
    6. 			计算属性：
    7. 			单价：<input v-model="price"/>
    8. 			数量：<input v-model="num"/>
    9. 			小计：{{count}}<br />
    10. 		</div>
    11. 		
    12. 		<script type="text/javascript">
    13. 			
    14. 			new Vue({
    15. 				el:"#contect",
    16. 				data(){
    17. 					return{
    18. 						price:99,
    19. 						num:1,
    20. 						m:1000,
    21. 						km:1
    22. 					};
    23. 				},
    24. 				computed:{//computed计算属性
    25. 					count:function(){
    26. 						return this.price * this.num
    27. 					}
    28. 				}
    29. 			})
    30. 		</script>
    31. 		
    32. 	</body>

            效果：

    4.2 监听属性

    1. <body>
    2. 		
    3. 		<!-- 定义边界 -->
    4. 		<div id="contect">
    5. 			<!-- 双方影响 -->
    6. 			监听属性：<br />
    7. 			千米：<input v-model="km" /><br />
    8. 			米：<input v-model="m"/>
    9. 		</div>
    10. 		
    11. 		<script type="text/javascript">
    12. 			
    13. 			new Vue({
    14. 				el:"#contect",
    15. 				data(){
    16. 					return{
    17. 						m:1000,
    18. 						km:1
    19. 					};
    20. 				}，
    21. 				watch:{//watch监听属性
    22. 					km:function(v){  //v是被监听的属性 km
    23. 						this.m=parseInt(v)*1000
    24. 					},
    25. 					m:function(v){  //v是被监听的属性 m
    26. 						this.km=parseInt(v)/1000
    27. 					}
    28. 				}
    29. 			})
    30. 		</script>
    31. 		
    32. 	</body>

    效果：

    五.购物车案例

    运用上面的知识搭建一个简单的购物车界面，并实现单价数量以及总价的改变

    下面是一个界面，用了三个

    1. <div id="contect">
    2.     <h2>购物车</h2>
    3.     
    4.     <table border="1">
    5.       <thead>
    6.         <tr>
    7.           <th>商品</th>
    8.           <th>单价</th>
    9.           <th>数量</th>
    10.           <th>小计</th>
    11.         </tr>
    12.       </thead>
    13.       <tbody>
    14.         <tr>
    15.           <td>怡宝</td>
    16.           <td>{{price1 }}</td>
    17.           <td>
    18.             <button @click="gooddel1">-</button>
    19. 				{{num1}}
    20.             <button @click="goodadd1">+</button>
    21.           </td>
    22.           <td>{{count1}}</td>
    23.         </tr>
    24. 		<tr>
    25. 		  <td>百岁山</td>
    26. 		  <td>{{price2 }}</td>
    27. 		  <td>
    28. 		    <button @click="gooddel2">-</button>
    29. 		    {{ num2}}
    30. 		    <button @click="goodadd2">+</button>
    31. 		  </td>
    32. 		  <td>{{count2}}</td>
    33. 		</tr>
    34. 		<tr>
    35. 		  <td>农夫山泉</td>
    36. 		  <td>{{price3 }}</td>
    37. 		  <td>
    38. 		    <button @click="gooddel3">-</button>
    39. 		    {{ num3}}
    40. 		    <button @click="goodadd3">+</button>
    41. 		  </td>
    42. 		  <td>{{count3}}</td>
    43. 		</tr>
    44.       </tbody>
    45.       <tfoot>
    46.         <tr>
    47.           <td colspan="3">总价：</td>
    48.           <td>{{total}}</td>
    49.         </tr>
    50.       </tfoot>
    51.     </table>
    52.   </div>
    接下来，写方法实现：
    把价格和数量首先是定死的，为了演示，接着写加号的点击事件，和减号的点击事件，以及小计和总计的计算
    1.  <script>
    2.     new Vue({
    3.       el: '#contect',
    4.       data: {
    5. 			price1:30,
    6. 			price2:10,
    7. 			price3:20,
    8. 			num1:1,
    9. 			num2:1,
    10. 			num3:1
    11.       },
    12.       computed: {
    13.        count1:function(){
    14. 		   return this.price1 * this.num1;
    15. 	   },
    16. 	   count2:function(){
    17. 	   		   return this.price2 * this.num2;
    18. 	   },
    19. 	   count3:function(){
    20. 	   		   return this.price3 * this.num3;
    21. 	   },
    22. 	   total:function(){
    23. 		   return this.count1 + this.count2 +this.count3;
    24. 	   }
    25.       },
    26.       methods: {
    27.         goodadd1: function() {
    28.           return this.num1++;
    29.         },
    30. 		goodadd2: function() {
    31. 		  return this.num2++;
    32. 		},
    33. 		goodadd3: function() {
    34. 		  return this.num3++;
    35. 		},
    36. 		gooddel1: function() {
    37. 			if(this.num1>1){
    38. 				 return this.num1--;
    39. 			}
    40. 		 
    41. 		},
    42. 		gooddel2: function() {
    43. 		 if(this.num2>1){
    44. 		 	 return this.num2--;
    45. 		 }
    46. 		},
    47. 		gooddel3: function() {
    48. 		if(this.num3>1){
    49. 			 return this.num3--;
    50. 		}
    51. 		},
    52.       
    53.       }
    54.     });
    55.   </script>

    现在来看效果吧！！

     今天的分享就到这啦！！

  • 相关阅读:
    如何创建一个SpringBoot项目
    Mysql主从搭建
    使用 Guava Retry 优雅的实现重试机制
    【论文&模型讲解】多模态对话 Multimodal Dialogue Response Generation
    精华推荐 | 【深入浅出RocketMQ原理及实战】「底层原理挖掘系列」透彻剖析贯穿RocketMQ的存储系统的实现原理和持久化机制
    ChatGPT如何训练自己的模型
    c/c++中如何输入pi
    系统集成项目管理工程师有什么用？
    Linux - 任务管理
    使用hutool阿里云企业邮箱发送邮件和附件，包含PDF转图片base64，PDF转HTML
  • 原文地址：https://blog.csdn.net/YZZdear/article/details/132985288