Vue入门-特性、常用指令、生命周期、组件

Vue

vue简介

​ Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。 [7]

Vue特征

  1. 解耦视图与数据
  2. M-V-VM模型 关注模型和视图
    • M：即Model，模型，包括数据和一些基本操作
    • V：即View，视图，页面渲染结果
    • VM：即View-Model，模型和视图间的双向
  3. 双向数据绑定

在这里插入图片描述

Vue入门

1、使用方式

  • vue 是一个前端框架，也是其实是一个js文件，下载vue.js文件并在页面中引入

2、vue.js 的下载方式

  • 可以引入在线的vue.js(公共的CDN服务)
<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
  • 可以离线下载vue.js
    • 网址:https://unpkg.com/vue@3.2.45/dist/vue.global.js
  • npm包资源管理器，可以下载vue.js
初始化：npm init -y安装vue：npm install vue --save注意：重启计算机

3、第一个vue案例

  • 基本格式v-***：其实就是将JS中操作DOM的各种属性或语法，封装成对应的v-XXX，直接使用v-XXX就能达到操作DOM的效果。指令直接当成标签的属性来使用
<!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><script src="js/vue.global.js"></script>
</head>
<body><div id="app">{{id}}<br>{{name}}</div><script>const vueApp = Vue.createApp({data(){return {id:1,name:"chenwei"}}});vueApp.mount("#app");</script>
</body>
</html>

(1) v-text 和 v-html

  • v-text：相当于JS中的innerText
  • v-html：相当于JS中的innerHTML
<!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>test03</title><script src="js/vue.global.js"></script>
</head>
<body><div id="app"><p v-text="t"></p><p v-html="h"></p></div><script>const vueApp = Vue.createApp({data(){return {t:"天气针不错!",h:"<h1>长路漫漫</h1>"}}});vueApp.mount("#app");</script>
</body>
</html>

(2) v-if、v-else 和 v-show

  • v-if、v-else：相当于JS中的if(){}else{}语法
  • v-show：相当于JS中的if(){}语法
<!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>test03</title><script src="js/vue.global.js"></script>
</head>
<body><div id="app"><p v-if="flag">这是 真</p><p v-else="flag">这是 假</p><p v-show="flag">这是 真假</p></div><script>const vueApp = Vue.createApp({data(){return {flag:false}}});vueApp.mount("#app");</script>
</body>
</html>

(3) v-on

  • v-on：相当于JS中的事件on:XXX
  • 语法：v-on:事件名=”methods中定义的函数名”
  • 简写：@事件名=”methods中定义的函数名”
<!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>test03</title><script src="js/vue.global.js"></script>
</head>
<body><div id="app">{{count}}<input type="button" value="测试1" v-on:click="f1()"><input type="button" value="测试2" @click="f2('测试个屁')"><input type="button" value="测试3" @click="f3()"></div><script>const vueApp = Vue.createApp({data(){count:1}},methods:{f1:function(){alert("测试1");},f2(b){alert(b);},f3(){this.count ++;}}});vueApp.mount("#app");</script>
</body>
</html>

(4) v-for

  • v-for：相当于JS中的for循环语法
  • 语法：v-for=”(item,index) in 被循环的内容”。item是循环出来的内容，index是索引
<!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>test03</title><script src="js/vue.global.js"></script>
</head>
<body><div id="app"><table><thead><tr><th>学号</th><th>名字</th></tr></thead><tbody><tr v-for="(student,index) in students"><td>{{student.id}}</td><td>{{student.name}}</td></tr></tbody></table></div><script>const vueApp = Vue.createApp({data(){return {students:[{"id":1,"name":"tom"},{"id":2,"name":"jack"},{"id":3,"name":"rosy"}]}} });vueApp.mount("#app");</script>
</body>
</html>

(5) v-bind

  • v-bind：设置HTML属性的值
  • 语法：v-bind:属性名=”值”
  • 简写：:属性名=”值”
<!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>test03</title><script src="js/vue.global.js"></script>
</head>
<body><div id="app"><a v-bind:href="url">跳转</a><br><a :href="url">跳转</a></div><script>const vueApp = Vue.createApp({data(){return {url:"https://www.baidu.com/"}}});vueApp.mount("#app");</script>
</body>
</html>

