【Vue.JS】Vue.js 基本数据绑定 过滤器 计算属性 方法 购物
作者:神秘网友
发布时间:2020-09-04 18:58:33
【Vue.JS】Vue.js 基本数据绑定 过滤器 计算属性 方法 购物
【Vue.JS】Vue.js 基本数据绑定 & 过滤器 & 计算属性 & 方法 & 购物车自动汇总总价的DemoDemo最终效果图
Vue 基本使用
- 基本的数据绑定
- {{}} 插值表达式绑定数据。这种情况返回输出的是纯字符串。
- 基本指令运用
- v-bind 绑定某一属性。如 v-bind:src=“http://…”
- v-on
- v-if
- v-html 如果想输出 HTML 文档
- v-pre 跳过当前元素和它子元素的编译过程。
- : 是 v-bind 的语法糖。v-bind:src="" 等价于 :src=""
- @ 是 v-on 的语法糖。v-on:click=“btnfunction()” 等价于 @click=“btnFunction()”
- 插值过滤器
- 通常用户格式化文本:{{date | filtersA}}
- 过滤器可以连接多个:{{date | filtersA | filterB}}
- 过滤器可以传参:{{date | formatDate(arg1, arg2)}}。但是接收参数时注意,第一个参数为数据本身,后面的参数依次为手动传入的参数。
- 计算属性 & 方法
- 相同点
- 二者的目的都是处理数据
- 二者内部的代码写法基本一样
- 不同点
- 调用方式不同
+ 调用方法时需要加小括号(),括号内可以传参,如果不加,也不会报错,但返回的是方法本身,而并非值。 - 队列缓存机制
+ 计算属性有自己的缓存机制,当计算属性依赖的数据发生变化时,才会重新取值,所以只要 text 不变,计算属性的值就不更新
+ 方法只要重新渲染DOM,就会被调用执行。
+ ★ 当处理大数据量时建议使用计算属性,因为缓存机制可以节省很多不必要的调用,除非业务需求不需要缓存。 - get & set
+ 方法没有 get & set 方法
+ 计算属性包含 get 和 set 方法。默认的用法只是利用 get 来读取。如果需要时,可以手动设置 set 方法。
- 调用方式不同
- 相同点
代码
- CSS 部分(对table表格和button按钮略微调整)
<style> table { border-collapse: collapse; border-width: 1; font-size: 11px; color: #333; border-color: #666; } th, td { border-style: solid; border-width: 1px; padding: 8px; border-color: #666; text-align: center; width: 137px; height: 16px; } th { background-color: #5f5f5f; } td { background-color: #e9e9e9; } table button { width: 12px; height: 12px; border-width: 0px; border-radius: 50%; background: #1E90FF; cursor: pointer; color: white; font-size: 4px; margin: 0 auto; } table button:hover { background: #5599FF; } table button span { line-height: 12px; } </style>
- HTML 部分
<div id="app"> <!-- 插值表达式绑定数据 --> <p>{{text}}</p> <!-- v-html 输出 HTML 文档 --> <span v-html="link"></span> <!-- 跳过当前元素和它子元素的编译过程 --> <hr> <!-- v-if 绑定,其绑定的是一个 bool 类型 --> <p v-if='isShow'>Show Message ?</p> <!-- click 事件的两种绑定方式 --> <button v-on:click="btn_click">Click here</button> <button @click="isShow = !isShow">Or Click here</button> <hr> <p v-pre>{{text}}}</p> <!-- 调用计算属性 --> <p>{{reversedText2}}</p> <!-- 调用方法 --> <p>{{reversedText1()}}</p> <hr> <div style="width:770px"> <table> <!-- 当前时间:使用 mounted 钩子事件监听,每秒钟更新一次,使用过滤器进行格式化 --> <caption>当前时间 : {{date | formatDate}}</caption> <thead> <tr> <td>No</td> <td>goodsName</td> <td>price</td> <td>count</td> <td>totalPrice</td> </tr> </thead> <!-- 使用 v-for 绑定数组对象,循环列表 --> <tbody v-for="(item, index) in demoArray"> <tr> <td>{{index}}</td> <td>{{item.goodsName}}</td> <td>{{item.price}}</td> <td> <!-- 绑定 click 事件,点击按钮时触发,改变监控的值,其它监控的值随之改变 --> <!-- 使用 disabled 绑定,当 count 数量小于 0 时让其不可点击 --> <button @click="reduce(index)" :disabled="item.count <= 0"><span>-</span> </button> {{item.count}} <button @click="add(index)"><span>+</span> </button> </td> <td>{{item.price * item.count}}</td> </tr> </tbody> </table> <!-- 使用计算属性绑定总和 --> <p style="float:right">总计:{{totalPrice}}</p> </div> </div>
- JS 部分
<script> /*定义一个方法,用来格式化日期输出,小于10时前面加0。如 01, 02 */ var pDate = function (value) { return value < 10 ? '0' + value : value; } /*初始化 Vue 实例*/ var app = new Vue({ el: '#app', data: { text: '3.141.592.653.589.793.626.4', link: '<a href="./index.html">返回首页</a>', isShow: true, date: new Date(), //来个数组演示一下计算属性 demoArray: [{ goodsName: 'computer', price: 8000, count: 7 }, { goodsName: 'LCD', price: 2310, count: 12 }, { goodsName: 'Phone', price: 4300, count: 6 }] }, /*方法*/ methods: { /*这里面函数的 this 是指向 Vue 实例本身的*/ btn_click: function () { /*这里会发现一个奇怪的问题。 */ /*isShow 的值改变在 alert 的前面,但实际页面中确是先弹窗后隐藏 DOM 节点*/ /*这是因为 vue 监测数据变化时的队列缓存。具体可以参照 nextTick */ this.isShow = !this.isShow; alert('onclick'); /*这里面的方法也可以相互调用,因为都是 vue 实例下的方法,所以使用 this 来调用*/ this.showMessageBox(); }, //弹窗 showMessageBox: function () { alert('messageBox'); }, //反转输出文本 reversedText1: function () { //为了区分计算属性。这里使用斜线 / 来 join return this.text.split('.').reverse().join('/'); }, /*商品数量 - 1*/ reduce: function (index) { this.demoArray[index].count = this.demoArray[index].count - 1; }, /*商品数量 + 1*/ add: function (index) { this.demoArray[index].count = this.demoArray[index].count + 1; } }, /*计算属性*/ computed: { reversedText2: function () { //为了区分方法。这里使用逗号 , 来 join return this.text.split('.').reverse().join(','); }, /*默认的写法是利用 get 读取数据。如果需要指定写入数据时的操作,需要指定 set 方法*/ // totalPrice: function () { // var total = 0; // this.demoArray.forEach(item => { // total += item.price * item.count; // }); // //console.log(total); // return total; // }, totalPrice: { //读取数据时触发 get: function () { var total = 0; this.demoArray.forEach(item => { total += item.price * item.count; }); return total; }, //写入数据时触发 set: function () { } } }, /*过滤器*/ filters: { formatDate: function (value) { var date = new Date(value); var year = date.getFullYear(); var month = pDate(date.getMonth() + 1); var day = pDate(date.getDate()); var hour = pDate(date.getHours()); var miniutes = pDate(date.getMinutes()); var seconds = pDate(date.getSeconds()); return year + '-' + month + '-' + day + ' ' + hour + ':' + miniutes + ':' + seconds; } }, /*常见钩子函数*/ // 实例初始化之前 beforeCreate: function () { console.log("实例初始化之前"); }, // 实例创建完成 created: function () { console.log("实例创建完成"); }, // 实例挂载之前 beforeMount: function () { console.log("实例挂载之前"); }, // el 被创建的 vm.$el 替换并挂载到实例上之后 mounted: function () { console.log("实例挂载之后"); /*开启计时器,每秒修改一次 date 数据*/ var _this = this; //指向 Vue 实例 this.timer = setInterval(function () { _this.date = new Date(); //每隔1秒,修改一次 date 的数据 }, 1000) }, // 数据更新,DOM 重新渲染之前 beforeUpdate: function () { console.log("数据更新 DOM 重新渲染之前"); }, // 数据更新,DOM 重新渲染之后 updated: function () { console.log("数据更新 DOM 重新渲染之后"); }, // 实例销毁之前 beforeDestroy: function () { console.log("实例销毁之前"); /*清空定时器*/ if (this.timer) { clearInterval(this.timer); } }, // 实例销毁之后 destroyed: function () { console.log("实例销毁之后"); }, }); </script>