• Vue系列（二）之 基础语法上篇【插值，指令，过滤器，计算属性监听属性】以及购物车实现

    目录

    一. 插值

    1.1 文本

     1.2 原始HTML

    1.3 属性

    1.4 表达式

    二. 指令

    2.1 v-if/v-else-if/v-else指令

    2.2  v-show指令

    2.3 v-for指令

    2.4 下拉框/复选框

    2.5 动态参数

     三. 过滤器

    3.1 局部过滤器基本应用

    3.2 局部过滤器串行使用

    3.3 局部过滤器传参

    3.4 全局过滤器

    四. 计算属性和监听属性

    4.1 计算属性

    4.2 监听属性

    一. 插值

    1.1 文本

    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

    1. 		<div id="app">
    2. 			<p>1.文本p>
    3. 			{{msg}}
    4. 		div>
    5. 		<script type="text/javascript">
    6. 			new Vue({
    7. 				el:"#app",
    8. 				data(){
    9. 					return {
    10. 						msg:'今天的不开心就到此为止吧！'
    11. 					}
    12. 				}
    13. 			})
    14. 		script>

    效果：

     1.2 原始HTML

    v-html指令会将数据中含有的标签解析后进行显示

    1. 		<div id="app">
    2. 			<p>2.原始HTMLp>
    3. 			<b v-html="msg2">b>
    4. 		div>
    5. 		<script type="text/javascript">
    6. 			new Vue({
    7. 				el:"#app",
    8. 				data(){
    9. 					return {
    10. 						msg2:'今天的不开心就到此为止吧！'
    11. 					}
    12. 				}
    13. 			})
    14. 		script>

    效果：

     

    1.3 属性

    所有原生态的属性，要利用vue的变量，都要在属性前加v-bind指令

    例：

    可以简写为：

    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. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		<title>插值title>
    8. 		<style>
    9. 			.xx{
    10. 				font-size: 30px;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			<p>2.原始HTMLp>
    17. 			<b v-html="msg2">b>
    18. 			<p>3.属性p>
    19. 			<b :class="msg3" v-html="msg2">b>
    20. 		div>
    21. 		<script type="text/javascript">
    22. 			new Vue({
    23. 				el:"#app",
    24. 				data(){
    25. 					return {
    26. 						msg2:'今天的不开心就到此为止吧！',
    27. 						msg3:'xx'
    28. 					}
    29. 				}
    30. 			})
    31. 		script>
    32. 	body>
    33. html>

    效果：

    1.4 表达式

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

    1. 		<div id="app">
    2. 			<p>4.表达式p>
    3. 			和为：{{num+1}}<br>
    4. 			{{warn.substring(0,4)}}<br>
    5. 			<input v-model="ok">
    6. 			{{ok==1?'我很开心':'我不开心'}}
    7. 		div>
    8. 		<script type="text/javascript">
    9. 			new Vue({
    10. 				el:"#app",
    11. 				data(){
    12. 					return {
    13. 						num:6,
    14. 						warn:'不许不开心！',
    15. 						ok:1
    16. 					}
    17. 				}
    18. 			})
    19. 		script>

    效果：

    二. 指令

    指的是带有"v-"前缀的特殊属性

    2.1 v-if/v-else-if/v-else指令

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

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

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

    1. 		<div id="app">
    2. 			<p>1.v-if/v-else-if/v-elsep>
    3. 			<input v-model="score">
    4. 			<b v-if="score < 60">不及格b>
    5. 			<b v-else-if="score >=60 && score < 70">及格b>
    6. 			<b v-else-if="score >=70 && score < 80">中等b>
    7. 			<b v-else-if="score >=80 && score < 90">良好b>
    8. 			<b v-else="">优秀 b>
    9. 			
    10. 		div>
    11. 		<script type="text/javascript">
    12. 			new Vue({
    13. 				el:"#app",
    14. 				data(){
    15. 					return {
    16. 						score:69
    17. 					}
    18. 				}
    19. 			})
    20. 		script>

    效果：

    2.2  v-show指令

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

    1. 		<div id="app">
    2. 			<p>2.v-showp>
    3. 			<b v-if="isShow">展示b>
    4. 			<b v-show="isShow">展示b>
    5. 		div>
    6. 		<script type="text/javascript">
    7. 			new Vue({
    8. 				el:"#app",
    9. 				data(){
    10. 					return {
    11. 						isShow:false
    12. 					}
    13. 				}
    14. 			})
    15. 		script>

    v-if这个标签在浏览器都不存在，v-show有html代码，只是被css样式隐藏了。

    2.3 v-for指令

    类似JS的遍历

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

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

    1. 		<div id="app">
    2. 			<p>3.v-forp>
    3. 			<i v-for="a in arr">{{a}}  i><br>
    4. 			<i v-for="u in users">{{u.name}}  i><br>
    5. 			<i v-for="i,u in users">{{i}}  i>
    6. 		div>
    7. 		<script type="text/javascript">
    8. 			new Vue({
    9. 				el:"#app",
    10. 				data(){
    11. 					return {
    12. 						arr:[1,2,3,4],
    13. 						users:[{
    14. 							name:'程少商',id:1
    15. 						},{
    16. 							name:'凌不疑',id:2
    17. 						},{
    18. 							name:'许红豆',id:3
    19. 						},{
    20. 							name:'谢之遥',id:4
    21. 						}]
    22. 					}
    23. 				}
    24. 			})
    25. 		script>

    效果：

    2.4 下拉框/复选框

    1. 		<div id="app">
    2. 			<p>4.下拉框/复选框p>
    3. 			<select>
    4. 				<option v-for="h in hobbies" :value="h.id">{{h.name}}option>
    5. 			select>
    6. 			<div v-for="h in hobbies">
    7. 				<input type="checkbox" name="hobbies" :value="h.id">{{h.name}}
    8. 			div>
    9. 		div>
    10. 		<script type="text/javascript">
    11. 			new Vue({
    12. 				el:"#app",
    13. 				data(){
    14. 					return {
    15. 						hobbies:[{
    16. 							name:'跑步',id:1
    17. 						},{
    18. 							name:'打游戏',id:2
    19. 						},{
    20. 							name:'唱歌',id:3
    21. 						},{
    22. 							name:'绘画',id:4
    23. 						}]
    24. 					}
    25. 				}
    26. 			})
    27. 		script>

    效果：

    2.5 动态参数

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

      ...

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

      ...

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

    1. 		<div id="app">
    2. 			<p>5.动态参数p>
    3. 			<input v-model="evname">
    4. 			<button v-on:[evname]="test">点我点我button>
    5. 		div>
    6. 		<script type="text/javascript">
    7. 			new Vue({
    8. 				el:"#app",
    9. 				data(){
    10. 					return {
    11. 						evname:'click'
    12. 					}
    13. 				},
    14. 				methods:{
    15. 					test(){
    16. 						// 单击事件  双击事件
    17. 						alert('点我干嘛！！！')
    18. 					}
    19. 				}
    20. 			})
    21. 		script>

    效果：

     三. 过滤器

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

    {{ name | capitalize }}

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

    注2：过滤器可以串联    

             {{ message | filterA | filterB }}

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

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

    3.1 局部过滤器基本应用

    1. 		<div id="app">
    2. 			<p>1.局部过滤器基本应用p>
    3. 			{{msg}}<br>
    4. 			{{msg | filterA}}
    5. 		div>
    6. 		<script type="text/javascript">
    7. 			new Vue({
    8. 				el:"#app",
    9. 				filters:{
    10. 					'filterA':function(v){
    11. 						return v.substr(0,6);
    12. 					}
    13. 				},
    14. 				data(){
    15. 					return {
    16. 						msg:'今天的不开心就到此为止吧！'
    17. 					}
    18. 				}
    19. 			})
    20. 		script>

    效果：

     

    3.2 局部过滤器串行使用

    1. 		<div id="app">
    2. 			<p>2.局部过滤器串行使用p>
    3. 			{{msg}}<br>
    4. 			{{msg | filterA | filterB}}
    5. 		div>
    6. 		<script type="text/javascript">
    7. 			new Vue({
    8. 				el:"#app",
    9. 				filters:{
    10. 					'filterA':function(v){
    11. 						return v.substr(0,6);
    12. 					},
    13. 					'filterB':function(v){
    14. 						return v.substr(2,4);
    15. 					}
    16. 				},
    17. 				data(){
    18. 					return {
    19. 						msg:'今天的不开心就到此为止吧！'
    20. 					}
    21. 				}
    22. 			})
    23. 		script>

     效果：

    3.3 局部过滤器传参

    1. 		<div id="app">
    2. 			<p>3.局部过滤器传参p>
    3. 			{{msg}}<br>
    4. 			{{msg | filterC(3,9)}}
    5. 		div>
    6. 		<script type="text/javascript">
    7. 			new Vue({
    8. 				el:"#app",
    9. 				filters:{
    10. 					'filterC':function(v,begin,end){
    11. 						return v.substr(begin,end);
    12. 					}
    13. 				},
    14. 				data(){
    15. 					return {
    16. 						msg:'今天的不开心就到此为止吧！'
    17. 					}
    18. 				}
    19. 			})
    20. 		script>

    效果：

    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. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		<script src="date.js">script>
    8. 		<title>过滤器title>
    9. 	head>
    10. 	<body>
    11. 		<div id="app">
    12. 			<p>4.全局过滤器p>
    13. 			{{time}}<br>
    14. 			{{time | all}}
    15. 		div>
    16. 		<script type="text/javascript">
    17. 			Vue.filter('all', function(value) {
    18. 				return fmtDate(value);
    19. 			});
    20. 			new Vue({
    21. 				el:"#app",
    22. 				data(){
    23. 					return {
    24. 						msg:'今天的不开心就到此为止吧！',
    25. 						time:new Date()
    26. 					}
    27. 				}
    28. 			})
    29. 		script>
    30. 	body>
    31. html>

    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. };

     效果：

    四. 计算属性和监听属性

    4.1 计算属性

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

       computed:{}

    1. 		<div id="app">
    2. 			<p>1.计算属性p>
    3. 			单价:<input v-model="price">
    4. 			数量:<input v-model="num">
    5. 			小计:{{subtotal}}
    6. 		div>
    7. 		<script type="text/javascript">
    8. 			new Vue({
    9. 				el:"#app",
    10. 				data(){
    11. 					return {
    12. 						price:79,
    13. 						num:1
    14. 					}
    15. 				},
    16. 				computed:{
    17. 					subtotal:function(){
    18. 						return this.price * this.num;
    19. 					}
    20. 				}
    21. 			})
    22. 		script>

    效果:

    4.2 监听属性

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

       watch:{}

    1. 		<div id="app">
    2. 			<p>2.监听属性p>
    3. 			千米:<input v-model="km" />
    4. 			米:<input v-model="m" />
    5. 		div>
    6. 		<script type="text/javascript">
    7. 			new Vue({
    8. 				el:"#app",
    9. 				data(){
    10. 					return {
    11. 						m:1000,
    12. 						km:1
    13. 					}
    14. 				},
    15. 				watch:{
    16. 					km:function(v){
    17. 						// v指的是被监听的属性km
    18. 						this.m = parseFloat(v) * 1000;
    19. 					},
    20. 					m:function(v){
    21. 						// v指的是被监听的属性m
    22. 						this.km = parseFloat(v) / 1000;
    23. 					}
    24. 				}
    25. 			})
    26. 		script>

    效果：

     

    计算属性是一个变量影响另一个变量，单向影响。监听属性是双向影响。

     五. 利用Vue实现一个简单的购物车

    1. html>
    2. <html>
    3. <head>
    4.   <title>购物车title>
    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. head>
    8. <body>
    9.   <div id="app">
    10.     <h1>购物车h1>
    11.     <table border="0">
    12.       <thead>
    13.         <tr>
    14.           <th>商品名称th>
    15.           <th>单价th>
    16.           <th>数量th>
    17.           <th>小计th>
    18.         tr>
    19.       thead>
    20.       <tbody>
    21.         <tr v-for="(item, index) in cartItems" :key="index">
    22.           <td>{{ item.name }}td>
    23.           <td>{{ item.price.toFixed(2) }}td>
    24.           <td>
    25.             <button @click="decreaseQuantity(index)">-button>
    26.             {{ item.quantity }}
    27.             <button @click="increaseQuantity(index)">+button>
    28.           td>
    29.           <td>{{ calculateSubtotal(item).toFixed(2) }}td>
    30.         tr>
    31.       tbody>
    32.       <tfoot>
    33.         <tr>
    34.           <td colspan="3" style="float: right;">总价：td>
    35.           <td>{{ calculateTotalPrice().toFixed(2) }}td>
    36.         tr>
    37.       tfoot>
    38.     table>
    39.   div>
    40.  
    41.   <script>
    42.     new Vue({
    43.       el: '#app',
    44.       data: {
    45.         cartItems: [
    46.           { name: '爱心棉花糖', price: 3.9, quantity: 1 },
    47.           { name: '精致小风扇', price: 29.9, quantity: 1 },
    48.           { name: '小猪佩奇鼠标', price: 30, quantity: 1 }
    49.         ]
    50.       },
    51.       methods: {
    52.         increaseQuantity(index) {
    53.           this.cartItems[index].quantity++;
    54.         },
    55.         decreaseQuantity(index) {
    56.           if (this.cartItems[index].quantity > 1) {
    57.             this.cartItems[index].quantity--;
    58.           }
    59.         },
    60.         calculateSubtotal(item) {
    61.           return item.price * item.quantity;
    62.         },
    63.         calculateTotalPrice() {
    64.           let totalPrice = 0;
    65.           for (let i = 0; i < this.cartItems.length; i++) {
    66.             totalPrice += this.calculateSubtotal(this.cartItems[i]);
    67.           }
    68.           return totalPrice;
    69.         }
    70.       }
    71.     });
    72.   script>
    73. body>
    74. html>

    效果： 

  • 相关阅读:
    定量数据和定性数据
    2022.08.16 java学习
    铝塑膜瑕疵检测系统
    学习Python可以做什么工作？选什么方向？
    Linux下多线程的操作
    Hazelcast系列(六)： TCP-IP发现机制
    Python学习笔记（十七）——Pandas库
    Collection接口中包含什么呢？
    Python在数据分析与可视化中的深度实践
    两化融合办理有补贴吗，办理条件是什么?
  • 原文地址：https://blog.csdn.net/lijie1025/article/details/132985795