计算属性和监听属性,生命周期钩子,组件介绍

计算属性

# 计算属性是基于它们的依赖进行缓存的
# 计算属性只有在它的相关依赖发生改变时才会重新求值
# 计算属性就像Python中的property,可以把方法/函数伪装成属性
# 计算属性必须要有返回值

基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>普通函数---其他数据变化---》函数会重写计算</h1>年龄:<input type="text" v-model="age">姓名:<input type="text" v-model="name"><br>{{getAge()}}<br><h1>计算属性</h1>年龄:<input type="text" v-model="age1">姓名:<input type="text" v-model="name1"><br>{{newAge}}<br>
</div>
</body>
<script>var vm = new Vue({el: '#d1',data: {age: '',name: '',age1: '',name1: '',},methods: {getAge() {console.log('我执行了')return Number(this.age) + 10}},computed: {newAge() {console.log('我执行了--计算属性')return Number(this.age1) + 20}}})
</script>
</html>

首字母变大写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>首字母变大写</h1><input type="text" v-model="name"> ---》{{newName}}
</div>
</body>
<script>var vm = new Vue({el: '#d1',data: {name: ''},computed: {newName() {return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)}}})
</script>
</html>

通过计算属性,重写过滤案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>过滤案例</h1><input type="text" v-model="search"><ul><li v-for="item in newDataList">{{item}}</li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {search: '',dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],},computed:{newDataList(){return  this.dataList.filter(item => item.indexOf(this.search) >= 0)}}})
</script>
</html>

监听属性

只要属性发生变化,就会执行 函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>监听属性</h1><button @click="ordering='id'">按id排序</button><button @click="ordering='price'">按价格排序</button>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {ordering: ''},watch: {ordering() {console.log('我变了,向后端发送请求')console.log(this.ordering)}}})
</script>
</html>

生命周期钩子

# vue 组件的生命周期钩子函数
    一个vue的组件,从创建开始---》到最后销毁---》经历一些过程---》每个过程都绑定了一个函数--》当到这个过程的时候,这个函数就会执行
    面向切面编程:AOP
    
 
# 8个生命周期钩子函数
    1.beforeCreate: 组件创建之前实现这个:组件html,js--》html和js都是空的
    2.created:组件创建完成后:js就有值了,html还是空的  (向后端发送ajax请求)
    3.beforeMount:挂载模板之前,js有值,模板(html) 还是空的(向后端发送ajax请求)
    4.mounted:挂载完成:js有值,模板有值
    5.beforeUpdate:刷新之前执行:只要页面发送变化或js变量发生变化,就会触发它的执行
    6.updated:刷新之后执行
    7.beforeDestroy:被销毁之前执行  (资源清理性工作)
    8.destroyed:被销毁之后执行
    
# 实际用途
    1 页面加载完成,向后端发请求拿数据
        写在create中
        
    2 组件中有定时任务,组件销毁,要销毁定时任务、
  


# 补充:定时器和延时器
    setTimeout( ()=>{
        console.log('延时器,3s后执行')
    },3000)
    
    setInterval(()=>{
        console.log('每隔3s执行')
    },3000)

组件介绍

# 组件是:有模板,有js的 ,有方法的 对象  组件和组件直接的 变量,模板都是隔离的# 定义组件Vue.component('Child',{template: `<div><h1>我是组件</h1><button @click="haneleClick">点我看美女</button><p>年龄是:{{ age }}</p></div>`,data() {return {age: 19}},methods: {haneleClick() {alert('美女')}}})
# 使组件,直接根据组件名使用即可<Child></Child>

局部组件和全局组件

 #  全局组件
    - 定义:
    Vue.component('Child',{})
    - 使用,可以在任意位置使用
        <Child></Child>
    