(6) v-model

  • v-model：输入域的值，相当于JS中的value属性（双向绑定）
<!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>test03</title><script src="js/vue.global.js"></script>
</head>
<body><div id="app">{{username}}<input type="text" v-model="username"></div><script>const vueApp = Vue.createApp({data(){return {username:"lfg"}}});vueApp.mount("#app");</script>
</body>
</html>

Vue生命周期

​ 每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

在这里插入图片描述

生命周期测试

<!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><script src="js/vue.global.js"></script>
</head>
<body><div id="app">{{message}}<input type="button" value="测试" @click="show()"></div><script>const vueApp = Vue.createApp({data:function(){return {message:"hello world"}},methods:{show:function(){this.message = "你脑子what啦"}},beforeCreate:function(){console.log("Vue对象创建前");},created:function(){console.log("Vue对象创建后");},beforeMount(){console.log("数据渲染前");},mounted(){console.log("数据渲染后");},beforeUpdate(){console.log("数据更新前");},updated(){console.log("数据更新后");},beforeUnmount(){console.log("销毁前");},unmounted(){console.log("销毁后");}});vueApp.mount("#app");</script>
</body>
</html>

Vue组件

  • 通俗来说，就是自定义具有特殊效果的标签。而且一旦定义，可以多次使用。

1、全局组件

<!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><script src="js/vue.global.js"></script>
</head>
<body><div id="app">{{message}}<test></test><test></test><test></test><test></test></div><script>const vueApp = Vue.createApp({data:function(){return {message:"hello World"}}});vueApp.component("test",{template:`<div>{{count}}<input type="button" value="测试" @click="f1()"></div>`,data:function(){return {count:0}},methods:{f1:function(){this.count++}}});vueApp.mount("#app");</script>
</body>
</html>

2、局部组件

