• 你不能不了解的Vue【模板语法上集】!

    🏅我是默，一个在CSDN分享笔记的博主。📚📚

    🌟在这里，我要推荐给大家我的专栏《Vue》。🎯🎯

    🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆

    🌈让我们在Vue的世界里畅游吧！🌈

    🎁如果感觉还不错的话请记得给我点赞哦！🎁🎁

    💖期待你的加入，一起学习，一起进步！💖💖

    一.Vue插值 

    1.文本

    2.html样式渲染

     3.表达式

    4.源码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6. 		 
    7. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 		<title>Vue入门title>
    9. 		<style type="text/css">
    10. 			.f30{
    11. 			font-size: 30px;	
    12. 			}
    13. 		style>
    14. 		
    15. 		<div  id="lz">
    16. 			<p>文本p>
    17. 			{{msg}}
    18. 			
    19. 			<p>样式渲染p>
    20. 			<b  :class="msg3" v-html="msg2">b>
    21. 			
    22. 			<p>表达式p>
    23. 			{{num+1}}
    24. 			{{warn.substring(0,2)}}
    25. 			<input  v-model="ok"/>
    26. 			{{ok==1? '你没了' : '一起上路'}}
    27. 			
    28. 			
    29. 		div>
    30. 		
    31. 		<script  type="text/javascript">
    32. 			new Vue({
    33. 				el:"#lz",
    34. 				data(){
    35. 					return {
    36. 					msg:'刘兵要上百星王者' ,
    37. 					msg2:'刘兵要上百星王者' ,
    38. 					msg3:'f30',
    39. 					num:6,
    40. 					warn:'警察来咯',
    41. 					ok:1
    42. 					};
    43. 				}
    44. 			});
    45. 		script>
    46. 	head>
    47. 	<body>
    48. 	body>
    49. html>

    二.插值

    1.源码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6. 		 
    7. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 		<title>Vue入门title>
    9. 		
    10. 		<div  id="lz">
    11. 			<p>v-if/v-else-if/v-elsep>
    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-if="score >=90 && score<100">ok'b>
    18. 			
    19. 			<p>v-showp>
    20. 			v-if 和v-show区别
    21. 			<b  v-if="isShow">展示b>
    22. 			<b  v-show="isShow">展示b>
    23. 			
    24. 			<p>v-forp>
    25. 			<i  v-for="a in arr">{{a}}i> 
    26. 			<i  v-for="  u in user">{{u.name}}i>
    27. 			
    28. 			<p>下拉框p>
    29. 			<select>
    30. 				<option v-for="h  in  hoppy" :value="h.id">{{h.name}}option>
    31. 			select>
    32. 			
    33. 			<div  id="" v-for="h  in  hoppy">div>
    34. 			<input  type="checkbox" name="hoppy"  :value="h.id"/>{{h.name}}
    35. 			
    36. 		div>
    37. 		
    38. 		<script  type="text/javascript">
    39. 			new Vue({
    40. 				el:"#lz",
    41. 				data(){
    42. 					return {
    43. 						score:55,
    44. 						isShow:false,
    45. 						arr:[1,2,3,4],
    46. 						user:[
    47. 							{name:'lz',id:1},
    48. 							{name:'zx',id:2},
    49. 							{name:'nb',id:3},
    50. 						],
    51. 						hoppy:
    52. 						[
    53. 							{name:'洗澡',id:1},
    54. 							{name:'是假的吧',id:2},
    55. 							{name:'撒旦解放和',id:3},
    56. 						]
    57. 						};
    58. 				}
    59. 			});
    60. 		script>
    61. 	head>
    62. 	<body>
    63. 	body>
    64. html>

    2.v-if

    2.v-if 和v-show区别

    3.变量数据以及 下拉框和

    三.过滤器

    1.局部过滤器

    1.1语法

    new Vue({

     filters:{'filterName':function(value){}}    

    });

    在其中 filterName是过滤器名字，根据自己需求即可

    常见的过滤器使用

    vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

    {{ name | capitalize }}

    注1：过滤器函数接受表达式的值作为第一个参数

    注2：过滤器可以串联    

             {{ message | filterA | filterB }}

    注3：过滤器是JavaScript函数，因此可以接受参数：

             {{ message | filterA('arg1', arg2) }}

    1.2实例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6. 		 
    7. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 	<script  src="js/date.js">script>
    9. 		<title>局部过滤器title>
    10. 		
    11. 		<div id="app">
    12. 					{{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
    13. 				div>
    14. 			body>
    15. 			<script type="text/javascript">
    16. 				new Vue({
    17. 					el: '#app',
    18. 					data() {
    19. 						return {
    20. 							msg:"还是短发v江户时代列举法"
    21. 						};
    22. 					},
    23. 					filters:{
    24. 						'all': function(val) {
    25. 							return val.substring(1, 4);
    26. 						},
    27. 						'single':function(val){
    28. 							return val.substring(2,3);
    29. 						},
    30. 						'param':function(val,start,end){
    31. 							return val.substring(start,end);
    32. 						}
    33. 					}
    34. 				})
    35. 			script>
    36. 	head>
    37. 	<body>
    38. 	body>
    39. html>

     1.3效果展示

    2.全局过滤器

    2.1语法

    全局过滤器

    Vue.filter('filterName', function (value) {

     // value 表示要过滤的内容

    });

     其核心作用为：在全局对于我们要过滤的内容进行过滤

     2.2实例

    导入html界面

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6. 		 
    7. 	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 	<script  src="js/date.js">script>
    9. 		<title>局部过滤器title>
    10. 		
    11. 	    <script src="date.js" type="text/javascript" charset="utf-8">script>
    12. 	    	<body>
    13. 	    		
    14. 	    		<div id="app">
    15. 	    			{{msg}}_过滤之前<br>
    16. 	    			{{msg | all}}_过滤之后
    17. 	    		div>
    18. 	    	body>
    19. 	    	<script type="text/javascript">
    20. 	    		// 全局过滤器
    21. 	    				Vue.filter('all', function(value) {
    22. 	    					return fmtDate(value);
    23. 	    				});
    24. 	    		new Vue({
    25. 	    			el: '#app',
    26. 	    			data(){
    27. 	    				return{
    28. 	    					msg:new Date()
    29. 	    				}
    30. 	    			}
    31. 	    		})
    32. 	    	script>
    33. 	head>
    34. 	<body>
    35. 	body>
    36. html>

    导入时间的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. };

    2.3效果图

    四.计算属性&监听属性

    1.计算属性

    1.1语法

       计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

       computed:{}

    1.2实例

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

       2.监听属性

      2.1语法

    监听属性 watch，我们可以通过 watch 来响应数据的变化

       watch:{}

    2.2实例

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

     5.购物车（通过Vue实现）

    1.最基础代码购物车

    通过纯js代码实现，没有借助其他框架代码

    1. html>
    2. <html>
    3. <head>
    4.     <title>Shopping Carttitle>
    5.     <style>
    6.         /* CSS 样式可以根据需求自行设计 */
    7.         body {
    8.             font-family: Arial, sans-serif;
    9.             margin: 0;
    10.             padding: 20px;
    11.         }
    12.         
    13.         h1 {
    14.             text-align: center;
    15.         }
    16.         
    17.         table {
    18.             width: 100%;
    19.             border-collapse: collapse;
    20.         }
    21.         
    22.         th, td {
    23.             padding: 10px;
    24.             text-align: left;
    25.             border-bottom: 1px solid #ddd;
    26.         }
    27.         
    28.         tr:hover {
    29.             background-color: #f5f5f5;
    30.         }
    31.         
    32.         .total {
    33.             font-weight: bold;
    34.             text-align: right;
    35.         }
    36.         
    37.         .quantity-input {
    38.             display: flex;
    39.             justify-content: space-between;
    40.             align-items: center;
    41.         }
    42.         
    43.         .quantity-btn {
    44.             cursor: pointer;
    45.             background-color: #ddd;
    46.             border: none;
    47.             font-size: 1.2rem;
    48.             padding: 4px;
    49.         }
    50.         
    51.         .checkout-btn {
    52.             display: block;
    53.             margin-top: 20px;
    54.             text-align: right;
    55.         }
    56.     style>
    57. head>
    58. <body>
    59.     <h1>Shopping Carth1>
    60.  <table>
    61.      <thead>
    62.          <tr>
    63.              <th>商品名字th>
    64.              <th>商品图片th>
    65.              <th>商品价格th>
    66.              <th>增加商品th>
    67.              <th>删除商品th>
    68.          tr>
    69.      thead>
    70.      <tbody>
    71.          <tr>
    72.              <td>小兵嘎子td>
    73.              <td><img src="img/微信图片_20230918163623.jpg" width="50" height="50">td>
    74.              <td class="price">￥19.99td>
    75.              <td class="quantity-input">
    76.                  <button class="quantity-btn minus">-button>
    77.                  <input type="number" min="1" value="2">
    78.                  <button class="quantity-btn plus">+button>
    79.              td>
    80.              <td class="subtotal">￥39.98td>
    81.          tr>
    82.      tbody>
    83.      <tfoot>
    84.          <tr class="total">
    85.              <td colspan="4">Total:td>
    86.              <td id="total">$69.95td>
    87.          tr>
    88.      tfoot>
    89.  table>
    90.     <div class="checkout-btn">
    91.         <button>Checkoutbutton>
    92.     div>
    93.     <script>
    94.         const quantityInputs = document.querySelectorAll('.quantity-input input');
    95.         quantityInputs.forEach(input => {
    96.             input.addEventListener('change', updateSubtotal);
    97.         });
    98.         const minusBtns = document.querySelectorAll('.minus');
    99.         const plusBtns = document.querySelectorAll('.plus');
    100.         minusBtns.forEach((btn, index) => {
    101.             btn.addEventListener('click', () => {
    102.                 let currentVal = Number(quantityInputs[index].value);
    103.                 if (currentVal > 1) {
    104.                     quantityInputs[index].value = currentVal - 1;
    105.                     updateSubtotal();
    106.                 }
    107.             });
    108.         });
    109.         plusBtns.forEach((btn, index) => {
    110.             btn.addEventListener('click', () => {
    111.                 let currentVal = Number(quantityInputs[index].value);
    112.                 quantityInputs[index].value = currentVal + 1;
    113.                 updateSubtotal();
    114.             });
    115.         });
    116.         function updateSubtotal() {
    117.             const prices = document.querySelectorAll('.price');
    118.             const quantities = document.querySelectorAll('.quantity-input input');
    119.             const subtotals = document.querySelectorAll('.subtotal');
    120.             let total = 0;
    121.             for (let i = 0; i < prices.length; i++) {
    122.                 const price = Number(prices[i].textContent.slice(1));
    123.                 const quantity = Number(quantities[i].value);
    124.                 const subtotal = price * quantity;
    125.                 subtotals[i].textContent = '$' + subtotal.toFixed(2);
    126.                 total += subtotal;
    127.             }
    128.             document.querySelector('#total').textContent = '$' + total.toFixed(2);
    129.         }
    130.     script>
    131. body>
    132. html>

     1.2效果展示

    2.通过Vue来实现购物车功能 

    2.1.代码

    小编，使用Vue.js和jQuery库实现。用户可以通过增加或减少商品的数量来调整购物车中商品的数量，同时总计费用会实时更新。

    在Vue实例中，小编定义了一个items数组，每个元素代表一个商品对象，包含了商品名字、图片路径、价格和数量，总计属性。calculateSubtotal方法用于计算每个商品的小计，calculateTotal方法用于计算购物车的总计。

    页面中使用了Vue的数据绑定和事件监听，当用户点击增加或减少数量按钮时，会触发对应的Vue方法来更新商品数量，并重新计算小计和总计。最终，页面会根据数据的变化进行实时回显。

    1. html>
    2. <html>
    3. <head>
    4.     <title>Shopping Carttitle>
    5.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7.     <style>
    8.         /* CSS 样式可以根据需求自行设计 */
    9.         body {
    10.             font-family: Arial, sans-serif;
    11.             margin: 0;
    12.             padding: 20px;
    13.         }
    14.         
    15.         h1 {
    16.             text-align: center;
    17.         }
    18.         
    19.         table {
    20.             width: 100%;
    21.             border-collapse: collapse;
    22.         }
    23.         
    24.         th, td {
    25.             padding: 10px;
    26.             text-align: left;
    27.             border-bottom: 1px solid #ddd;
    28.         }
    29.         
    30.         tr:hover {
    31.             background-color: #f5f5f5;
    32.         }
    33.         
    34.         .total {
    35.             font-weight: bold;
    36.             text-align: right;
    37.         }
    38.         
    39.         .quantity-input {
    40.             display: flex;
    41.             justify-content: space-between;
    42.             align-items: center;
    43.         }
    44.         
    45.         .quantity-btn {
    46.             cursor: pointer;
    47.             background-color: #ddd;
    48.             border: none;
    49.             font-size: 1.2rem;
    50.             padding: 4px;
    51.         }
    52.         
    53.         .checkout-btn {
    54.             display: block;
    55.             margin-top: 20px;
    56.             text-align: right;
    57.         }
    58.     style>
    59. head>
    60. <body>
    61.     <div id="app">
    62.         <table>
    63.             <thead>
    64.                 <tr>
    65.                     <th>商品名字th>
    66.                     <th>商品图片th>
    67.                     <th>商品价格th>
    68.                     <th>商品数量th>
    69.                     <th>商品小计th>
    70.                 tr>
    71.             thead>
    72.             <tbody>
    73.                 <tr v-for="(item, index) in items" :key="index">
    74.                     <td>{{ item.name }}td>
    75.                     <td><img :src="item.image" width="50" height="50">td>
    76.                     <td><input v-model.number="item.price" />td>
    77.                     <td>
    78.                         <button @click="decrementQuantity(item)">-button>
    79.                         <input v-model.number="item.quantity" />
    80.                         <button @click="incrementQuantity(item)">+button>
    81.                     td>
    82.                     <td>{{ calculateSubtotal(item) }}￥td>
    83.                 tr>
    84.             tbody>
    85.             <tfoot>
    86.                 <tr class="total">
    87.                     <td colspan="4">总计:td>
    88.                     <td>{{ calculateTotal() }}￥td>
    89.                 tr>
    90.             tfoot>
    91.         table>
    92.     div>
    93.  
    94.     <script type="text/javascript">
    95.         new Vue({
    96.             el: '#app',
    97.             data() {
    98.                 return {
    99.                     items: [
    100.                         { 
    101.                             name: '小兵嘎子',
    102.                             image: 'img/微信图片_20230918163623.jpg',
    103.                             price: 9.9,
    104.                             quantity: 1
    105.                         },
    106.                         {
    107.                             name: '小彪子',
    108.                             image: 'img/微信图片_20230918163616.jpg',
    109.                             price: 19.9,
    110.                             quantity: 1
    111.                         }
    112.                     ]
    113.                 }
    114.             },
    115.             methods: {
    116.                 incrementQuantity(item) {
    117.                     item.quantity++;
    118.                 },
    119.                 decrementQuantity(item) {
    120.                     if (item.quantity > 1) {
    121.                         item.quantity--;
    122.                     }
    123.                 },
    124.                 calculateSubtotal(item) {
    125.                     return (item.price * item.quantity).toFixed(2);
    126.                 },
    127.                 calculateTotal() {
    128.                     let total = 0;
    129.                     for (let i = 0; i < this.items.length; i++) {
    130.                         total += this.items[i].price * this.items[i].quantity;
    131.                     }
    132.                     return total.toFixed(2);
    133.                 }
    134.             }
    135.         })
    136.     script>
    137. body>
    138. html>

    2.2展示

  • 相关阅读:
    Linux性能优化--性能追踪3：系统级迟缓（prelink）
    快速排序——及其改进
    JavaScript —— 算法思想之栈数据结构
    win32&mfc————win32消息机制
    ESP8266-Arduino编程实例-L3G4200D三轴陀螺仪驱动
    【高德地图】 覆盖物/画点/画折线/画多边形/画矩形/画圆
    论文解读：《DeepKla：一种基于注意力机制的深度神经网络，用于蛋白质赖氨酸乳酸化位点预测》
    （附源码）spring boot大学毕业设计管理系统 毕业设计 030945
    uniapp:tabBar点击后设置动画效果
    HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
  • 原文地址：https://blog.csdn.net/lz17267861157/article/details/132985808