• Vue.js入门模板语法及Vue.js实现购物车---详细讲解

    前言

        前面我们学习了Vue的基础入门，接下来我们学习有关Vue的模板语法，学习Vue语法能提高我们的前端开发效率

      Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少

    一，插值

    1.1 文本

              {{msg}}

    1. 	<body>
    2. 		<div  id="wenben">
    3. 			<h1>文本h1>
    4. 			 {{msg}}
    5. 		div>
    6. 		
    7. 	<script >
    8. 		new Vue({
    9. 		el:'#wenben',
    10. 		data(){
    11. 			return{
    12. 				msg:"Hello Smart!"
    13. 			}
    14. 		}
    15. 		});
    16. 	script>

    1.2 html

          使用v-html指令用于输出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. 		<div  id="wenben">
    10. 			 <p>html解析p>
    11. 		      <h1 v-html="msg2">h1>
    12. 		div>
    13. 		
    14. 		
    15. 	<script >
    16. 		new Vue({
    17. 		el:'#wenben',
    18. 		data(){
    19. 			return {
    20. 				msg2:'Hello Smart!'
    21. 			}
    22. 		}
    23. 		});
    24. 	script>
    25. 	body>
    26. html>

    1.3 属性

    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. 	 <style>
    8. 		.f40{
    9. 			font-size: 100px;
    10. 		} 
    11. 		 
    12. 	 style>
    13. 	
    14. 	head>
    15. 	<body>
    16. 		<div  id="wenben">
    17. 			  <p>属性p>
    18. 			    <h1 :class="msg3" v-html="msg2">h1>
    19. 		div>
    20. 		
    21. 		
    22. 	<script >
    23. 		new Vue({
    24. 		el:'#wenben',
    25. 		data(){
    26. 			return {
    27. 				  msg2:'Hello Smart!',
    28. 				   msg3:'f40'
    29. 			}
    30. 		}
    31. 		});
    32. 	script>
    33. 	body>
    34. html>

    1.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. 	 <style>
    8. 		.f40{
    9. 			font-size: 40px;
    10. 		} 
    11. 		 
    12. 	 style>
    13. 	
    14. 	head>
    15. 	<body>
    16. 		<div  id="wenben">
    17. 			
    18. 			 
    19. 			
    20. 			 
    21. 			 
    22. 			 {{num+10}},
    23. 			 {{warm.substr(9,15)}},
    24. 			 <input v-model="ok"/>
    25. 			 {{ok==1?'被打了':'不行我要还回去'}}
    26. 		div>
    27. 		
    28. 		
    29. 	<script >
    30. 		new Vue({
    31. 		el:'#wenben',
    32. 		data(){
    33. 			return {
    34. 				// msg1:'Hello Smart!',
    35. 				// msg2:'Hello Smart!',
    36. 				   // msg3:'f40'
    37. 				   num:10,
    38. 				warm:'nishigedashuaige',
    39. 				ok:1
    40. 			}
    41. 		}
    42. 		});
    43. 	script>
    44. 	body>
    45. 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="zz">
    11. 				<h1>v-if...的使用h1>
    12. 				<input v-model="yanzhi"/><br/>
    13. 				<b v-if="yanzhi<60">丑男b>
    14. 				<b v-else-if="yanzhi>=60 && yanzhi<=70">看得过去b>
    15. 				<b v-else-if="yanzhi>70 && yanzhi<=80">小帅b>
    16. 				<b v-else-if="yanzhi>80 && yanzhi<=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:'#zz',
    26. 				data(){
    27. 					return{
    28. 						yanzhi:60,
    29. 					}
    30. 				},
    31. 			})
    32. 		script>
    33. 	body>
    34. html>

    2.v-show

    与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码:style="display:none"

    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="zz">
    11. 				<h1>v-if|v-else|v-else-if的使用h1>
    12. 				<input v-model="yanzhi"/><br/>
    13. 				<b v-if="yanzhi<60">丑男b>
    14. 				<b v-else-if="yanzhi>=60 && yanzhi<=70">看得过去b>
    15. 				<b v-else-if="yanzhi>70 && yanzhi<=80">小帅b>
    16. 				<b v-else-if="yanzhi>80 && yanzhi<=90">美男子b>
    17. 				<b v-else=" ">吴彦祖b>
    18. 			
    19. 				 <p v-show="yanzhi>90">>v-show-成为大神的人p> 
    20. 				 <p v-if="yanzhi>90">v-if-成为大神的人<p>
    21.  
    22. 			div>
    23. 		body>
    24. 		<script type="text/javascript">
    25. 			// 构建vue实例 绑定边界	
    26. 			new Vue({
    27. 				el:'#zz',
    28. 				data(){
    29. 					return{
    30. 						yanzhi:60,
    31. 					}
    32. 				},
    33. 			})
    34. 		script>
    35. 	body>
    36. html>

    3 v-for

    类似JS的遍历：

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

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

    html代码：

    1. html>
    2. <html lang="en">
    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.min.js">script>
    8.     
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    10. head>
    11. <body>
    13. <div id="app">
    14.     <h1>v-for的使用h1>
    15.     下拉框：
    16.     <select v-model="hobbySelected">
    17.         <option v-for="h in hobby" :value="h.id">{{h.name}}option>
    18.     select><br>
    19.     复选框：
    20.     <div v-for="h in hobby">
    21.         <input :value="h.id" type='checkbox'/>{{h.name}}
    22.     div>
    23. div>
    24. body>
    25. <script type="text/javascript">
    26.     // 绑定边界	
    27.     new Vue({
    28.         el: '#app',
    29.         data() {
    30.             return {
    31.                 hobby: [
    32.                     {id: "1", name: "一杀"},
    33.                     {id: "2", name: "二杀"},
    34.                     {id: "3", name: "三杀"},
    35.                     {id: "4", name: "四杀"}
    36.                 ]
    37.             };
    38.         }
    39.     })
    40. script>
    41.  
    42. html>

    4 动态参数：

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

        ...

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

     

       注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

    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">点击button>
    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>

    三，过滤器

    3.1 局部过滤器

      vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符 " | "

    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="B">
    11.             {{msg}}<br />
    12. 			{{msg|single}}<br />
    13. 			{{msg|param(0,2)}}
    14. 		div>
    15. 		<script type="text/javascript">
    16. 			// 绑定边界	ES6具体体现
    17. 			new Vue({
    18. 				el: '#B',
    19. 				data() {
    20. 					return {
    21. 						msg: "或许就像他们说~"
    22. 					};
    23. 				},
    24. 				filters: {
    25. 					'single': function(val) {
    26. 						return val.substring(4, 8);
    27. 					},
    28. 					'param': function(val, start, end) {
    29. 						return val.substring(start, end);
    30. 					}
    31. 				}
    32. 			})
    33. 		script>
    34. 	body>
    35. html>

    3.2 全局过滤器

    拷入date.js（日期格式化）放入项目js目录中，在页面中引入。
    定义全局过滤器 

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>全局过滤器title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8.  
    9.     <script src="date.js">script>
    10. head>
    11. <body>
    13. <div id="B">
    14.     <h3>全局过滤器h3>
    15.     {{time}}<br>
    16.     {{time | fmtDateFilter}}
    17. div>
    18. body>
    19. <script type="text/javascript">
    20.     // 全局过滤器
    21.     Vue.filter('fmtDateFilter', function (value) {
    22.         return fmtDate(value);
    23.     });
    24.     // 绑定边界	ES6具体体现
    25.     new Vue({
    26.         el: '#B',
    27.         data() {
    28.             return {
    29.                 time: new Date()
    30.             };
    31.         }
    32.     })
    33. script>
    34. html>

    四，计算属性&监听器

    4.1 计算属性

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

    使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了


    语法：computed:{}

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

    4.2 监听器

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>监听属性title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. head>
    9. <body>
    11. <div id="B">
    12.     <p>监听属性p>
    13.     千米：<input v-model="km"/>
    14.     米：<input v-model="m"/>
    15. div>
    16. body>
    17. <script type="text/javascript">
    18.     // 绑定边界	ES6具体体现
    19.     new Vue({
    20.         el: '#B',
    21.         data() {
    22.             return {
    23.                 km: 2,
    24.                 m: 2000
    25.             };
    26.         },
    27.         watch: {
    28.             // v指的是m变量
    29.             m: function (v) {
    30.                 this.km = parseInt(v) / 1000;
    31.             },
    32.             // v指的是km变量
    33.             km: function (v) {
    34.                 this.m = parseInt(v) * 1000;
    35.             }
    36.         }
    37.     })
    38. script>
    39.  
    40. html>

    五、购物车实现

    购物车代码：

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    6.  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. <title>购物车title>
    8. <style>
    9.   th, td {
    10.     padding: 15px;
    11.     text-align: center;
    12.   }
    13. style>
    14. head>
    15. <body>
    16. <div id="B">
    17.   <div >
    18.     <h1>购物车h1>
    19.     <table width="80%" border="1"  cellspacing="1" cellpadding="1">
    20.       <thead>
    21.         <tr>
    22.           <th>商品名th>
    23.           <th>数量th>
    24.           <th>单价th>
    25.           <th>小计th>
    26.         tr>
    27.       thead>
    28.       <tbody>
    29.         <tr v-for="item in items" :key="item.id">
    30.           <td >
    31.             <h3 class="">{{ item.name }}h3>
    32.           td>
    33.           <td class="">
    34.             <button @click="updatetity(item, -1)">-button>
    35.             <span class="quantity-label">{{ item.quantity }}span>
    36.             <button @click="updatetity(item, 1)">+button>
    37.           td>
    38.           <td class="">{{ item.price }}td>
    39.           <td>
    40.             <p class="">{{ subtotal(item) }}p>
    41.           td>
    42.         tr>
    43.       tbody>
    44.       <tfoot>
    45.         <tr>
    46.           <td colspan="3">td>
    47.           <td>
    48.             <p class="" colspan="4" sty>总计{{ count() }}p>
    49.           td>
    50.         tr>
    51.       tfoot>
    52. 	  center>
    53.     table>
    54. 	
    55.   div>
    56. div>
    57.  
    58.  
    59. <script>
    60. new Vue({
    61.   el: '#B',
    62.   data: {
    63.     items: [
    64.       { id: 1, name: '乒乓球', price: '$2',  quantity: 1 },
    65.       { id: 2, name: '足球', price: '$109', quantity: 2 },
    66.       { id: 3, name: '篮球', price: '$150',  quantity: 1 },
    67. 	  { id: 4, name: '羽毛球', price: '$99',  quantity: 2 },
    68.     ]
    69.   },
    70.   methods: {
    71.     updatetity(item, amount) {
    72.       item.quantity += amount;
    73.     },
    74.     subtotal(item) {
    75.       return '$' + (parseFloat(item.price.slice(1)) * item.quantity).toFixed(2);
    76.     },
    77.     count() {
    78.       let total = 0;
    79.       for (let item of this.items) {
    80.         total += parseFloat(item.price.slice(1)) * item.quantity;
    81.       }
    82.       return '$' + total.toFixed(2);
    83.     }
    84.   }
    85. });
    86. script>
    87. body>
    88. html>
  • 相关阅读:
    数学建模笔记-第七讲-回归分析
    Cloud-Eureka服务治理-Ribbon负载均衡
    驱动开发：内核枚举Registry注册表回调
    Java面试题总结（一）
    AlmaLinux正开发成为不包含RHEL代码但兼容RHEL的发行版本
    2022年是SEO行业凋谢的一年
    Python机器学习015：pytorch快速入门
    苹果急了，Type-C将一统天下，欧盟法案有望今年实现
    Meta Learning
    Hadoop第五章：序列化
  • 原文地址：https://blog.csdn.net/m0_73192864/article/details/132986160