<!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><script src="js/vue.global.js"></script>
</head>
<body><div id="app">{{message}}<test></test><test></test></div><script>let demo = {template:`<div>{{count}}<input type="button" value="测试" @click="f1()"></div>`,data:function(){return {count:0}},methods:{f1:function(){this.count++}}};const vueApp = Vue.createApp({data:function(){return {message:"hello World"}},components:{"test":demo}});vueApp.mount("#app");</script>
</body>
</html>

}},methods:{f1:function(){this.count++}}};const vueApp = Vue.createApp({data:function(){return {message:"hello World"}},components:{"test":demo}});vueApp.mount("#app");
</script>
```

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

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

相关文章

深度学习入门-3-计算机视觉-图像分类

深度学习入门-3-计算机视觉-图像分类

1.概述 图像分类是根据图像的语义信息对不同类别图像进行区分&#xff0c;是计算机视觉的核心&#xff0c;是物体检测、图像分割、物体跟踪、行为分析、人脸识别等其他高层次视觉任务的基础。图像分类在许多领域都有着广泛的应用&#xff0c;如&#xff1a;安防领域的人脸识别…
阅读更多...
什么是室温超导？室温超导意味着什么？

什么是室温超导？室温超导意味着什么？

前言&#xff1a; 7月22日&#xff0c;韩国一个科学团队发布论文声称“实现了室温超导”&#xff0c;引发了全球关注&#xff0c;全球很多科学实验室都开始着手按照论文来进行实验&#xff0c;尝试验证论文的真实性&#xff0c;因为如果真的可以实现室温超导&#xff0c;那么影…
阅读更多...
SIP网络音频模块SV-2401V网络对讲音频模块（支持POE）

SIP网络音频模块SV-2401V网络对讲音频模块（支持POE）

功能和特点 音频工作方式&#xff1a; 音频解码&#xff1a;即音频播放。接收来自网络的音频流&#xff0c;经过模块解码后通过线路输出高质量音频信号。目前支持可以播放以下音频格式&#xff1a;MP3、WAV (PCM IMA ADPCM)、G.711、G.722等&#xff0c;可以播放最高48k采样率…
阅读更多...
ES：一次分片设计问题导致的故障

ES：一次分片设计问题导致的故障

### 现象&#xff1a; 1. 单节点CPU持续高 2.写入骤降 3.线程池队列积压&#xff0c;但没有reject 4.使用方没有记录日志 ### 排查 1.ES监控 只能看到相应的结果指标&#xff0c;无法反应出原因。 2.ES日志&#xff1a;大量日志打印相关异常&#xff08;routate等调用栈&a…
阅读更多...
岩土工程安全监测隧道中使用振弦采集仪注意要点？

岩土工程安全监测隧道中使用振弦采集仪注意要点？

岩土工程安全监测隧道中使用振弦采集仪注意要点&#xff1f; 岩土工程的安全监测是非常重要的&#xff0c;它可以帮助工程师及时发现可能存在的问题&#xff0c;并及时解决&#xff0c;保障施工进度以及施工质量&#xff0c;保障工程的安全运行。其中&#xff0c;振弦采集仪是…
阅读更多...
毫米波雷达成像论文阅读笔记： IEEE TPAMI 2023 | CoIR: Compressive Implicit Radar

毫米波雷达成像论文阅读笔记： IEEE TPAMI 2023 | CoIR: Compressive Implicit Radar

原始笔记链接&#xff1a;https://mp.weixin.qq.com/s?__bizMzg4MjgxMjgyMg&mid2247486680&idx1&snedf41d4f95395d7294bc958ea68d3a68&chksmcf51be21f826373790bc6d79bcea6eb2cb3d09bb1860bba0af0fd5e60c448ca006976503e460#rd ↑ \uparrow ↑点击上述链接即…
阅读更多...
CNN卷积详解（三）

CNN卷积详解（三）

一、卷积层的计算 4 ∗ * ∗ 4的输入矩阵 I I I 和 3 ∗ * ∗ 3 的卷积核 K K K: 在步长&#xff08;stride&#xff09;为 1 时&#xff0c;输出的大小为 ( 4 − 3 1 ) ( 4 − 3 1) 计算公式&#xff1a; ● 输入图片矩阵 I I I 大小&#xff1a; w w w w ww ●…
阅读更多...
CSS自学框架之动画

CSS自学框架之动画

这一节&#xff0c;自学CSS动画。主要学习了淡入淡出、淡入缩放、缩放、移动、旋转动画效果。先看一下成果。 优雅的过渡动画&#xff0c;为你的页面添加另一份趣味&#xff01; 在你的选择器里插入 animation 属性&#xff0c;并添加框架内置的 keyframes 即可实现&#xff0…
阅读更多...
在ubuntu+cpolar+rabbitMQ环境下，实现mq服务端远程访问

在ubuntu+cpolar+rabbitMQ环境下，实现mq服务端远程访问

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…
阅读更多...
8.4.tensorRT高级(3)封装系列-infer推理封装，输入输出tensor的关联

8.4.tensorRT高级(3)封装系列-infer推理封装，输入输出tensor的关联

目录 前言1. infer封装总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 tensorRT 高级-infer推理封装&#xff0c;输入输出…
阅读更多...
【LeetCode】剑指 Offer Ⅱ 第4章：链表（9道题） -- Java Version

【LeetCode】剑指 Offer Ⅱ 第4章：链表（9道题） -- Java Version

题库链接&#xff1a;https://leetcode.cn/problem-list/e8X3pBZi/ 类型题目解决方案双指针剑指 Offer II 021. 删除链表的倒数第 N 个结点双指针 哨兵 ⭐剑指 Offer II 022. 链表中环的入口节点&#xff08;环形链表&#xff09;双指针&#xff1a;二次相遇 ⭐剑指 Offer I…
阅读更多...
基于 Debian 12 的MX Linux 23 正式发布！

基于 Debian 12 的MX Linux 23 正式发布！

导读MX Linux 是基于 Debian 稳定分支的面向桌面的 Linux 发行&#xff0c;它是 antiX 及早先的 MEPIS Linux 社区合作的产物。它采用 Xfce 作为默认桌面环境&#xff0c;是一份中量级操作系统&#xff0c;并被设计为优雅而高效的桌面与如下特性的结合&#xff1a;配置简单、高…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023