Vue（二）

文章目录

    • 1.条件渲染
        • 1.关于js中的false的判定
        • 2.基本介绍
        • 3.v-if
          • 1.需求分析
          • 2.代码实例
        • 4.v-show实现
        • 5.v-if与v-show比较
        • 6.课后练习
    • 2.列表渲染
        • 1.代码实例
        • 2.课后练习
    • 3.组件化编程
        • 1.基本介绍
        • 2.实现方式一_普通方式
        • 2.实现方式二_全局组件方式
        • 3.实现方式三_局部组件方式
    • 4.生命周期和监听函数（钩子函数）
        • 1.基本介绍
        • 2.示意图
          • 简要介绍生命周期
          • 详细介绍生命周期（前六个重点）
        • 3.案例演示
          • 1.需求分析
          • 2.代码实例

1.条件渲染

1.关于js中的false的判定
  1. null
  2. NaN
  3. undefined
  4. “”
2.基本介绍

在判断的时候，会在数据池中寻找对应的变量，根据判定结果来进行操作

image-20240214181536838

image-20240214181550212

3.v-if
1.需求分析

image-20240214181813935

2.代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入vue --><script src="vue.js"></script>
</head>
<body><div id="app"><!--  双向绑定  --><h5><input type="checkbox" v-model:checked="checked">是否同意条款</h5><h4 v-if="checked">同意</h4><h4 v-else>不同意</h4></div><!--注意：这里的script需要写在后面-->
<script>// 创建一个vue对象（Model）var vue = new Vue({// 绑定view层el: "#app",// 数据池data: {checked: false},// 方法池methods: {}});</script>
</body>
</html>
<script setup>
</script>

image-20240214183121829

image-20240214183128088

4.v-show实现
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入vue --><script src="vue.js"></script>
</head>
<body><div id="app">
<!--  双向绑定  --><h5><input type="checkbox" v-model:checked="checked">是否同意条款</h5><h4 v-show="!checked">不同意</h4><h4 v-show="checked">同意</h4></div><!--注意：这里的script需要写在后面-->
<script>// 创建一个vue对象（Model）var vue = new Vue({// 绑定view层el: "#app",// 数据池data: {checked: false},// 方法池methods: {}});</script>
</body>
</html>
<script setup>
</script>
5.v-if与v-show比较
  1. v-if：动态创建和销毁，开销大
  2. v-show：使用css切换可见度，并没有创建和销毁，开销小
6.课后练习

image-20240214184722457

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入vue --><script src="vue.js"></script>
</head>
<body><div id="app">
<!--    双向绑定value--><h3>输入成绩1-100&nbsp;<input type="text" v-model="value"></h3><h4 v-if="value>90">您的成绩是{{value}}<br>优秀</h4><h4 v-else-if="value>70">您的成绩是{{value}}<br>良好</h4><h4 v-else-if="value>60">您的成绩是{{value}}<br>及格</h4><h4 v-else>您的成绩是{{value}}<br>不及格</h4></div><!--注意：这里的script需要写在后面-->
<script>// 创建一个vue对象（Model）var vue = new Vue({// 绑定view层el: "#app",// 数据池data: {value: 85},// 方法池methods: {}});</script>
</body>
</html>
<script setup>
</script>

image-20240214190219665

2.列表渲染

1.代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入vue --><script src="vue.js"></script>
</head>
<body><div id="app1"><h2>简单的列表渲染</h2><ul><li v-for="i in 3">{{i}}</li></ul><h2>简单的列表渲染——带索引</h2><ul><li v-for="(i, index) in 3">{{index}} -- {{i}}</li></ul><h2>简单的列表渲染——遍历对象数组</h2><table border="2px" width="400px"><tr v-for="monster in monsters"><td>{{monster.id}}</td><td>{{monster.name}}</td><td>{{monster.age}}</td></tr></table>
</div><!--注意：这里的script需要写在后面-->
<script>// 创建一个vue对象（Model）var vue = new Vue({// 绑定view层el: "#app1",// 数据池data: {//一个数组monsters: [{id: 1, name: "牛魔王", age: 100},{id: 2, name: "黑山老妖", age: 200},{id: 3, name: "红孩儿", age: 300}]},// 方法池methods: {}});</script>
</body>
</html>
<script setup>
</script>

image-20240214193328461

2.课后练习

image-20240214193454623

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body>
<div id="app"><table border="1px" width="400px"><!--if和for可以写在一起--><tr v-if="student.score > 60" v-for="student in students"><td>{{student.id}}</td><td>{{student.name}}</td><td>{{student.age}}</td><td>{{student.score}}</td></tr></table>
</div><script>new Vue({el: "#app",data: {students: [{id: 1, name: "jack", age: 12, score: 90},{id: 2, name: "tom", age: 32, score: 30},{id: 3, name: "mary", age: 22, score: 80},{id: 4, name: "lisa", age: 13, score: 20},{id: 5, name: "lihua", age: 11, score: 94}]}})
</script>
</body>
</html>

image-20240214194643422

