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，一经查实，立即删除！

相关文章

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

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

大家好呀&#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…
阅读更多...
游戏 AI 反作弊|内附解决方案详情！

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

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

SAP STMS请求重复传输

STMS 在接请求的导入的时候&#xff0c;第一次发生了错误&#xff0c;在修复了错误之后&#xff0c; 该请求二次导入显示已经该请求已全部导入 可以按如下操作进行再次导入 附加--》其他请求--》添加 输入请求号并勾选再次导入 然后点选需要重复导入的请求号即可再次导入
阅读更多...
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.修…
阅读更多...
【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…
阅读更多...
机器人路径规划：基于迪杰斯特拉算法(Dijkstra)的机器人路径规划（提供Python代码）

机器人路径规划：基于迪杰斯特拉算法(Dijkstra)的机器人路径规划（提供Python代码）

迪杰斯特拉算法(Dijkstra)是由荷兰计算机科学家狄克斯特拉于1959年提出的&#xff0c;因此又叫狄克斯特拉算法。是从一个顶点到其余各顶点的最短路径算法&#xff0c;解决的是有权图中最短路径问题。迪杰斯特拉算法主要特点是从起始点开始&#xff0c;采用贪心算法的策略&#…
阅读更多...
通过更新路书当前坐标下marker的icon来展示沿途的风景

通过更新路书当前坐标下marker的icon来展示沿途的风景

通过更新路书当前坐标下marker的icon来展示沿途的风景 1.效果图2.[工程链接](https://download.csdn.net/download/m0_61864577/88978866)3.需修改地方: 本文演示了如何通过百度地图的路书功能,展示途经的风景。定时缩放,既有全局路径,又有当前位置和运动轨迹;可以显示当前坐标…
阅读更多...
万界星空科技铜拉丝行业生产管理MES系统

万界星空科技铜拉丝行业生产管理MES系统

铜拉丝加工作为金属加工行业中的一个重要分支&#xff0c;在国内乃至全球工业领域都扮演着不可或缺的角色。特别是在高导材料领域&#xff0c;铜拉丝加工更是发挥着重要作用。 铜作为一种传统的金属材料&#xff0c;其拉丝加工技术早在古代就有应用。随着工业化进程的加快&…
阅读更多...
综合练习（python）

综合练习（python）

前言 有了前面的知识积累&#xff0c;我们这里做两个小练习&#xff0c;都要灵活运用前面的知识。 First 需求 根据美国/英国各自YouTube的数据&#xff0c;绘制出各自的评论数量的直方图 第一版 import numpy as np from matplotlib import pyplot as plt import matplo…
阅读更多...
Flutter Widget：State 状态管理

Flutter Widget：State 状态管理

响应式的编程框架永恒的主题——“状态(State)管理” 无论是在 React/Vue/Flutter 中讨论的问题和解决的思想都是一致的。 StatefulWidget的状态应该被谁管理&#xff1f;Widget本身&#xff1f;父 Widget &#xff1f;都会&#xff1f;还是另一个对象&#xff1f; 下面是官…
阅读更多...
webpack的热更新是如何做到的？

webpack的热更新是如何做到的？

Webpack的热更新&#xff08;Hot Module Replacement&#xff0c;HMR&#xff09;技术是现代前端开发中极为重要的一部分&#xff0c;它极大地提高了开发效率&#xff0c;并让开发者能够实时地查看代码更改后的效果&#xff0c;而无需手动刷新页面。在本文中&#xff0c;我们将…
阅读更多...
什么是晶振精度？对电路有什么影响？

什么是晶振精度？对电路有什么影响？

晶振的精度是衡量其频率稳定性的重要指标&#xff0c;指在温度为25℃条件下晶振正常工作时输出的频率工差范围&#xff0c;通常以ppm(parts per million)表示即“PPM”。这意味着晶振的频率每百万分之一的偏差&#xff0c;如果以10ppm的精度为例&#xff0c;意味着每秒钟的工作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023