谷粒商城学习日记（20）——Vue语法入门 _学习日记

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。这篇文章主要讲述谷粒商城学习日记（20）——Vue语法入门相关的知识，希望能为你提供帮助。

Vue语法入门

计算属性和侦听器
过滤器
自定义组件

可参考文档
vue官方api
计算属性和侦听器格式
Vue对象里面声明
computed：计算属性
watch：侦听器

new Vue( el: "#app", data: , computed: , watch: ) < /script>

示例

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title> Document< /title> < /head> < body> < div id="app"> < !-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 --> < ul> < li> 西游记；价格：xyjPrice，数量：< input type="number" v-model="xyjNum"> < /li> < li> 水浒传；价格：shzPrice，数量：< input type="number" v-model="shzNum"> < /li> < li> 总价：totalPrice< /li> msg < /ul> < /div> < script src="https://www.songbingjia.com/node_modules/vue/dist/vue.js"> < /script> < script> //watch可以让我们监控一个值的变化。从而做出相应的反应。 new Vue( el: "#app", data: xyjPrice: 99.98, shzPrice: 98.00, xyjNum: 1, shzNum: 1, msg: "" , computed: totalPrice() return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum, watch: xyjNum(newVal,oldVal) if(newVal> =3) this.msg = "库存超出限制"; this.xyjNum = 3 else this.msg = ""; , ) < /script> < /body> < /html>

过滤器过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
可以使用局部定义的方式和全局定义的方式使用
局部使用方式
引用方式
值 | 过滤器名

< /script> let vm = new Vue( el: "#app", data: , filters: //filters 定义局部过滤器，只可以在当前vue实例中使用) < /script>

全局使用方式

< script> Vue.filter("gFilter", function (val) ) < /script>

示例

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title> Document< /title> < /head> < body> < !-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 --> < div id="app"> < ul> < li v-for="user in userList"> user.id ==> user.name ==> user.gender == 1?"男":"女" ==> user.gender | genderFilter ==> user.gender | gFilter < /li> < /ul> < /div> < script src="https://www.songbingjia.com/node_modules/vue/dist/vue.js"> < /script> < script> Vue.filter("gFilter", function (val) if (val == 1) return "男~~~"; else return "女~~~"; )let vm = new Vue( el: "#app", data: userList: [ id: 1, name: jacky, gender: 1 , id: 2, name: peter, gender: 0 ] , filters: //filters 定义局部过滤器，只可以在当前vue实例中使用 genderFilter(val) if (val == 1) return "男"; else return "女"; ) < /script> < /body> < /html>

自定义组件在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。
例如可能会有相同的头部导航。
但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的vue实例都是组件
【谷粒商城学习日记（20）——Vue语法入门】组件其实也是一个vue实例，因此它在定义时也会接收：data、methods、生命周期函等
不同的是组件不会与页面的元素绑定（所以不写el），否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了
data必须是一个函数，不再是一个对象。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title> Document< /title> < /head> < body> < div id="app"> < !-- 每个对象都是独立统计的 --> < counter> < /counter> < counter> < /counter> < button-counter> < /button-counter> < /div> < script src="https://www.songbingjia.com/node_modules/vue/dist/vue.js"> < /script> < script> //1、全局声明注册一个组件 // counter标签，代表button Vue.component("counter", template: `< button v-on:click="me()"> 我被点击了 count 次< /button> `, data() return count: 1 // 数据, methods: me() this.count ++; ); //2、局部声明一个组件 const buttonCounter = template: `< button v-on:click="count++"> 我被点击了 count 次~~~< /button> `, data() return count: 1; new Vue( el: "#app", data: count: 1 , components:// 要用的组件 button-counter: buttonCounter) < /script> < /body> < /html>