• Vue基础语法【上】

    目录

    前言

    一、插值

    1.文本插值

    2.html解析

    3.属性

    4.表达式

    5.截取

    6.三元运算符

    二、指令

    1.v-if

    2.v-for

    3.v-bind

    4.v-on

    5.v-if|v-else|v-else-if

    6.自定义指令

    三、过滤器

    1.局部过滤

    2.全局过滤

    四、计算属性与监听属性

    1.计算属性

    2.监听属性

    五、购物车案例

    前言

    Vue.js是一种用于构建用户界面的渐进式JavaScript框架。它的核心思想是将数据和视图进行分离，通过数据驱动视图的方式来构建交互式的Web应用程序。在本篇博文中，我们将介绍Vue的基础语法，帮助你快速入门Vue开发。

    一、插值

    1.文本插值

    使用双大括号{{}}将数据插入到文本中

    1. <span id="app">{{ msg}}</span>
    2.  
    3. <script type="text/javascript">
    4. 			new Vue({
    5. 				el:"#app",
    6. 				data(){
    7. 					return{
    8. 						msg:"hello meinv"
    9. 					
    10. 					}
    11. 				}
    12. 			})
    13. 		</script>
    当msg变量的值发生变化时，DOM中的文本内容也会相应地更新。

    2.html解析

    如果要输出html格式的数据，需要使用v-html指令。

    1. <h1>html解析</h1>
    2. 			<b v-html="msg2"></b>

    3.属性

    1. <h1>属性</h1>
    2. 			<b :class="msg3" v-html="msg2"></b> <br>

    4.表达式

    1. <h1>表达式</h1>
    2. 			{{num+100}} <br>

    5.截取

    1. <h1>截取</h1>
    2. 			<h1>{{hh.substr(4,3)}}<br></h1>

    6.三元运算符

    1. <h1>三元运算判断</h1>
    2. 			<input v-model="ly"/>
    3. 			{{ly==1?"萝莉":"御姐"}}

    综合案例演示

    1. <!DOCTYPE html>
    2. <html>
    3. 	 <head>
    4. 		<meta charset="utf-8">
    5. 		<title>插值</title>
    6. 		<!-- 导入工具 -->
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    8. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    9. 		
    10. 		<style type="text/css">
    11. 			.f30{
    12. 				font-size: 30px;
    13.                 color:green
    14. 			}
    15. 		</style>
    16. 	</head>
    17. 	<body>
    18. 		<!-- 定义边界 -->
    19. 		<div id="app">
    20. 			<h1>文本</h1>
    21. 			{{msg}}  <br>
    22. 			
    23. 			<h1>html解析</h1>
    24. 			<b v-html="msg2"></b> <br>
    25. 			
    26. 			<h1>属性</h1>
    27. 			<b :class="msg3" v-html="msg2"></b> <br>
    28. 			
    29. 			<h1>表达式</h1>
    30. 			{{num+100}} <br>
    31. 			
    32. 				<h1>截取</h1>
    33. 			<h1>{{hh.substr(4,3)}}<br></h1>
    34. 			
    35. 			<h1>三元运算判断</h1>
    36. 			<input v-model="ly"/>
    37. 			{{ly==1?"萝莉":"御姐"}}
    38. 		</div>
    39. 		
    40. 		<script type="text/javascript">
    41. 			new Vue({
    42. 				el:"#app",
    43. 				data(){
    44. 					return{
    45. 						msg:"hello meinv",
    46. 						msg2:" 卡拉米",
    47. 						msg3:"f30",
    48. 						num:100,
    49. 						hh:"无敌旋风美男子再次",
    50. 						ly:1
    51. 					}
    52. 				}
    53. 			})
    54. 		</script>
    55. 		
    56. 		
    57. 	</body>
    58. </html>

    二、指令

    指令是 Vue.js 中的一种特殊属性，以 v- 开头，后面跟着指令的名称。指令可以用在 HTML 元素上，用于绑定数据、事件等。Vue 内置了很多常用的指令，如 v-if、v-for、v-bind 等，你也可以自定义指令来实现特定的功能。

    1.v-if

    v-if 指令用于条件渲染，根据表达式的值决定是否渲染一个元素。当表达式的值为真时，元素会被渲染；否则，元素不会被渲染。

    <div v-if="show">Hello, Vue!</div>

    2.v-for

    v-for 指令用于循环渲染，可以遍历数组或对象的属性。

      遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

        遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

    1. <div v-for="(item, index) in items" :key="index">
    2.   {{ item }}
    3. </div>

    3.v-bind

    v-bind 指令用于绑定属性，可以将数据绑定到元素的属性上。

    <img v-bind:src="imageSrc" />

    4.v-on

    v-on 指令用于绑定事件监听器，可以在元素上监听指定的事件。

    <button v-on:click="handleClick">点击我</button>

    5.v-if|v-else|v-else-if

    根据其后表达式的bool值进行判断是否渲染该元素，他们只能是兄弟元素

     v-else-if上一个兄弟元素必须是v-if， v-else上一个兄弟元素必须是v-if或者是v-else-if

    1. <p>v-if/v-else-if/v-else的使用</p>
    2. 			<input v-model="score"/><br>
    3. 			<b v-if="score < 60">该死</b>
    4. 			<b v-else-if="score >=60 && score <70 ">及格</b>
    5. 			<b v-else-if="score >=70 && score <80">不错</b>
    6. 			<b v-else-if="score >=80 && score <90">good</b>
    7. 			<b v-else="">666</b><br >

    案例

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>指令</title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    8. 		
    9. 	</head>
    10. 	<body>
    11. 		
    12. 		<!-- 定义边界 -->
    13. 		<div id="app">
    14. 			<h1>v-if/v-else-if/v-else的使用</h1>
    15. 			<input v-model="score"/><br>
    16. 			<b v-if="score < 60">该死</b>
    17. 			<b v-else-if="score >=60 && score <70 ">及格</b>
    18. 			<b v-else-if="score >=70 && score <80">还不错</b>
    19. 			<b v-else-if="score >=80 && score <90">good</b>
    20. 			<b v-else="">666</b><br >
    21. 		
    22. 		<h1>v-if 与v-show的区别</h1>
    23. 		<b v-if="isShow">我是v-if</b>
    24. 		<b v-show="isShow">我是v-show</b>
    25. 		
    26. 		
    27. 		<h1>v-for的使用</h1>
    28. 		<i v-for="u in users ">{{u}}&nbsp;</i>
    29. 		
    30. 		<h1>下拉框的使用</h1>
    31. 		<select>
    32. 			<option v-for=" u in users" :value="u.id">
    33. 				{{u.name}}
    34. 			</option>
    35. 		</select>
    36. 		
    37. 			<h1>复选框的使用</h1>
    38. 		<div v-for="u in users"  >
    39. 		<input type="checkbox" name="users" :value="u.id"/>{{u.name}}
    40. 		</div>
    41. 		
    42. 		
    43. 		</div>
    44. 		
    45. 		<script type="text/javascript">
    46. 			new Vue({
    47. 				el:"#app",
    48. 				data(){
    49. 					return{
    50. 						score:99,
    51. 						isShow:false,
    52. 						users:[{
    53. 							name:"死仔",id:1
    54. 						},{
    55. 							name:"你在哪",id:2
    56. 						},{
    57. 							name:"四季花",id:3
    58. 						}]
    59. 					}
    60. 				}
    61. 			})
    62. 		</script>
    63. 		
    64. 	</body>
    65. </html>

     

    6.参数

              一些指令能够接收一个“参数”，在指令名称之后以冒号表示

    <a v-bind:href="url">...</a>

    动态参数

              从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

      <a v-bind:[attrname]="url"> ... </a>

    案例：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>参数title>
    6. 		
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    8. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    9. 		
    10. 	head>
    11. 	<body>
    12. 		
    13. 		
    14. 		<div id="app">
    15. 			<h1>动态参数h1>
    16. 			<input v-model="evname"/>
    17. 			
    18. 			
    19. 			
    20. 			<button v-on:[evname]="test">点我button>
    21. 		div>
    22. 		
    23. 		<script type="text/javascript">
    24. 			new Vue({
    25. 				el:"#app",
    26. 				data(){
    27. 					return{
    28. 						evname:"click"
    29. 					}
    30. 				},
    31. 				methods:{
    32. 					test(){
    33. 						alert("快点我，快快");
    34. 					}
    35. 					}
    36. 			});
    37. 		script>
    38. 		
    39. 	body>
    40. html>

    6.自定义指令

    除了内置指令外，你还可以根据需求自定义指令。自定义指令的方法如下：

    1.使用 Vue.directive() 方法注册一个新的全局指令：

    1. Vue.directive('focus', {
    2.   // bind 钩子函数
    3.   bind: function (el) {
    4.     // 聚焦元素的逻辑（如设置 tabIndex）
    5.     el.focus();
    6.   },
    7. });
    2.在组件中使用自定义指令：

    2. <input v-focus />

    三、过滤器

    过滤器是 Vue.js 中的一种特殊属性，以 v- 开头，后面跟着过滤器的名称。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器的作用是对数据进行处理，然后返回处理后的结果。Vue 内置了很多常用的过滤器，如 date、lowercase、uppercase 等，你也可以自定义过滤器来实现特定的功能。

    1.局部过滤

    1. <h1>局部过滤器基本应用h1>
    2. 		{{msg | filterA}}
    3. 		
    4. 		<h1>局部过滤器串行使用--交并集h1>
    5. 		{{msg}}<br>
    6. 	    {{msg | filterA}}<br>
    7. 		 {{msg | filterA|filterB}}<br>
    8. 		 
    9. 		 <h1>局部过滤器传参h1>
    10. 		 {{msg | filterC(2,6)}}

    2.全局过滤

    1. <h1>全局过滤</h1>
    2. 		<h1> {{time}}<br /></h1><hr >
    3. 		<h1> {{time|fmtDataFilter}}</h1>

    完整案例

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>过滤器</title>
    6. 		<!-- 导入工具 -->
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    8. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    9. 		<script src="date.js" type="text/javascript" charset="utf-8"></script>
    10. 	</head>
    11. 	<body>
    12. 		
    13. 		<!-- 定义边界 -->
    14. 		<div id="contect">
    15. 		<!-- <h1>局部过滤器基本应用</h1>
    16. 		{{msg | filterA}}
    17. 		
    18. 		<h1>局部过滤器串行使用--交并集</h1>
    19. 		{{msg}}<br>
    20. 	    {{msg | filterA}}<br>
    21. 		 {{msg | filterA|filterB}}<br>
    22. 		 
    23. 		 <h1>局部过滤器传参</h1>
    24. 		 {{msg | filterC(3,6)}} -->
    25. 		<h1>全局过滤</h1>
    26. 		<h1> {{time}}<br /></h1><hr >
    27. 		<h1> {{time|fmtDataFilter}}</h1>
    28. 		 
    29. 		</div>
    30. 		
    31. 		<script type="text/javascript">
    32. 			Vue.filter('fmtDataFilter',function(value){
    33. 				return fmtDate(value);
    34. 			});
    35. 			new Vue({
    36. 				el:"#contect",
    37. 				filters:{
    38. 					'filterA':function(msg){
    39. 						return msg.substring(2,4);
    40. 					},
    41. 					'filterB':function(msg){
    42. 						return msg.substring(2,4);
    43. 					},
    44. 					'filterC':function(msg,begin,end){
    45. 						return msg.substring(begin,end);
    46. 					}
    47. 				},
    48. 				data(){
    49. 					return{
    50. 						msg:"局部过滤器",
    51. 						time:new Date()
    52. 					
    53. 					}
    54. 				}
    55. 			})
    56. 		</script>
    57. 		
    58. 	</body>
    59. </html>

    四、计算属性与监听属性

    1.计算属性

    1. <h1>计算属性：</h1>
    2. 			单价：<input v-model="price"/>
    3. 			数量：<input v-model="num"/>
    4. 			小计：{{count}}<br />

    2.监听属性

    1. 监听属性：<br />
    2. 			千米：<input v-model="km" /><br />
    3. 			米：<input v-model="m"/>

    案例

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>计算属性和监听属性</title>
    6. 		<!-- 导入工具 -->
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    8. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    9. 	</head>
    10. 	<body>
    11. 		
    12. 		<!-- 定义边界 -->
    13. 		<div id="contect">
    14. 			<h1>计算属性：</h1>
    15. 			单价：<input v-model="price"/>
    16. 			数量：<input v-model="num"/>
    17. 			小计：{{count}}<br />
    18. 			
    19. 			监听属性：<br />
    20. 			千米：<input v-model="km" /><br />
    21. 			米：<input v-model="m"/>
    22. 		</div>
    23. 		
    24. 		<script type="text/javascript">
    25. 			
    26. 			new Vue({
    27. 				el:"#contect",
    28. 				data(){
    29. 					return{
    30. 						price:199,
    31. 						num:1,
    32. 						m:1000,
    33. 						km:1
    34. 					};
    35. 				},
    36. 				computed:{//计算属性
    37. 					count:function(){
    38. 						return this.price * this.num
    39. 					}
    40. 				},
    41. 				watch:{//监听属性
    42. 					km:function(kmm){  
    43. 						this.m=parseInt(kmm)*1000
    44. 					},
    45. 					m:function(kmm){  
    46. 						this.km=parseInt(kmm)/1000
    47. 					}
    48. 				}
    49. 			})
    50. 		</script>
    51. 		
    52. 	</body>
    53. </html>

    五、购物车案例

    先看效果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    8.     <title>cart</title>
    9. 	<style type="text/css">
    10. 		table {
    11. 		    border: 1px solid #e9e9e9;
    12. 		    border-collapse: collapse;
    13. 		    border-spacing: 0;
    14. 		}
    15. 		th, td {
    16. 		    padding: 8px 16px;
    17. 		    border: 1px solid #e9e9e9;
    18. 		    text-align: left;
    19. 		}
    20. 		th {
    21. 		    background-color: #f7f7f7;
    22. 		    color: #5c6b77;
    23. 		    font-weight: 600;
    24. 		}
    25. 		img {
    26. 		    width: 50px;
    27. 		    height: 50px;
    28. 		}
    29. 	</style>
    30. </head>
    31.  
    32. <body>
    33.     <div id="app">
    34.         <div v-if="barbecue.length">
    35.             <!--如果页面有数据存在，则显示，无则。。-->
    36.             <table>
    37.                 <thead>
    38.                     <tr>
    39.                         <th></th>
    40.                         <th>美女五折限购</th>
    41.                         <th>服务</th>
    42.                         <th>价格</th>
    43.                         <th>个数</th>
    44.                         <th>操作</th>
    45.                     </tr>
    46.                 </thead>
    47.                 <tbody>
    48.                     <tr v-for="(item, index) in barbecue">
    49.                         <td>{{item.id}}</td>
    50.                         <td>
    51.                             <img :src="item.image" alt="">
    52.                             {{item.name}}
    53.                         </td>
    54.                         <td>
    55.                             <select>
    56.                                 <option v-for="fuwu in softmeinv">
    57.                                     {{fuwu}}
    58.                                 </option>
    59.                             </select>
    60.                         </td>
    61.                         <td>{{item.price | showPrice}}</td>
    62.                         <td>
    63.                             <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
    64.                             <input type="number" v-model.number="item.count" @change="updateItem(index)" />
    65.                             <button @click="increment(index)">+</button>
    66.                         </td>
    67.                         <td><button @click="removeHandle(index)">移除</button></td>
    68.                     </tr>
    69.                 </tbody>
    70.             </table>
    71.             <h2>总价格：{{totalPrice | showPrice}}</h2>
    72.         </div>
    73.         <h2 v-else>购物车为空！</h2>
    74.     </div>
    75.  
    76.     <script type="text/javascript">
    77.     	const app = new Vue({
    78.     	    el: "#app",
    79.     	    data() {
    80.     	        return {
    81.     	            barbecue: [
    82.     	                {
    83.     	                    name: '美国美女',
    84.     	                    id: 1,
    85.     	                    image: 'image/1.jpg',
    86.     	                    price: 10,
    87.     	                    count: 1
    88. 							
    89.     	                },
    90.     	                {
    91.     	                    name: '日本美女',
    92.     	                    id: 2,
    93.     	                    image: 'image/2.jpg',
    94.     	                    price: 15,
    95.     	                    count: 1
    96. 							
    97.     	                },
    98.     	                {
    99.     	                    name: '中国美女',
    100.     	                    id: 3,
    101.     	                    image: 'image/3.jpeg',
    102.     	                    price: 3,
    103.     	                    count: 1
    104. 							
    105.     	                },
    106.     	                {
    107.     	                    name: '韩国美女',
    108.     	                    id: 4,
    109.     	                    image: 'image/4.jpg',
    110.     	                    price: 13,
    111.     	                    count: 1
    112. 							
    113.     	                },
    114.     	            ],
    115.     	            softmeinv: ['健身丸', '403房', '逛街', '牵手', 'kiss kiss', '抱抱', '旅游','游乐场','大草原']
    116.     	
    117.     	        }
    118.     	    },
    119.     	    methods: {
    120.     	        decrement(index) {
    121.     	            this.barbecue[index].count--
    122.     	        },
    123.     	        increment(index) {
    124.     	            this.barbecue[index].count++
    125.     	        },
    126.     	        removeHandle(index) {
    127.     	            this.barbecue.splice(index, 1)//移除对应的下标行
    128.     	        }
    129.     	    },
    130.     	    filters: {
    131.     	        showPrice(price) {
    132.     	            return '￥' + price.toFixed(2)
    133.     	        }
    134.     	    },
    135.     	    computed: {
    136.     	        totalPrice() {
    137.     	           // 一般遍历写法
    138.     	            let totalPrice = 0
    139.     	            for (let i = 0; i < this.barbecue.length; i++) {
    140.     	                totalPrice += this.barbecue[i].price * this.barbecue[i].count
    141.     	            }
    142.     	            return totalPrice
    143.     	        
    144.     	            // //2.for in 写法
    145.     	            // let totalPrice = 0
    146.     	            // for (let i in this.barbecue) {
    147.     	            //     totalPrice += this.barbecue[i].price * this.barbecue[i].count
    148.     	            // }
    149.     	            // return totalPrice
    150.     	            
    151.     	            // //3.for of 写法
    152.     	            // let totalPrice = 0
    153.     	            // for (let item of this.barbecue) {
    154.     	            //     totalPrice += item.price * item.count
    155.     	            // }
    156.     	            // return totalPrice
    157.     	
    158.     	        }
    159.     	    },
    160.     	});
    161.  
    162.     </script>
    163. </body>
    164.  
    165. </html>
  • 相关阅读:
    【跟踪算法汇总】
    TCP 四次挥手，可以直接变成三次？
    leetcode-121-买卖股票的最佳时机
    技术分享 | Jenkins通过什么方式报警？
    物联网AI MicroPython传感器学习 之 RGB三色灯
    【算法练习Day31】单调递增的数字&&买卖股票的最佳时机含手续费&&监控二叉树
    11-2 集合之Collection接口
    YOLO目标检测——红外人员数据集【含对应voc、coco和yolo三种格式标签+划分脚本】
    《我要进大厂》- Spring框架 夺命连环22问，你能坚持到第几问？（Spring高频问题）
    【博弈论】基础知识
  • 原文地址：https://blog.csdn.net/weixin_74268571/article/details/133023283