3.组件化编程

1.基本介绍

image-20240214195020100

image-20240214195515303

2.实现方式一_普通方式

image-20240214195629725

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="app">
<!--
1.三个按钮其实一样，业务逻辑也一样，却重新写了一次，复用性低
2.解决：组件化编程
--><button v-on:click="add">点击次数={{count}}次</button><br><button v-on:click="add1">点击次数={{count1}}次</button><br><button v-on:click="add2">点击次数={{count2}}次</button>
</div><script>new Vue({el: "#app",data: {count: 10,count1: 10,count2: 10},methods: {add() {this.count ++;},add1() {this.count1 ++;},add2() {this.count2 ++;}}})
</script></body>
</html>

image-20240214200728031

2.实现方式二_全局组件方式
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter></div><script>//编写全局组件Vue.component("counter", {template: `<button v-on:click="add">点击次数={{count}}次</button>`,data() {return {count: 10 //每次创建一个组件，都会有一个新的count跟template绑定，而方法是共享的}},methods: {add() {this.count ++;}}})new Vue({//由于是全局组件，所以即使这里什么都不写，也是包含了组件el: "#app"})
</script></body>
</html>

image-20240214203227887

3.实现方式三_局部组件方式
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="app"><counter></counter><counter></counter><counter></counter><counter></counter>
</div><script>//编写局部组件let counter = {template: `<button v-on:click="add">点击次数={{count}}次</button>`,data() {return {count: 10 //每次创建一个组件，都会有一个新的count跟template绑定，而方法是共享的}},methods: {add() {this.count ++;}}}new Vue({//由于是局部组件，所以需要在这里引用才能使用el: "#app",components: {counter //这里是ES6新特性，这样这个属性的名字和变量名相同相当于counter: counter}})
</script></body>
</html>

image-20240214204242353

4.生命周期和监听函数（钩子函数）

1.基本介绍

image-20240215093859697

2.示意图

image-20240215095330815

简要介绍生命周期
  1. **beforeCreate：**初始化view
  2. **created：**初始化model中的data和methods（常用ajax请求）
  3. **beforeMount：**挂载之前，并没有渲染数据
  4. **mounted：**通过el挂载到view，实现数据渲染
  5. 循环监听数据池的变化，一旦发生改变执行下一步
  6. **beforeUpdate：**数据池更新，但是没有渲染到view
  7. **updated：**将数据池中的数据渲染到view
详细介绍生命周期（前六个重点）
  1. beforeCreate：这是最初的阶段，此时组件的 data 和 methods 都还未初始化。
  2. created：在这个阶段，组件的 data 和 methods 已经被初始化了。如果要对数据进行调用或修改（发出Ajax请求），这个阶段是合适的。但此时还没有开始渲染模板，$el 属性目前不可见。
  3. beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。此时，模板中的数据还没有被渲染到页面上。
  4. mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。在这一步，实例已经挂载，因此可以通过 DOM API 访问到页面上的 DOM 元素，数据已经可以显示在视图上了。
  5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，不会触发附加的重渲染过程。
  6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作，数据变化后更新视图。
  7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用，这意味着你可以在这个钩子中执行清理操作。
  8. destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
3.案例演示
1.需求分析

image-20240215101736510

