• 【Vue】模块基本语法「上篇」

    🎉🎉欢迎来到我的CSDN主页！🎉🎉

    🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

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

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

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

    👉点击这里，就可以查看我的主页啦！👇👇

    Java方文山的个人主页

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

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

    请添加图片描述

    目录

    前言

    Vue基础语法知识

    最基础Vue实例对象

    一、插值

    1.1 文本

    1.2 v-html

    1.3 数据双向绑定数据(v-model)

    1.3.1.绑定文本框

    1.3.2.绑定单个复选框

    1.3.3.绑定多个复选框

    1.3.4.form表单数据提交

    1.4 属性（v-bind）

    1.5 表达式

    1.6 class绑定

    1.7 style绑定

    二、指令

    2.1  v-if|v-else|v-else-if

    2.2  v-show 

    2.3  v-for

    2.4  动态参数

    三、过滤器

    3.1.局部过滤器

    3.2.全局过滤器

    四、计算属性&监听属性

    4.1.计算属性

    4.2.监听属性

    五、案例实操

    5.1.购物车案例

    前言

    Vue基础语法知识

    1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

    2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

    3、root容器中里的代码被称为【Vue模板】

    4、Vue实例和容器是一一对应的

    5、真实开发中只有一个Vue实例，并且会配合着组件一起使用

    6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

    7、一旦data中的数据发生了改变，那么页面中用到该数据的地方也会自动更新

    最基础Vue实例对象

    el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串

    data用于存储数据，供el所指定的容器去使用，值暂时写为一个对象

    1. 	 new Vue({
    2. 		el:'.root' , //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
    3. 	    data:{ //data用于存储数据，供el所指定的容器去使用，值暂时写为一个对象
    4. 				name:'Java方文山',
    5. 	   			address:'CSDN博客网站'
    6. 		     }
    7. 	 })

    一、插值

    1.1 文本

    插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

    语法：{{ 变量名/对象.属性名 }}

    1.2 v-html

    v-html专门用来展示数据, 其作用和插值表达式类似但可以避免插值闪烁问题。

    当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

    ​ 插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

    语法：

    1.  
    2. v-html："msg"></span>

    区别：

    1. v-text/{{变量名/对象.属性名}}：把数据当作纯文本显示.

    2. v-html：遇到html标签,会正常解析

     

    1.3 数据双向绑定数据(v-model)
     

    ​ Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
     

    注意：
     

    1. 双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
    2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
    3. 单个复选框, 绑定的是boolean类型
    4. 多个复选框, 绑定的是数组
    5. select单选对应字符串，多选对应也是数组
     

     

    1.3.1.绑定文本框
     

    代码:
     

    1. "app">
    2.     用户名: <input type="text" v-model="username"/>
  • <script type="text/javascript">
  •     var app = new Vue({
  •         el:"#app",
  •         data:{
  •             //该属性值和文本框的value属性值,保持一致
  •             username:""
  •         }
  •     });
  • script>
    •  

    效果:
     

     

    1.3.2.绑定单个复选框
     

    代码：
     

    1. "app">
    2.     <input type="checkbox" v-model="agree">同意<br>
    3. div>
    4. <script type="text/javascript">
    5.     var app = new Vue({
    6.         el:"#app",
    7.         data:{
    8.             agree:true
    9.         }
    10.     });
    11. script>
     

    效果:
     

     

    1.3.3.绑定多个复选框
     

    代码:
     

    1. "app">
    2.     Java
    3.     Python
    4.     Swift
    •  

    效果:
     

     

     

    1.3.4.form表单数据提交
     

    例子:传json格式跟formData格式的两种情况
     

    2.  
    4.  
     

     

    1.4 属性（v-bind）
     

              HTML属性中的值应使用v-bind指令
     

    语法：
     

    1. bind:href="hrefstr">百度
    2.  
    3. new Vue({
    4.   el: '#app',
    5.   data: {
    6.     hrefstr: 'http://www.baidu.com'
    7.   }
    8. })
     

     

    1.5 表达式
     

              Vue提供了完全的JavaScript表达式支持
     

              {{str.substr(0,6).toUpperCase()}}
     

              {{ number + 1 }}
     

              {{ ok ? 'YES' : 'NO' }}
     

              
  • 我的Id是js动态生成的
    •  

    代码：
     

    1.  
      表达式
    2.  {{str.substring(0,4).toUpperCase()}}
    3.  张三:{{number+1}}
    4.  {{ok ? 'yes' : 'no'}}
    5.  <li v-bind:id="'list-' + id">我的Id是js动态生成的li>
    6. <script type="text/javascript">
    7. 	
    8. 		// 绑定边界	
    9. 		new Vue({
    10. 			el: '#app',
    11. 			data() {
    12. 				return {
    13. 					
    14. 					/* msg: 'vue hello',
    15. 					htmlstr: '
      这是一个html片段
      ',
    16. 					hrefstr: 'http://www.baidu.com',
    17. 					valuestr: '2223', */
    18. 					str: 'Java是最牛的语言',
    19. 					number: 59,
    20. 					ok: false,
    21. 					id: 66
    22. 				};
    23. 			}
    24. 		})
    25. 	script>
     

    效果：
     

     

     

    1.6 class绑定
     

      使用方式：v-bind:class="expression"
     

      expression的类型：字符串、数组、对象
     

    代码：
     

    1.        
    2. 	
    3. 	
    4. 	<body>
    5. 		
    6. 		<div id="app">
    7. 		 <b :class="f200" v-bind:style="colorred">{{msg}}b>
    8. 		div>
    9. 	body>
    10. 	<script type="text/javascript">
    11. 	
    12. 		// 绑定边界	
    13. 		new Vue({
    14. 			el: '#app',
    15. 			data() {
    16. 				return {
    17. 					msg: 'vue hello',
    18. 					colorred:'color: red;'
    19. 				};
    20. 			}
    21. 		})
    22. 	script>
     

    效果：
     

     

    1.7 style绑定
     

      v-bind:style="expression"
     

      expression的类型：字符串、数组、对象
     

    代码：
     

    1.        
    2. 	
    3. 	
    4. 	<body>
    5. 		
    6. 		<div id="app">
    7. 		 <b :class="f200" v-bind:style="colorred">{{msg}}b>
    8. 		div>
    9. 	body>
    10. 	<script type="text/javascript">
    11. 	
    12. 		// 绑定边界	
    13. 		new Vue({
    14. 			el: '#app',
    15. 			data() {
    16. 				return {
    17. 					msg: 'vue hello',
    18. 					colorred:'color: red;'
    19. 				};
    20. 			}
    21. 		})
    22. 	script>
     

    效果：
     

     

     

    二、指令
     

    2.1  v-if|v-else|v-else-if
     

    根据其后表达式的bool值进行判断是否渲染该元素
     

    他们只能是兄弟元素
     

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

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

    代码：
     

    1.         
      "app">
    2. 			成绩："text" v-model="score"/>
    3. 		
      不及格
    4. 		
      继续努力
    5. 		
      良好
    6. 		
      不错
    7. 		
      优秀
    8. 		
     

    效果：
     

     

     

     

    2.2  v-show 
     

    v-show指令与v-if指令类似，用于根据表达式的值来控制元素的显示和隐藏。当v-show指令的表达式的值为false时，元素会被渲染为不可见状态，并且会添加CSS样式"display:none"。这意味着该元素在页面上不会占据空间，并且不会显示给用户。
     

    然而，v-show指令与加载出页面是不同的。当使用v-if指令时，如果条件为false，对应的元素将从DOM中完全移除，并且不会加载到页面上。
     

    代码：
     

    1.     if="isShow">v-if
    2. 	<b v-show="isShow">v-showb>
     

    效果：
     

     

    2.3  v-for
     

     类似JS的遍历
     

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

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

    语法：
     

    1. v-for="item in items"
    2. v-for="(item,index) in items"
     

    代码：
     

    1. "app">
    2. 	<i v-for="user in users">
    3. 		{{user.name}}--{{user.id}}<br>
    4. 	i>
    5. div>
    6. <script type="text/javascript">
    7.     var app = new Vue({
    8.         el:"#app",
    9.         data(){
    10.            return {
    11. 			users:[
    12. 			    {name:"Java",id:1},
    13. 			    {name:"Python",id:2},
    14. 				{name:"C++",id:3}
    15. 			]
    16. 			} 
    17.         }
    18. 		
    19.     });
    20. script>
     

    效果：
     

     

     

    2.4  动态参数
     

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

       ... 
     

      同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
     

       ... 
     

    代码：
     

    1. "app">
    2. 			<p>动态参数p>
    3. 			<input v-model="evname" />
    4. 			<button v-on:[evname]="handle">动态参数button>
    5. 		
  • 	
  • 	<script type="text/javascript">
  • 		new Vue({
  • 			el: '#app',
  • 			data() {
  • 				return {
  • 					evname:'click'
  • 				};
  • 			},
  • 			methods:{
  • 				handle(){
  • 					alert("触发事件");
  • 				}
  • 			}
  • 		})
  • 	script>
    •  

    效果：
     

     

     

     

    三、过滤器
     

    3.1.局部过滤器
     

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

     
 
     
 
    {{ name | capitalize }}
     
 
     
 
     
 
     

     

    代码：
     

    1. "app">
    2. 			{{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
    3. 		
    4. 	
    5. 	<script type="text/javascript">
    6. 		new Vue({
    7. 			el: '#app',
    8. 			data() {
    9. 				return {
    10. 					msg:"Java最牛"
    11. 				};
    12. 			},
    13. 			filters:{
    14. 				'all': function(val) {
    15. 					return val.substring(1, 4);
    16. 				},
    17. 				'single':function(val){
    18. 					return val.substring(2,3);
    19. 				},
    20. 				'param':function(val,start,end){
    21. 					return val.substring(start,end);
    22. 				}
    23. 			}
    24. 		})
    25. 	script>
     

    效果：
     

     

     
 
    注意1：过滤器函数接受表达式的值作为第一个参数
     
 
    注意2：过滤器可以串联     
     
 
    {{ message | filterA | filterB }}
     
 
    注意3：过滤器是JavaScript函数，因此可以接受参数：
     
 
    {{ message | filterA(arg1, arg2) }}
     
 
    注意4：js定义一个类
     
 
    function Stu(){};
     
 
    Stu.prototype.add(a,b){};//添加一个新的实例方法
     
 
    Stu.update(a,b){};//添加一个新的类方法
     

     

     

    3.2.全局过滤器
     

    代码：
     

    date.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. 	<body>
    3. 		
    4. 		<div id="app">
    5. 			{{msg}}_过滤之前<br>
    6. 			{{msg | all}}_过滤之后
    7. 		div>
    8. 	body>
    9. 	<script type="text/javascript">
    10. 		// 全局过滤器
    11. 				Vue.filter('all', function(value) {
    12. 					return fmtDate(value);
    13. 				});
    14. 		new Vue({
    15. 			el: '#app',
    16. 			data(){
    17. 				return{
    18. 					msg:new Date()
    19. 				}
    20. 			}
    21. 		})
    22. 	script>
     

    效果：
     

     

     

    四、计算属性&监听属性
     

    4.1.计算属性
     

    计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用
     

    语法：
     

    1. "app">
    2. 			单价："price">
    3. 			数量："num">
    4. 			总价："count">
    5. 		
    6. 	<script type="text/javascript">
    7. 		
    8. 		new Vue({
    9. 			el: '#app',
    10. 			data(){
    11. 				return{
    12. 					price:20,
    13. 					num:1
    14. 				}
    15. 			},
    16. 			 computed:{
    17. 				 count:function(){
    18. 					 return this.price*this.num
    19. 				 }
    20. 				 
    21. 			 }
    22. 		})
    23. 	script>
     

    效果：
     

     

     

    4.2.监听属性
     

     

     watch可以监听简单属性值及其对象中属性值的变化
     

    ​ watch类似于onchange事件,可以在属性值修改的时候,执行某些操作
     

    代码：
     

    1. "app">
    2. 			千米："km">
    3. 			米："m">
    4. 		
    5. 	<script type="text/javascript">
    6. 		
    7. 		new Vue({
    8. 			el: '#app',
    9. 			data(){
    10. 				return{
    11. 					m:1000,
    12. 					km:1
    13. 				}
    14. 			},
    15. 			  watch:{
    16. 				  // v指的是m变量
    17. 				  m: function(v){
    18. 				  		this.km = parseInt(v)/1000;
    19. 				  },
    20. 				  // v指的是km变量
    21. 				 km: function(v){
    22. 				  		this.m = parseInt(v)*1000;
    23. 				  }
    24. 			  }
    25. 		})
    26. 	script>
     

    效果：
     

     

     
 
    小贴士：计算属性和监听属性的区别？
     
 
    计算属性是用来声明式的描述一个值依赖其它的值，当所有依赖的值或者变量改变的时候，计算属性也会随着该变；而监听属性主要是监听data里面的定义的量，当该变量变化的时候，触发watch。两者的主要区别是：计算属性有缓存机制，不支持异步操作；而监听属性没有缓存机制，支持异步操作。
     

     

     

    五、案例实操
     

    5.1.购物车案例
     

    以前我们前端的html代码都是非常繁琐，需要拿到表格的第几行再拿到第几个表格内的什么属性等等，通过今天的学习，我们可以用计算属性的方式去完成数量递增递减随之总价格也会发生改变的案例。
     

    优化前代码：
     

    1. html>
    2. <html>
    3. 	
    4. 		8">
    5. 		Java方文山
    6. 		.css" type="text/css" rel="stylesheet" />
    7. 		
    8. 		
    9. 	
    10.  
    11. 	<body>
    12. 		
    13. 		<div id="header"><img src="images/taobao_logo.gif" alt="logo" />
    14. 		div>
    15. 		<div id="nav">您的位置：<a href="#">首页a> > <a href="#">我的淘宝a> > 我的购物车div>
    16. 		<div id="navlist">
    17. 			<ul>
    18. 				<li class="navlist_red_left">li>
    19. 				<li class="navlist_red">1. 查看购物车li>
    20. 				<li class="navlist_red_arrow">li>
    21. 				<li class="navlist_gray">2. 确认订单信息li>
    22. 				<li class="navlist_gray_arrow">li>
    23. 				<li class="navlist_gray">3. 付款到支付宝li>
    24. 				<li class="navlist_gray_arrow">li>
    25. 				<li class="navlist_gray">4. 确认收货li>
    26. 				<li class="navlist_gray_arrow">li>
    27. 				<li class="navlist_gray">5. 评价li>
    28. 				<li class="navlist_gray_right">li>
    29. 			ul>
    30. 		div>
    31.  
    32. 		<div id="content">
    33. 			<a href="#">CSDNa> 账号：<a href="#">Java方文山a>
    34. 			 <img src="images/CSDN头像.jpg" style="width: 100px;height: 100px;" alt="relation" />
    35. 			<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
    36. 				<form action="" method="post" name="myform">
    37. 					<tr>
    38. 						<td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="myAll()" />全选td>
    39. 						<td class="title_2" colspan="2">店铺宝贝td>
    40. 						<td class="title_3">获积分td>
    41. 						<td class="title_4">单价（元）td>
    42. 						<td class="title_5">数量td>
    43. 						<td class="title_6">小计（元）td>
    44. 						<td class="title_7">操作td>
    45. 					tr>
    46. 					<tr>
    47. 						<td colspan="8" class="line">td>
    48. 					tr>
    49. 					<tr>
    50. 						<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊a> 卖家：<a href="#">纤巧百媚a> <img
    51. 								src="images/taobao_relation.jpg" alt="relation" />td>
    52. 					tr>
    53. 					<tr id="product1">
    54. 						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"
    55. 								onclick="selectSingle()" />td>
    56. 						<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping" />td>
    57. 						<td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色a>
    58. 							颜色：棕色 尺码：37
    59. 							保障：<img src="images/taobao_icon_01.jpg" alt="icon" />td>
    60. 						<td class="cart_td_4" >5td>
    61. 						<td class="cart_td_5">138td>
    62. 						<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus"
    63. 								onclick="changeNum('product1','minus')" class="hand" /> <input type="text" value="1"
    64. 								class="num_input" readonly="readonly" /> <img src="images/taobao_adding.jpg" alt="add"
    65. 								onclick="changeNum('product1','add')" class="hand" />td>
    66. 						<td class="cart_td_7">td>
    67. 						<td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除a>td>
    68. 					tr>
    69.  
    70. 					<tr>
    71. 						<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记a> 卖家：<a href="#">lokemick2009a>
    72. 							<img src="images/taobao_relation.jpg" alt="relation" />td>
    73. 					tr>
    74. 					<tr id="product2">
    75. 						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2"
    76. 								onclick="selectSingle()" />td>
    77. 						<td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping" />td>
    78. 						<td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5ga>
    79. 							保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg"
    80. 								alt="icon" />td>
    81. 						<td class="cart_td_4">12td>
    82. 						<td class="cart_td_5">265td>
    83. 						<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus"
    84. 								onclick="changeNum('product2','minus')" class="hand" /> <input type="text" value="1"
    85. 								class="num_input" readonly="readonly" /> <img src="images/taobao_adding.jpg" alt="add"
    86. 								onclick="changeNum('product2','add')" class="hand" />td>
    87. 						<td class="cart_td_7">td>
    88. 						<td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除a>td>
    89. 					tr>
    90.  
    91. 					<tr>
    92. 						<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营a> 卖家：<a href="#">林颜店铺a> <img
    93. 								src="images/taobao_relation.jpg" alt="relation" />td>
    94. 					tr>
    95. 					<tr id="product3">
    96. 						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"
    97. 								onclick="selectSingle()" />td>
    98. 						<td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping" />td>
    99. 						<td class="cart_td_3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）a>
    100. 							保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg"
    101. 								alt="icon" />td>
    102. 						<td class="cart_td_4">3td>
    103. 						<td class="cart_td_5">85td>
    104. 						<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus"
    105. 								onclick="changeNum('product3','minus')" class="hand" /> <input id="num_3" type="text"
    106. 								value="1" class="num_input" readonly="readonly" /> <img src="images/taobao_adding.jpg"
    107. 								alt="add" onclick="changeNum('product3','add')" class="hand" />td>
    108. 						<td class="cart_td_7">td>
    109. 						<td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除a>td>
    110. 					tr>
    111.  
    112. 					<tr>
    113. 						<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋a> 卖家：<a href="#">taobao豆豆a> <img
    114. 								src="images/taobao_relation.jpg" alt="relation" />td>
    115. 					tr>
    116. 					<tr id="product4">
    117. 						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"
    118. 								onclick="selectSingle()" />td>
    119. 						<td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping" />td>
    120. 						<td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉a>
    121. 							保障：<img src="images/taobao_icon_01.jpg" alt="icon" />td>
    122. 						<td class="cart_td_4">12td>
    123. 						<td class="cart_td_5">12td>
    124. 						<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus"
    125. 								onclick="changeNum('product4','minus')" class="hand" /> <input id="num_4" type="text"
    126. 								value="2" class="num_input" readonly="readonly" /> <img src="images/taobao_adding.jpg"
    127. 								alt="add" onclick="changeNum('product4','add')" class="hand" />td>
    128. 						<td class="cart_td_7">td>
    129. 						<td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除a>td>
    130. 					tr>
    131.  
    132. 					<tr>
    133. 						<td colspan="3"><a href="javascript:deleteSelectRow()">"
    134. 									alt="delete" />
    135. 						5" class="shopend">商品总价（不含运费）：
    136. 						yellow"> 元
    137. 							可获积分 integral"> 点
    138. 							" type="image" src="images/taobao_subtn.jpg" />
    139. 						
    140. 					
    141. 				
    142. 			
    144. 		
    145. 	
     

     

    这是我以前仿造淘宝所写的项目 ，现在我们将控制小计的代码注释掉用我们今天所学知识完成.
     

     
 
    思路：
     
 
    首先我们需要引入Vue.js，然后创建一个根节点将原先HTML里面的代码全部包起来，将购物车里面的值替换成从Vue实例里的data定义的值，利用{{变量名}}的方式，但是我们的数量需要用到双向绑定v-model，最后配合我们的计算属性的方式完成购物车小计的计算。
     

     

    优化后代码：
     

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>Java方文山title>
    6. 		<link href="css/myCart.css" type="text/css" rel="stylesheet" />
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. 		<script type="text/javascript">
    9. 			//封装
    10. 			function $(sid) {
    11. 				return document.getElementById(sid);
    12. 			}
    13. 			//全选
    14. 			function myAll() {
    15. 				var qx = $("allCheckBox");
    16. 				var cs = document.getElementsByName("cartCheckBox");
    17. 				for (var i = 0; i < cs.length; i++) {
    18. 					cs[i].checked = qx.checked;
    19. 				}
    20. 			}
    21.  
    22. 			//一个复选不选全选就不选
    23. 			function selectSingle() {
    24. 				var qx = $("allCheckBox"); 
    25. 				var cs = document.getElementsByName("cartCheckBox");
    26. 				//假设全选是选中的
    27. 				var f = true;
    28. 				for (var i = 0; i < cs.length; i++) {
    29. 					if (cs[i].checked == false) {//判断
    30. 						f = false;
    31. 						break;
    32. 					}
    33. 				}
    34. 				//跟着假设走
    35. 				qx.checked = f;
    36. 			}
    37.  
    38. 			//删除单个
    39. 			function deleteRow(rid) {
    40. 				var row = $(rid);
    41. 				var index = row.rowIndex;
    42. 				var tab = $("shopping");
    43. 				tab.deleteRow(index);//删除商品
    44. 				tab.deleteRow(index - 1); //删除店铺
    45. 				calc();//小计和总价格
    46. 			}
    47.  
    48. 			//批量删除
    49. 			function deleteSelectRow() {
    50. 				var cs = document.getElementsByName("cartCheckBox");
    51. 				for (var i = cs.length - 1; i >= 0; i--) {
    52. 					if (cs[i].checked == true) {
    53. 						var rid = cs[i].value;
    54. 						deleteRow(rid);
    55. 					}
    56. 				}
    57. 			}
    58.  
    59. 			//数量递增递减
    60. 			function changeNum(rid, type) {
    61. 				var row = $(rid);
    62. 				var cs = row.cells;
    63. 				var num = cs[5].childNodes[2].value;
    64. 				if (type == "add") {
    65. 					num++;
    66. 				} else {
    67. 					if (num > 1) {
    68. 						num--;
    69. 					} else {
    70. 						var ok=confirm("你要删除该商品吗")//数量小于1询问是否删除
    71. 						if(ok==true){
    72. 							var index = row.rowIndex;
    73. 							$("shopping").deleteRow(index);
    74. 							$("shopping").deleteRow(index-1);
    75. 						}
    76. 						
    77. 					}
    78. 				}
    79. 				cs[5].childNodes[2].value = num;
    80. 				calc();//小计和总价格
    81. 			}
    82. 			
    83. 			// //小计和总价格
    84. 			// function calc() {
    85. 			// 	var tab = $("shopping");
    86. 			// 	var rs = tab.rows;
    87. 			// 	var sum = 0;//商品总价格
    88. 			// 	var mysum=0;//商品积分
    89. 			// 	for (var i = 3; i < rs.length; i += 2) {
    90. 			// 		var cs = rs[i].cells;
    91. 			// 		//拿到单价
    92. 			// 		var jg = cs[4].innerHTML;
    93. 			// 		//拿到数量
    94. 			// 		var num = cs[5].childNodes[2].value;
    95. 			// 		//小计
    96. 			// 		var xj = jg * num;
    97. 			// 		cs[6].innerHTML = xj;//单个总价
    98. 			// 		sum += xj;//将单价总和加入全部总价格
    99. 					
    100. 			// 		var jf=cs[3].innerHTML;
    101. 			// 		mysum+=parseInt(jf);//积分总和
    102. 					
    103. 			// 	}
    104. 			// 	//显示页面
    105. 			// 	$("total").innerHTML = sum;
    106. 			// 	$("integral").innerHTML=mysum;
    107. 			// }
    108.  
    109. 			// window.onload = calc;
    110. 		script>
    111. 	head>
    112. 	
    113.  
    114. 	<body>
    115. 		<div id="javacart"> 
    116. 		<div id="header"><img src="images/taobao_logo.gif" alt="logo" />
    117. 		div>
    118. 		<div id="nav">您的位置：<a href="#">首页a> > <a href="#">我的淘宝a> > 我的购物车div>
    119. 		<div id="navlist">
    120. 			<ul>
    121. 				<li class="navlist_red_left">li>
    122. 				<li class="navlist_red">1. 查看购物车li>
    123. 				<li class="navlist_red_arrow">li>
    124. 				<li class="navlist_gray">2. 确认订单信息li>
    125. 				<li class="navlist_gray_arrow">li>
    126. 				<li class="navlist_gray">3. 付款到支付宝li>
    127. 				<li class="navlist_gray_arrow">li>
    128. 				<li class="navlist_gray">4. 确认收货li>
    129. 				<li class="navlist_gray_arrow">li>
    130. 				<li class="navlist_gray">5. 评价li>
    131. 				<li class="navlist_gray_right">li>
    132. 			ul>
    133. 		div>
    134.  
    135. 		<div id="content">
    136. 			<a href="#">CSDNa> 账号：<a href="#">Java方文山a>
    137. 			 <img src="images/CSDN头像.jpg" style="width: 100px;height: 100px;" alt="relation" />
    138. 			<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
    139. 				<form action="" method="post" name="myform">
    140. 					<tr>
    141. 						<td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="myAll()" />全选td>
    142. 						<td class="title_2" colspan="2">店铺宝贝td>
    143. 						<td class="title_3">获积分td>
    144. 						<td class="title_4">单价（元）td>
    145. 						<td class="title_5">数量td>
    146. 						<td class="title_6">小计（元）td>
    147. 						<td class="title_7">操作td>
    148. 					tr>
    149. 					<tr>
    150. 						<td colspan="8" class="line">td>
    151. 					tr>
    152. 					<tr>
    153. 						<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊a> 卖家：<a href="#">纤巧百媚a> <img
    154. 								src="images/taobao_relation.jpg" alt="relation" />td>
    155. 					tr>
    156. 					<tr id="product1">
    157. 						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"
    158. 								onclick="selectSingle()" />td>
    159. 						<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping" />td>
    160. 						<td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色a><br />
    161. 							颜色：棕色 尺码：37<br />
    162. 							保障：<img src="images/taobao_icon_01.jpg" alt="icon" />td>
    163. 						<td class="cart_td_4" >5td>
    164. 						<td class="cart_td_5" >{{price1}}td>
    165. 						<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus"
    166. 								onclick="changeNum('product1','minus')" class="hand" /> <input type="text" v-model="num1"
    167. 								class="num_input"  /> <img src="images/taobao_adding.jpg" alt="add"
    168. 								onclick="changeNum('product1','add')" class="hand" />td>
    169. 						<td class="cart_td_7" >{{count1}}b>td>
    170. 						<td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除a>td>
    171. 					tr>
    172.  
    173. 					<tr>
    174. 						<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记a> 卖家：<a href="#">lokemick2009a>
    175. 							<img src="images/taobao_relation.jpg" alt="relation" />td>
    176. 					tr>
    177. 					<tr id="product2">
    178. 						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2"
    179. 								onclick="selectSingle()" />td>
    180. 						<td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping" />td>
    181. 						<td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5ga><br />
    182. 							保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg"
    183. 								alt="icon" />td>
    184. 						<td class="cart_td_4">12td>
    185. 						<td class="cart_td_5">{{price2}}td>
    186. 						<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus"
    187. 								onclick="changeNum('product2','minus')" class="hand" /> <input type="text" v-model="num2"
    188. 								class="num_input" /> <img src="images/taobao_adding.jpg" alt="add"
    189. 								onclick="changeNum('product2','add')" class="hand" />td>
    190. 						<td class="cart_td_7">{{count2}}td>
    191. 						<td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除a>td>
    192. 					tr>
    193.  
    194. 					<tr>
    195. 						<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营a> 卖家：<a href="#">林颜店铺a> <img
    196. 								src="images/taobao_relation.jpg" alt="relation" />td>
    197. 					tr>
    198. 					<tr id="product3">
    199. 						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"
    200. 								onclick="selectSingle()" />td>
    201. 						<td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping" />td>
    202. 						<td class="cart_td_3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）a><br />
    203. 							保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg"
    204. 								alt="icon" />td>
    205. 						<td class="cart_td_4">3td>
    206. 						<td class="cart_td_5">{{price3}}td>
    207. 						<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus"
    208. 								onclick="changeNum('product3','minus')" class="hand" /> <input id="num_3" v-model="num3"
    209. 								value="1" class="num_input" /> <img src="images/taobao_adding.jpg"
    210. 								alt="add" onclick="changeNum('product3','add')" class="hand" />td>
    211. 						<td class="cart_td_7">{{count3}}td>
    212. 						<td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除a>td>
    213. 					tr>
    214.  
    215. 					<tr>
    216. 						<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋a> 卖家：<a href="#">taobao豆豆a> <img
    217. 								src="images/taobao_relation.jpg" alt="relation" />td>
    218. 					tr>
    219. 					<tr id="product4">
    220. 						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"
    221. 								onclick="selectSingle()" />td>
    222. 						<td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping" />td>
    223. 						<td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉a><br />
    224. 							保障：<img src="images/taobao_icon_01.jpg" alt="icon" />td>
    225. 						<td class="cart_td_4">12td>
    226. 						<td class="cart_td_5">{{price4}}td>
    227. 						<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus"
    228. 								onclick="changeNum('product4','minus')" class="hand" /> <input id="num_4" v-model="num4"
    229. 								value="2" class="num_input"  /> <img src="images/taobao_adding.jpg"
    230. 								alt="add" onclick="changeNum('product4','add')" class="hand" />td>
    231. 						<td class="cart_td_7">{{count4}}td>
    232. 						<td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除a>td>
    233. 					tr>
    234.  
    235. 					<tr>
    236. 						<td colspan="3"><a href="javascript:deleteSelectRow()"><img src="images/taobao_del.jpg"
    237. 									alt="delete" />a>td>
    238. 						<td colspan="5" class="shopend">商品总价（不含运费）：
    239. 						<label id="total" class="yellow">label> 元<br />
    240. 							可获积分 <label class="yellow" id="integral">label> 点<br />
    241. 							<input name=" " type="image" src="images/taobao_subtn.jpg" />
    242. 						td>
    243. 					tr>
    244. 				form>
    245. 			table>
    246. 			
    247. 			
    248.  
    249. 		div>
    250. 		
    251. 		div>
    252. 		
    253. 		<script type="text/javascript">
    254. 				
    255. 				new Vue({
    256. 					el: '#javacart',
    257. 					data(){
    258. 						return{
    259. 							price1:138,
    260. 							num1:1,
    261. 							price2:265,
    262. 							num2:1,
    263. 							price3:85,
    264. 							num3:1,
    265. 							price4:12,
    266. 							num4:3,
    267. 						}
    268. 					},
    269. 					 computed:{
    270. 						 count1:function(){
    271. 							 return this.price1*this.num1
    272. 						 },
    273. 						 count2:function(){
    274. 						 	return this.price2*this.num2
    275. 						 },
    276. 						 count3:function(){
    277. 						 	 return this.price3*this.num3
    278. 						 },
    279. 						 count4:function(){
    280. 						 	return this.price4*this.num4
    281. 						 }
    282. 						 
    283. 					 }
    284. 				})
    285. 			script>
    286. 		
    287. 	body>
    288. html>
     

    重点代码展示
     

     

    效果：
     

     

    相比之前我们自己操作节点简单多了（如果是动态变量而来的数据更简单）
     

    请添加图片描述
     

    到这里我的分享就结束了，欢迎到评论区探讨交流！！
     

    💖如果觉得有用的话还请点个赞吧 💖
     

     

    
                
                    
                

                
  • 

                    相关阅读:
    
                    
Qt开发及建立工程                            
    
生产环境重大bug,update加上索引字段会走索引进行更新？还是走全表扫描                            
    
机器学习之超参数优化 - 网格优化方法（对半网格搜索HalvingSearchCV）                            
    
python 设计模式 建造者模式                            
    
超越BERT：多语言大模型的最新进展与挑战                            
    
MySQL开窗函数                            
    
【Linux】【网络】工具：httplib 库的安装与简单使用                            
    
Kotlin中的集合函数                            
    
富文本编辑器的实现与回显                            
    
ATK-ESP8266使用说明（STM32-F4）                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_74318097/article/details/132985168
                
    •