# 局部组件-->只能定义在组件内部,只能在当前组件中使用
    -定义
     var vm = new Vue({
        el: '#app',
        data: {},
        components:{局部组件:{}}
    })
    -使用:只能用在被 当前组件管理的 html (#app) 中,放在别的位置找不到

全局组件使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>组件的使用</h1><button @click="handleClick">点我看美女</button><hr><lyz></lyz>
</div>
</body>
<script>// 定义全局组件Vue.component('lyz', {template: `<div><h1>{{ name }}</h1><button @click="handleClick">点我换名字</button></div>`,data() {return {name: 'lyz'}},methods: {handleClick() {this.name = '吴彦祖'}}})var vm = new Vue({el: '#d1',data: {},methods: {handleClick() {alert('美女')}}})
</script>
</html>

局部组件的使用

局部组件是定义在组件内部,只能在当前组件中使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>局部组件的使用</h1><Child></Child>
</div>
</body>
<script>// 全局组件Vue.component('Child', {template: `<div><lyz></lyz></div>`,// 局部组件components: {lyz: {template: `<div><h2>我是局部组件</h2></div>`,data() {return {}},methods: {}}}})var vm = new Vue({el: '#app',data: {},methods: {handleClick() {alert('美女')}},})
</script>
</html>

组件间通信

父传子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>组件通信之父传子:自定义属性</h1><p>父组件中得名字:{{name}}</p><div style="background-color: #c0e9ff"><child :nn="name" mm="lyz"></child></div>
</div>
</body>
<script>Vue.component('child',{template:`<div><h2>我是Child组件</h2><p>{{nn}}==={{mm}}</p></div>`,props:['nn','mm']})var vm = new Vue({el:'#d1',data:{name:'吴彦祖'},methods:{}})
</script>
</html>

子传父

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>组件通信之子传父:自定义事件</h1><p>子组件的值:{{p_name}}</p><child @mm="handleEvent"></child>
</div>
</body>
<script>Vue.component('child', {template: `<div><h2>我是Child组件</h2><input type="text" v-model="name">---{{ name }}<button @click="handleSend">传给父亲</button></div>`,data() {return {name: ''}},methods: {handleSend() {this.$emit('mm', this.name)}}})var vm = new Vue({el: '#d1',data: {p_name: ''},methods: {handleEvent(name) {this.p_name = name}}})
</script>
</html>

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

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

相关文章

[机缘参悟-122] :IT人如何认识自己的?自省、面试、考核、咨询?

目录 一、为什么要认识自己 二、认识自己的哪些方面&#xff1f; 三、如何认识自己 3.1 通过自省认识自己 3.2 通过面试认识自己 3.3 通过咨询认识自己 3.4 通过相亲认识自己 3.5 通过一段感情关系认识自己 一、为什么要认识自己 认识自己在人类的成长和心灵发展过程中…

Java jar文件变更jar或者xml方法

1. 解压jar文件 // 解压在同级 jar -xvf XXXX.jar2.解压后 在解压出来的文件中&#xff0c;找到修改的文件3.开始替换 jar -uvf0 XXXX.jar BOOT-INF4.校验方法 Java -jar XXXX.jar 是否正常启动

oracle19c容器数据库data dump 数据泵传输数据(1)

目录 1.在pdb1创建实验环境 2.创建目标数据库pdb2 3.开始从pdb1全库导出 4.开始导入到pdb2 5. 解决报错&#xff1a;添加在pdb2添加users表空间 Exporting and Importing Between PDBs 在pdb之间传输数据 实验&#xff1a;将pdb1 全库导入到pdb2&#xff0c;pdb2最好是新…

备战2024美赛数学建模,文末获取历史优秀论文

总说&#xff08;历年美赛优秀论文可获取&#xff09; 数模的题型千变万化&#xff0c;我今天想讲的主要是一些「画图」、「建模」、「写作」和「论文结构」的思路&#xff0c;这些往往是美赛阅卷官最看重的点&#xff0c;突破了这些点&#xff0c;才能真正让你的美赛论文更上…

css三大特性

css 三大特性 一、层叠性&#xff1a;css样式冲突采取原则&#xff08;后者覆盖前者&#xff09; 二、继承性&#xff1a;对于部分属性样式会有天生的继承 &#xff08;1&#xff09;字体系列属性 font-family&#xff1a;字体系列 font-weight&#xff1a;字体的粗细 fon…

Java-布隆过滤器的实现

文章目录 前言一、概述二、误差率三、hash 函数的选择四、手写布隆过滤器五、guava 中的布隆过滤器 前言 如果想要判断一个元素是不是在一个集合里&#xff0c;一般想到的是将所有元素保存起来&#xff0c;然后通过比较确定。链表&#xff0c;树等等数据结构都是这种思路&…

LeetCode 145. 二叉树的后序遍历

145. 二叉树的后序遍历 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的 后序遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[3,2,1]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&…

zmq_send与zmq_recv

zmq_send 简介&#xff1a; zmq_send 是 ZeroMQ 库中用于发送消息的函数&#xff0c;函数原型如下&#xff1a; int zmq_send(void *socket, const void *buf, size_t len, int flags);参数说明&#xff1a; socket&#xff1a;要发送消息的 Socket。buf&#xff1a;要发送的…

k8s实践(14)--scheduler调度器和pod调度策略

一、scheduler调度器 1、kube-scheduler简介 k8s实践(10) -- Kubernetes集群运行原理详解 介绍过kube-scheduler。 kube-scheduler是运行在master节点上&#xff0c;其主要作用是负责资源的调度&#xff08;Pod调度&#xff09;&#xff0c;通过API Server的Watch接口监听新建…

Google和百度搜索引擎常用语法及其说明

Google和百度搜索引擎常用语法及其说明 语法Google搜索说明搜索词例如&#xff1a;Python 教程基本搜索&#xff0c;返回包含指定关键词的结果。“短语搜索”“Python 教程”返回包含完整短语的结果&#xff0c;确切匹配搜索词。ANDPython AND 教程返回同时包含两个关键词的结…

three.js实现信号波效果

three.js实现信号波效果 图例 步骤 创建平面&#xff0c;添加贴图&#xff0c;平移几何体缩放 代码 <template><div class"app"><div ref"canvesRef" class"canvas-wrap"></div></div> </template><…

Apache JMeter 5.5: 新手指南

如何获取并运行 JMeter 首先&#xff0c;要使用 JMeter&#xff0c;你需要从官网获取软件包。前往 Apache JMeter 的官方页面&#xff0c;然后下载所 需的压缩文件。 配置和启动 JMeter 获取了 JMeter 后&#xff0c;由于它是无需安装即可使用的工具&#xff0c;直接解压下载…

AirSim 的 ROS 功能包测试

参考链接&#xff1a; Ubuntu18.04搭建AirSimROS仿真环境_airsim ros-CSDN博客 ROS: AirSim ROS Wrapper - AirSim 1.编译 ros 包&#xff08;必须是 gcc-8&#xff09; 如果您的默认 GCC 不是 8 或更高&#xff08;使用 gcc --version 检查&#xff09;&#xff0c;那么编译…

vue element plus DatePicker 日期选择器

用于选择或输入日期 TIP 在 SSR 场景下&#xff0c;您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress). 选择某一天# 以”日“为基本单位&#xff0c;基础的日期选择控件 基本单位由 type 属性指定。 通过 shortcuts 配…

软件测试|Python urllib3库使用指南

简介 当涉及到进行网络请求和处理HTTP相关任务时&#xff0c;Python的urllib3库是一个强大且灵活的选择。它提供了一种简单的方式来执行HTTP请求、处理响应和处理连接池&#xff0c;使得与Web服务进行交互变得更加容易。本文将详细介绍如何使用urllib3库进行网络请求。 安装u…

java.net.ConnectException: Connection refused: connect已解决

&#x1f95a;今日鸡汤&#x1f95a; 要有最朴素的生活和最遥远的梦想&#xff0c;即使明天天寒地冻&#xff0c;山高水远&#xff0c;路远马亡。 —— 《枫》 遇见问题莫着急&#xff0c;着急也没用~&#x1f636;‍&#x1f32b;️ 目录 &#x1f9c2;1.令人发麻的问题 &am…

python深度学习搭环境技巧

1、使用-t做不同项目的环境隔离 pip intall xxx -t /path/env1 公共环境放一个路径&#xff0c;其他放单独路径&#xff0c;可以完美隔离 训练时通过export PYTHONPATH/path/env1:$PYTHONPATH来调整 2、安装包&#xff0c;因为依赖导致失败 加上参数–no-deps, 不按照依赖 有…

vagrant 用户名密码登录

正常登录后 sudo -i 切换到root权限 vim /etc/ssh/vim sshd_config 将PasswordAuthentication no设置 为yes 重启sshd.service服务 systemctl restart sshd.service

软件测试|详解 Pytest 参数化:简化测试用例的编写

简介 Pytest 是一个广泛使用的 Python 测试框架&#xff0c;它提供了丰富的功能来编写和执行测试用例。其中一个强大的特性是参数化&#xff0c;它允许我们通过一种简洁的方式运行多个输入参数的相似测试用例&#xff0c;从而减少冗余的代码。本文将详细介绍 Pytest 的参数化功…

MT36291 2.5A 高效的1.2MHz电流模式升压转换器 DCDC管理芯片 航天民芯

描述 MT36291是一个恒定频率、6引脚SOT23电流模式升压转换器&#xff0c;旨在用于小型、低功耗的应用。MT36291的开关频率为1.2MHz&#xff0c;并允许使用2mm或更低高度的微小、低成本的电容器和电感器。内部软启动导致注入电流小&#xff0c;延长电池寿命。MT36291的特点是在光…