2.代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="app"><span id="num">{{num}}</span><button @click="add">点赞！</button><h2>{{name}}有{{num}}次点赞</h2>
</div>
<script>let vm = new Vue({el: "#app",data: {name: "jack",num: 0},methods: {show() {return this.name;},add() {this.num ++;}},//只是初始化了viewbeforeCreate() {console.log("======beforeCreate======");console.log("数据模型/数据池的数据是否加载/使用？[no]",this.name, "", this.num)// console.log("自定义方法是否加载/使用？[no]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom是否被渲染？[no]",document.getElementById("num").innerText)},//初始化model中的data和methodscreated() {console.log("======created======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom是否被渲染？[no]",document.getElementById("num").innerText)//可以发出ajax请求//接受返回的数据//再次去更新data数据池中的数据//在后面挂载的时候渲染view},//挂载之前，并没有渲染viewbeforeMount() {console.log("======beforeMount======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom是否被渲染？[no]",document.getElementById("num").innerText)},//挂载阶段：通过el挂载到view，实现数据渲染mounted() {console.log("======mounted======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom是否被渲染？[yes]",document.getElementById("num").innerText)},//数据池更新，并保存这个状态，但是用户界面的dom数据不会被更新beforeUpdate() {console.log("======beforeUpdate======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom数据是否被更新？[no]",document.getElementById("num").innerText)},//渲染用户界面的dom，更新数据updated() {console.log("======updated======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom数据是否被更新？[yes]",document.getElementById("num").innerText)}})
</script></body>
</html>

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

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

相关文章

十大排序——11.十大排序的比较汇总及Java中自带的排序算法

十大排序——11.十大排序的比较汇总及Java中自带的排序算法

这篇文章对排序算法进行一个汇总比较&#xff01; 目录 0.十大排序汇总 0.1概述 0.2比较和非比较的区别 0.3基本术语 0.4排序算法的复杂度及稳定性 1.冒泡排序 算法简介 动图演示 代码演示 应用场景 算法分析 2.快速排序 算法简介 动图演示 代码演示 应用场景…
阅读更多...
2024年4月最新版GPT

2024年4月最新版GPT

2024年4月最新版ChatGPT/GPT4, 附上最新的使用教程。 随着人工智能技术的不断发展&#xff0c;ChatGPT和GPT4已经成为了人们日常生活中不可或缺的助手。2024年4月,OpenAI公司推出了最新版本的GPT4,带来了更加强大的功能和更加友好的用户体验。本文将为大家带来最新版GPT4的实用…
阅读更多...
Day91：API攻防-接口安全SOAPOpenAPIRESTful分类特征导入项目联动检测

Day91：API攻防-接口安全SOAPOpenAPIRESTful分类特征导入项目联动检测

目录 API分类特征-SOAP&OpenAPI&RESTful API分类特征 API常见漏洞 API检测流程 API检测项目-Postman&APIKit&XRAY 工具自动化-SOAP - WSDL Postman 联动burpxray APIKit插件(可联动xray) 工具自动化-OpenApi - Swagger Postman 联动burpxray APIKit…
阅读更多...
机器学习和深度学习--李宏毅（笔记与个人理解）Day17

机器学习和深度学习--李宏毅（笔记与个人理解）Day17

Day 17Convolutional Neyral Network (CNN) 卷积神经网络一般都用在image 上面比较多一些&#xff0c;所以课程的例子大多数也都是image Image Classification the same size how about for pc? 这里对于tensor 张量这个概念&#xff0c;我还是比较奇怪&#xff0c;在我认为一…
阅读更多...
JDK5.0新特性

JDK5.0新特性

目录 1、JDK5特性 1.1、静态导入 1.2 增强for循环 1.3 可变参数 1.4 自动装箱/拆箱 1.4.1 基本数据类型包装类 1.5 枚举类 1.6 泛型 1.6.1 泛型方法 1.6.2 泛型类 1.6.3 泛型接口 1.6.4 泛型通配符 1、JDK5特性 JDK5中新增了很多新的java特性&#xff0c;利用这些新…
阅读更多...
5.10 mybatis之useActualParamName作用

5.10 mybatis之useActualParamName作用

文章目录 1. useActualParamNamefalse1.1 单个参数映射1.2 多个数1.3 param注解 2. useActualParamNametrue useActualParamName官方解释&#xff1a;允许使用方法签名中的名称作为语句参数名称。 为了使用该特性&#xff0c;你的项目必须采用 Java 8 编译&#xff0c;并且加上…
阅读更多...
Linux内核之aligned用法实例(四十七)

Linux内核之aligned用法实例(四十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
【电控笔记2.5】位置闭环回路设计

【电控笔记2.5】位置闭环回路设计

位置控制器 加入前馈 总结
阅读更多...
KaiwuDB CTO 魏可伟：AIoT，用行业定义数据库

KaiwuDB CTO 魏可伟：AIoT，用行业定义数据库

4月12日&#xff0c;由中国 DBA 联盟&#xff08;ACDU&#xff09;与墨天轮社区联合主办的第十三届数据技术嘉年华&#xff08;DTC 2024&#xff09;于北京盛大召开。KaiwuDB CTO 魏可伟受邀发表《智创当下&#xff0c;KaiwuDB 从多模到 AI 的探索实践》主题演讲&#xff0c;向…
阅读更多...
看图找LOGO，基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建生活场景下的商品商标LOGO检测识别系统

看图找LOGO，基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建生活场景下的商品商标LOGO检测识别系统

日常生活中&#xff0c;我们会看到眼花缭乱的各种各样的产品logo&#xff0c;但是往往却未必能认全&#xff0c;正因为有这个想法&#xff0c;这里我花费了过去近两周的时间采集和构建了包含50种商品商标logo的数据集&#xff0c;基于YOLOv8全系列的参数模型开发构建了对应的检…
阅读更多...
2016NOIP普及组真题 1. 金币

2016NOIP普及组真题 1. 金币

线上OJ&#xff1a; 一本通&#xff1a;http://ybt.ssoier.cn:8088/problem_show.php?pid1969 核心思想&#xff1a; 解法1、由于数据量只有 10000 天&#xff0c;估可以采用 模拟每一天 的方式。 #include <bits/stdc.h> using namespace std;int k 0;int main() {i…
阅读更多...
地质灾害监测预警系统：科技守护，构筑智能预警屏障

地质灾害监测预警系统：科技守护，构筑智能预警屏障

随着全球气候变化和人为活动的加剧&#xff0c;地质灾害频繁发生&#xff0c;给人们的生命财产安全带来了严重威胁。为了降低地质灾害带来的损失&#xff0c;地质灾害监测预警系统应运而生。本文将为您详细介绍地质灾害监测预警系统的原理、功能以及在实际应用中的效果。 一、地…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023