Vue 计算属性和watch监听

1.1.计算属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--  引入vue.js  --><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><div id="app"><h1>您的生日是：{{birth}} </h1></div>
</body>
<script>var app = new Vue({el:"#app",data:{birthday:1429038888888 // 毫秒值},computed:{ //计算属性,计算属性的结果会被缓存birth(){ //计算属性的函数，函数返回值即为计算过的属性的值const d = new Date(this.birthday);return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();}}});
</script>
</html>

1.2.watch

  • watch可以让我们监控一个值的变化。从而做出相应的反应。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 1.引入vue.js --><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><!-- 2.设置vue的作用域载体 --><div id="app">省：<input type="text" v-model="shen"><br>市：<input type="text" v-model="shi"><br>区：<input type="text" v-model="qu"></div></body>
<script>//3.创建vue实例var app = new Vue({el:"#app", //设置vue的作用域载体data:{shen:"",shi:"",qu:""},watch:{//监听属性操作shen(newv,oldv){ //newv : 新值   oldv : 老值console.log(oldv+":"+newv);if (newv === "河南省"){  //实际中把这个地方换成vue的请求后端接口获取数据操作this.shi="郑州市";}},shi(newv,oldv){console.log(oldv+":"+newv);if (newv === "郑州市"){this.qu="高新技术产业区";}}}});</script>
</html>

2.1.什么是组件化

  • 也称之为自定义组件标签

  • 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航、底部信息。

  • 但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

  • 在vue里，所有的vue实例都是组件

2.2.全局组件

  • 我们通过Vue的component方法来定义一个全局组件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 1.引入vue.js --><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><!-- 2.设置vue的作用域载体 --><div id="app">{{name}}<br><liusong></liusong><liusong></liusong><liusong></liusong><liusong></liusong></div><hr><div id="PDD">{{name}}<br><liusong></liusong><liusong></liusong><liusong></liusong></div></body>
<script>//自定义全局组件，在任何的vue实例中都可以使用//参数1：自定义组件的名称，就是使用自定义组件的时候的名称//参数2：自定义组件中封装的标签，以及标签所需的属性数据Vue.component("liusong",{template:"<button v-on:click='count++'>你点了{{count}}次，我记住了</button>",  //封装的标签内容data(){ //封装的标签所需的数据return {  //返回的是数据模型count:0  //真正要在自定义组件封装的标签中使用的属性}}})//3.创建vue实例var app = new Vue({el:"#app",data:{name:"vue作用域-app"}});var pdd = new Vue({el:"#PDD",data:{name:"vue作用域-PDD"}});</script>
</html>

  • 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等

  • 组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。

  • 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板

  • 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。

  • data必须是一个函数，不再是一个对象。

2.3.组件的使用及相关介绍

<div id="app"><!--使用定义好的全局组件--><counter></counter><counter></counter><counter></counter>
</div>

  • 当我们定义这个 <counter> 组件时，它的data 并不是像之前直接提供一个对象：

data: {count: 0
}

  • 取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

data() {return {count: 0}
}

2.4.局部组件

        一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
        我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 1.引入vue.js --><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><!-- 2.设置vue的作用域载体 --><div id="app">{{name}}<br><lanou></lanou><lanou></lanou><lanou></lanou><lanou></lanou></div><hr><div id="PDD">{{name}}<br><yan8></yan8><yan8></yan8><yan8></yan8></div></body>
<script>//自定义局部组件，默认任何vue实例都不可以使用，如果想要使用需要在vue中进行引入使用//设置一个变量，存放自定义的局部组件const conuter = {template:"<button v-on:click='count++'>你点了{{count}}次，我记住了</button>",data(){return {count:0}}}//3.创建vue实例var app = new Vue({el:"#app",data:{name:"vue作用域-app"},components:{ //引入自定义局部组件lanou:conuter  //key:value    key:使用自定义局部组件的名称    value:存放自定义局部组件的变量}});var pdd = new Vue({el:"#PDD",data:{name:"vue作用域-PDD"},components:{yan8:conuter}});</script>
</html>

  • components就是当前vue对象子组件集合。命名：key:value

    • 其key就是子组件名称

    • 其value就是组件对象名

  • 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

2.5.组件树

  • 通常一个单页应用会以一棵嵌套的组件树的形式来组织：

 

  • 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分

  • 左侧内容区又分为上下两个组件

  • 右侧边栏中又包含了3个子组件

  • 各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求

2.6.组件通信

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;text-decoration: none;list-style: none;}.shops {width: 90%;margin: 0 auto;}.shopName {padding: 10px 15px;display: flex;align-items: center;}.shopName span {font-size: 12px;}.shopName input {margin-right: 5px;}.goods {border: 1px solid #ccc;padding: 20px 25px;background-color: #fcfcfc;display: flex;justify-content: space-between;}.img {padding: 5px 10px 5px 15px;}.title {padding-right: 35px;font-size: 12px;letter-spacing: 0.5px;width: 250px;}.title:hover {color: brown;text-decoration: underline;}.kind {padding: 0 25px 0 15px;font-size: 12px;color: #ccc;}.oldPrice {font-size: 12px;color: #ccc;text-decoration: line-through;}.newPrice {font-size: bold;font-size: 12px;}.price {padding-right: 25px;}.num {display: flex;}.num button {padding: 5px;border: 1px solid #fcfcfc;}.num button:hover {border: 1px solid #f40;cursor: pointer;}.num input {width: 40px;height: 23px;}.totle_price {color: #f40;font-size: 14px;padding: 0 20px;}.operate {width: 150px;}.operate a {display: block;font-size: 12px;color: #555;line-height: 20px;}.operate a:hover {color: #f40;text-decoration: underline;}.jiesuan {width: 90%;margin: 10px auto;display: flex;justify-content: space-between;background-color: rgba(0, 0, 0, 0.1);}.j_left {display: flex;justify-content: space-between;align-items: center;width: 30%;font-size: 12px;padding-left: 10px;}.j_left a {color: #555;}.j_right {width: 40%;display: flex;justify-content: space-between;align-items: center;font-size: 12px;}.buy {padding: 10px 25px;font-size: 20px;border: 0;background-color: rgba(0, 0, 0, 0.3);color: white;font-weight: bold;letter-spacing: 10px;}.check {display: flex;align-items: center;}.check input {margin-right: 5px;}</style>
</head><body><div id="app"><div class="shops"><!-- 在父级组件对应的需要传递的子级组件上面绑定自定义事件 --><good-shop v-for="item in shops" :item="item"@getrange="getShopRange" /></div></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>//全局注册自定义组件Vue.component("inputNumber", {data: function () {return {num: this.value}},props: {value: {type: Number,default: 1}},methods: {//该操作用来响应用户对按钮的点击 clickAction(event) {var txt = event.target.innerText; //获取按钮的文字//更改当前组件数据源num中的数据if (txt == "+") {this.num = this.num + 1;} else {this.num = this.num - 1;this.num = this.num <= 0 ? 0 : this.num;}//将更改的数据通知给父级组件(触发组件实例上绑定的自定义事件)this.$emit('getnumber', this.num);}},template: `<div class="num"><button @click="clickAction">-</button><input type="number" v-model="num"/><button @click="clickAction">+</button></div>`});Vue.component("goodShop", {data: function () {return {total: this.item.newPrice * this.item.num}},// 定义一个checked属性用来接收结算模块中全选按钮被点击时对应商品的选择框的选中状态props: ["item"],methods: {//定义回调用来接收inputNumber需要传递的数据 getCurrentNumber(num) {//计算实时的总价格this.total = this.item.newPrice * num;}},template: `<div class="shop"><div class="shopName"><input type="checkbox"/><span>店铺:</span><span style="margin-left: 5px;">{{item.shopName}}</span></div><ul class="goods"><li><input type="checkbox"/></li><li class="img"><img :src="item.imgUrl" alt=""></li><li class="title">{{item.title}}</li><li class="kind">{{item.kind}}</li><li class="price"><span class="oldPrice" v-if="item.oldPrice != item.newPrice">{{item.oldPrice}}</span><span class="newPrice">￥{{item.newPrice}}</span></li><li><input-number :value="item.num" @getnumber="getCurrentNumber"/></li><li class="totle_price">￥{{total}}</li><li class="operate"><a href="#">移入文件夹</a><a href="#">删除</a><a href="#">相似宝贝</a></li></ul></div>`});const vm = new Vue({el: "#app",data: {shops: [{imgUrl: "https://img.alicdn.com/bao/uploaded/i4/2207715013415/O1CN01h0bvwy1b67FaqyasU_!!2207715013415.jpg_80x80.jpg",title: "小米10手机壳网红女款枫叶小米10s新品直边电镀硅胶软壳小米10pro手机套潮牌男款个性情侣镜",kind: "颜色分类：小米10【奶草绿】电镀枫叶",oldPrice: 30.00,newPrice: 13.50,shopName: "卓力奥旗舰店",num: 1,check: false},{imgUrl: "https://img.alicdn.com/bao/uploaded/i1/699994102/O1CN01jbs9k01gAlMQlBDJn_!!0-item_pic.jpg_80x80.jpg",title: "苏泊尔不粘锅电磁炉燃气灶适用多功能炒菜锅少油烟平底锅家用炒锅",kind: "颜色分类：小米10【奶草绿】电镀枫叶",oldPrice: 299.00,newPrice: 299.00,shopName: "苏泊尔炊具旗舰店",num: 1,check: true},{imgUrl: "https://img.alicdn.com/bao/uploaded/i5/TB1.D_NQFXXXXbLXFXXu0yL9XXX_034910.jpg_80x80.jpg",title: "Xiaomi/小米 小米手机6 全网通4G手机 双卡双待 骁龙835",kind: "网络类型：4G+全网通 机身颜色：亮黑 套餐类型：官方标配 存储容量：64GB",oldPrice: 2699.00,newPrice: 2699.00,shopName: "中国移动手机官方",num: 1,check: true},{imgUrl: "https://img.alicdn.com/bao/uploaded/i5/TB1.D_NQFXXXXbLXFXXu0yL9XXX_034910.jpg_80x80.jpg",title: "Xiaomi/小米 小米手机6 全网通4G手机 双卡双待 骁龙835",kind: "网络类型：4G+全网通 机身颜色：亮黑 套餐类型：官方标配 存储容量：64GB",oldPrice: 2699.00,newPrice: 2699.00,shopName: "中国移动手机官方",num: 1,check: false}],shopTotal: 0 //该属性用来完成存储目前所选商品的总价格  },methods: {//定义函数获取每一件勾选商品价格的变化幅度getShopRange(range) {//更改总价格this.shopTotal += range;}},});
</script></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/758308.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL 快速学习路径

MySQL 快速学习路径

整理了下MySQL的快速学习路径 最近因为失业一直在家&#xff0c;闲来没事打算学习一下&#xff0c;打发时间。 大家可以订阅关注加转发 \(^o^)/~MySQL安装(Mac系统) MySQL的启停登陆与退出 MySQL的目录结构 MySQL语法分类 DDL&#xff08;1&#xff09; MySQL语法分类 DDL…
阅读更多...
蚓链与数字化供应链的融合 带给新零售新福音

蚓链与数字化供应链的融合 带给新零售新福音

蚓链数字化生态与全境供应链的数字化融合&#xff0c;确实为新零售数字化营销带来了新的机遇。这种结合不仅提供了创新的思维和方法&#xff0c;更为新零售企业提供了强大的数字化承载和解决方案&#xff0c;使其能够更快捷地启动动销、实现倍速裂变、高福利宠粉&#xff0c;以…
阅读更多...
如何在尽量不损害画质的前提下降低视频占内存大小?视频格式科普及无损压缩软件推荐

如何在尽量不损害画质的前提下降低视频占内存大小?视频格式科普及无损压缩软件推荐

大家好呀&#xff0c;相比大家都有对视频画质和体积的追求和取舍&#xff0c;那么&#xff0c;如何才能在不牺牲画质的前提下&#xff0c;尽可能的将视频大小降低到极致呢&#xff1f; 首先我们要了解视频的构成&#xff0c;要想降低视频的体积大小&#xff0c;我们可以从以下几…
阅读更多...
FITS：一个轻量级而又功能强大的时间序列分析模型

FITS：一个轻量级而又功能强大的时间序列分析模型

AI预测相关目录 AI预测流程&#xff0c;包括ETL、算法策略、算法模型、模型评估、可视化等相关内容 最好有基础的python算法预测经验 EEMD策略及踩坑VMD-CNN-LSTM时序预测对双向LSTM等模型添加自注意力机制K折叠交叉验证optuna超参数优化框架多任务学习-模型融合策略Transform…
阅读更多...
MySQL 多表查询强化练习

MySQL 多表查询强化练习

环境准备 create table dept(id int PRIMARY KEY,dname VARCHAR(50),loc VARCHAR(50) ); insert into dept values (10,研发部,北京), (20,学工部, 上海), (30,销售部,广州 ), (40,财务部,深圳);create table job(id int PRIMARY KEY,jname VARCHAR(20),descripition VARCHAR(…
阅读更多...
【web世界探险家】HTML5 探索与实践

【web世界探险家】HTML5 探索与实践

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &…
阅读更多...
129740-002 是ABB生产的模块吗？

129740-002 是ABB生产的模块吗？

ABB 129740-002是一款智能模拟量输入输出IO模块。 这款模块的主要功能是进行模拟信号与数字信号之间的转换。具体来说&#xff0c;它可以将模拟信号转换为数字信号&#xff0c;也可以将数字信号转换回模拟信号。这一特性使其在工业应用中具有重要作用&#xff0c;尤其是在过程…
阅读更多...
Cesium新版修改源码后，编译不生效问题

Cesium新版修改源码后，编译不生效问题

最新版本的cesium源码在编译时默认使用node_models下的cesium/engine&#xff0c;从而导致咱们修改项目中的源码并不会生效 解决方式 &#xff1a; 进入到实际的源码位置&#xff0c;执行npm link 在返回到源码的根目录下执行 npm link ./packages/engine
阅读更多...
vue3 几种实现点击复制链接的方法

vue3 几种实现点击复制链接的方法

vue3 几种实现点击复制链接的方法 环境&#xff1a;vue3tselment plus 目的&#xff1a;常用到的地方就是点击复制分享链接功能 1.复制当前页面链接&#xff0c; <template><div class"news" style"margin-top: 30px"><el-button type&q…
阅读更多...
C++ 函数模板

C++ 函数模板

C 函数模板 函数模板 在C中&#xff0c;函数模板是一种允许函数以一种类型无关的方式来操作的工具。它们使得函数能够处理不同类型的数据而不需要为每种类型编写重复的代码。函数模板的核心思想是“参数化类型”&#xff0c;这意味着在定义函数时&#xff0c;可以使用一个或多…
阅读更多...
Java动态SQL知识点（含面试大厂题和源码）

Java动态SQL知识点（含面试大厂题和源码）

排序算法是数据结构与算法中的基本问题之一&#xff0c;它们的目的是将一组数据按照一定的顺序排列。不同的排序算法有着不同的时间复杂度、空间复杂度、稳定性等特性。在Java开发中&#xff0c;了解和掌握这些排序算法对于处理数据排序问题非常重要。下面是一些常用排序算法的…
阅读更多...
游戏 AI 反作弊|内附解决方案详情！

游戏 AI 反作弊|内附解决方案详情！

我们提出使用在游戏中广泛存在的回放日志数据&#xff0c;重构出玩家当局的表现。在回放 日志数据中&#xff0c;我们构建了玩家的时序行为数据&#xff0c;并基于该时序行为数据&#xff0c;分别搭建 了透视和自瞄外挂检测系统&#xff0c;该方法和系统可广泛应用于各种在线…
阅读更多...
SAP STMS请求重复传输

SAP STMS请求重复传输

STMS 在接请求的导入的时候&#xff0c;第一次发生了错误&#xff0c;在修复了错误之后&#xff0c; 该请求二次导入显示已经该请求已全部导入 可以按如下操作进行再次导入 附加--》其他请求--》添加 输入请求号并勾选再次导入 然后点选需要重复导入的请求号即可再次导入
阅读更多...
【移动端】AMap Flutter与Android AMap SDK交互

【移动端】AMap Flutter与Android AMap SDK交互

背景 本文的背景&#xff0c;是因为我在开发高德地图时&#xff0c;需要自定义高德比例尺位置和样式&#xff1b;但结果查看了AMap Flutter插件和AMap SDK源码后&#xff0c;发现AMap无法添加自定义MyMethodCallHandler的实现类&#xff01; why&#xff1f; 源码 在Flutte…
阅读更多...
AI算力池化赋能企业大模型价值探索

AI算力池化赋能企业大模型价值探索

1. 大语言模型企业落地中的算力痛点 随着人工智能技术的飞速发展&#xff0c;自然语言处理&#xff08;NLP&#xff09;成为了热门的研究领域之一。在这一领域中&#xff0c;大语言模型&#xff08;Large Language Models&#xff09;凭借其强大的语言理解和生成能力&#xff…
阅读更多...
学习笔记-华为IPD转型2020：3，IPD的实施

学习笔记-华为IPD转型2020：3，IPD的实施

3. IPD的实施 1999 年开始的 IPD 转型是计划中的多个转型项目中的第一个&#xff08;Liu&#xff0c;2015&#xff09;。华为为此次转型成立了一个专门的团队&#xff0c;从大约20人开始&#xff0c;他们是华为第一产业的高层领导。董事会主席孙雅芳是这个团队的负责人。该团…
阅读更多...
【Maven】使用maven-jar、maven-assembly、maven-shade优雅的实现第三方依赖一同打Jar包

【Maven】使用maven-jar、maven-assembly、maven-shade优雅的实现第三方依赖一同打Jar包

文章目录 一.前言二.常规Jar 打包&#xff1a;maven-jar-plugin三.Shade 打包&#xff1a;maven-shade-plugin1.如何使用2.将部分jar包添加或排除3.将依赖jar包内部资源添加或排除4.自动将所有不使用的类排除5.将依赖的类重命名并打包进来 &#xff08;隔离方案&#xff09;6.修…
阅读更多...
软件测试面试接口测试常见问题

软件测试面试接口测试常见问题

接口测试中,依赖登录状态的接口如何测试? 答:依赖登录状态的接口的本质上是在每次发送请求时需要带上 session或者 cookie才能发送成功,在构建POST请求时添加必要的 session或者cookie 按你的理解,软件接口是什么? 就是指程序中具体负责在不同模块之间传输或接受数据的并做…
阅读更多...
【笔记】本地笔记本ubuntu 远程传输服务器(ubuntu系统) 文件

【笔记】本地笔记本ubuntu 远程传输服务器(ubuntu系统) 文件

命令格式&#xff1a; &#xff08;1&#xff09;将本地文件拷贝到远程&#xff1a;scp 文件名 用户名计算机IP或者计算机名称:远程路径 &#xff08;2&#xff09;从远程将文件拷回本地&#xff1a;scp 用户名计算机IP或者计算机名称:文件名本地路径 &#xff08;3&#xff0…
阅读更多...
【Linux】项目部署CPU彪高如何定位

【Linux】项目部署CPU彪高如何定位

1.查看所有CPU占比 使用top指令获取彪高进程的PID 2.输出进程的信息 ps H -eo pid,tid,%cpu | grep 1313 3.查看线程的信息 jstack tid nid都是十六进制的 4.进制转换 将 tid的十进制转为十六进制 找到nid 可以定位到具体位置 5.关闭程序 ps -ef | grep java kill -9 jav…
阅读更多...
最新文章

Copyright @ 2022~2023