前端知识学习笔记-六(vue)

简介
Vue是前端优秀框架是一套用于构建用户界面的渐进式框架

Vue优点

Vue是目前前端最火的框架之一
Vue是目前企业技术栈中要求的知识点
vue可以提升开发体验
Vue学习难度较低

Vue开发前准备
一、nodejs环境

Nodejs简介
Nodejs诞生于2009年,主攻服务器方向,使得利用JavaScrit 也可以完成服务器代码的编写

Nodejs安装

Nodejs官网 :https://nodejs.org/en/

Nodeis的安装与一般软件一样
检查是否安装成功命令:node -v 出现版本号表示安装成功

在安装 Nodeis 的同时,会附带一个pm 命令npm 是Node的包管理工具,这样正是接下来我们要用到的npm 的简单结构有助于 Node.js 生态系统的激增,现在 npm 仓库托管了超过 1,000,000 个可以自由使用的开源库包。
npm 镜像:
由于服务器在国外,所以下载速度比较慢,我们可以用国内的镜像

阿里镜像地址
https://npmmirror.com/

在命令行运行如下命令即可!(cnpm安装)

npm install -g cnpm --registry=https://registry.npmmirror.com

出现以下表示安装成功,也可通过命令查看是否安装成功:cnpm -v 显示版本号表示安装成功

在这里插入图片描述
若安装失败可以再次安装

二、安装Vue工具 vue cli
Vue cli Vue.js 开发的标准工具,vue cli 是一个基于 Vue,js 进行快速开发的完整系统

安装命令:npm install -g @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 e ,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

命令:vue --version

vue官网:https://vuejs.org/

创建一个项目
运行以下命令来创建一个新项目

vue create vue-demo

温馨提示
在控制台中,可以用上下按键调整选择项
在控制台中,可以用空格(spacebar)选择是否选中和取消选中

可以选择默认项目模板,或者选“手动选择特性”来选取需要的特性,选择第三个。
在这里插入图片描述

我们选择 Babel和 Progressive Web App (PWA) Support 两个选项即可(空格键可以取消或选中)
在这里插入图片描述
温馨提示
在学习期间,不要选中 Linter /Formater 以避免不必要的错误提示

vue目前有两个主流大版本vue2和vue3,以下选择 vue3 最新版本为例
在这里插入图片描述
配置放在哪里? in dedicated contg files 专用配置文件或者 in package.json 在package,json文件(默认即可)
在这里插入图片描述
将其保存为未来项目的预置?y代表保存,并添加名字,n 不保存(选 n)
在这里插入图片描述
运行项目

第一步:进入项目根目录 cd vue-demo
第二步:运行 npm run serve 启动项目

安装Vue高亮插件
VSCode中安装 vetur 或者 voler 都可,前者针对Vue2版本,后者针对Vue3版本

vue主要模块
重点关注src文件夹:
assets 主要存放静态资源(公共css、图片)
components
App.vue
main.js
** vue模板语法**
一、文本
数据绑定最常见的形式就是使用“Mustache”(双大括号)语法的文本插值

<template><div class="login-content"><h1>登录</h1><p>{{message}}</p></div>
</template>

一般配合js 中的 data() 设置数据

<script>
export default {name: 'login',data(){return {message: 'Welcome',}}
}
</script>

原始 HTML
双大括号会将数据解释为普通文本而非 HTML代码。为了输出真正的 HTML,,你需要使用 v-html指令

<template><div class="login-content"><h1>登录</h1><div>{{rawhtml}}</div><div v-html="rawhtml"></div></div>
</template>
<script>
export default {name: 'login',data(){return {rawhtml:"<a href=https://baidu.com>百度</a>",}}
}
</script>

属性 Attribute
Mustache 语法不能在 HTML 属性中使用,然而,可以使用 v-bind 指令

<template><div v-bind:id="dynamicId"></div>
</template>
<script>data(){return{dynamicId:1001}}
<script>

温馨提示
v-bind: 可以简写成 :

<div :id="dynamicId"></div>

使用JavaScript 表达式
在我们的横板中,我们一直都只绑定简单的 property 键值,Vue.js 都提供了完全的JavaScript 表达式支持

<template><div class="login-content"><h1>登录</h1><P>{{num+5}}</P><p>{{flag ? '成功' : '失败'}}</p></div>
</template><script>
export default {name: 'login',data(){return {num:10,flag:false,}}
}</script>

这些表达式会在当前活动实例的数据作用域下作为JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

二、条件渲染
v-if
v-if: 指令用于条件性地染一块内容。这块内容只会在指令的表达式返回 tru 值的时候被渲染

<template><div class="login-content"><h1>登录</h1><p v-if="f">加油加油!</p></div>
</template>
<script>
export default {name: 'login',data(){return {f:true}}
}
</script>

v-else:
你可以使用 v-else 指令来表示 vif 的“else 块”

<template><div class="login-content"><h1>登录</h1><p v-if="f">启动</p><p v-else>关闭</p></div>
</template>
<script>
export default {name: 'login',data(){return {f:false}}
}
</script>

v-show指令
另一个用于条件性展示元素的选项是 v-show 指令

<template><div class="login-content"><p v-show="f">yes</p><p v-show="fe">no</p></div>
</template>
<script>
export default {name: 'login',data(){return {f:false,fe:true,}}
}
</script>

v-if vs v-show 的区别
v- if是“真正”的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和重建
v-if 也是惰性的:如果在初始染时条件为假,则什么也不做一一直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多一-不管初始条件是什么,元素总是会被染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好
三、列表渲染
v-for指令
v-for 指令基于一个数组来染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中items 是源数据数组,而 item 则是被选代的数组元素的别名。

<template><div class="login-content"><h1>列表</h1><ul><li v-for="item in items">{{item.message}}</li></ul></div>
</template>
<script>
export default {name: 'login',data(){return {items: [{message: 'hello'},{message: 'world'},{message: 'vue'},{message: 'react'},{message: 'angular'}]}}
}
</script>

维护状态
当 Vue 正在更新使用v-for 染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的 key attribute:

<template><div class="login-content"><h1>列表</h1><ul><li v-for="item in items"::key="item.id">{{item.message}}</li></ul></div>
</template>
<script>
export default {name: 'login',data(){return {items: [{id:1001,message: 'hello'},{id:1002,message: 'world'},{id:1003,message: 'vue'},{id:1004,message: 'react'},{id:1005,message: 'angular'}]}}
}
</script>

四、 事件处理
监听事件
我们可以使用 v-on 指令(通常缩写为 @ 符号)来监听 DOM 事件,并在触发事件时执行一些Javacript。用法为 v-on:click_"methodName”或使用快捷方式 @click-“methodName”

<template><div class="login-content"><h1>列表</h1><button v-on:click="count += 1">按钮:{{count}}</button><button @click="counter += 1">点击:{{counter}}</button></div>
</template>
<script>
export default {name: 'login',data(){return {count:0,counter:1}}
}
</script>

事件处理方法
然而许多事件处理逻辑会更为复杂,所以直接把JavaScript代码写在v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<template><div class="login-content"><h1>列表</h1><button v-on:click="count += 1">按钮:{{count}}</button><button @click="clickHanld">点击</button></div>
</template>
<script>
export default {name: 'login',data(){return {count:0,}},methods: {clickHanld(){alert('点击了按钮')}}
}
</script>

五、表单输入绑定
你可以用 v-model 指令在表单 input textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。

<template><div ><input type="text" v-model="data.username"><p>{{ data.username }}</p></div>
</template>
<script>
// @ is an alias to /src
import {reactive} from "vue"export default {name: 'home',setup() {const data = reactive({username:"",})return {data}}
}
</script>

修饰符
.lazy
在默认情况下,v-mode 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加lazy 修饰符,从而转为在 change 事件之后进行同步

<input v-model.lazy="message"/>
<p>Message is:{{ message }}</p>
//在输入失去焦点时才获取到数据
data() {return {message: ""}}

.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符

<input v-model.lazy.trim="message"/>
<p>Message is:{{ message }}</p>
data() {return {message: ""}}

六、组件基础
单文件组件
逻辑Vue 单文件组件(又名.vue 文件,缩写为 SFC)是一种特殊的文件格式,它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中
1.编写组件:

<template><h3>我是单文件组件</h3>
</template><script>
// @ is an alias to /src
import {reactive} from "vue"export default {name:"MyComponents",
}
</script>

2.加载组件
加载组件
第一步:引入组件 import MyComponentVue from"Jcomponents/MyComponent.vue’
第二步:挂载组件 components:{ MyComponentVue }
第三步:显示组件 <my-componentVue/>

七、组件生命周期
每个组件在被创建时都要经过一系列的初始化过程一一例如,需要设置数据监听、编译模板、将实例挂载到DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

为了方便记忆,我们可以将他们分类
创建时: beforeCreate 、created (组件准备创建)
渲染时:beforeMount mounted(组件已创建)
更新时:beforeupdate .updated
卸载时:beforeunmount .unmounted

vue3
vue3 生命周期
beforeCreate ->使用setup0created ->使用 setup0
beforeMount -> onBeforeMountmounted -> onMounted
beforeUpdate -> onBefoUpdate
updated ->onUpdated 数据更改会死循环-区分updated 和beforeUpdate
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

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

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

相关文章

Spring Message

EnableJms注解 @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Import(JmsBootstrapConfiguration.class) public @interface EnableJms { } @Import(JmsBootstrapConfiguration.class) @Configuration @Role(BeanDefinition.ROLE_INFRASTRUC…

数据结构OJ题——栈和队列

1. 用栈实现队列&#xff08;OJ链接&#xff09; 题目描述&#xff1a;请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09; void push(int x) 将元素 x 推到队列的末尾 int pop() 从队列的开头移除并返回…

Gateway 基本配置指南:构建高效的网络接入网关

简介&#xff1a; Gateway 是一个常用的网络接入网关&#xff0c;它可以帮助组织实现安全、可靠和高性能的网络连接。本文将介绍 Gateway 的基本配置&#xff0c;帮助读者了解如何正确配置和部署一个高效的 Gateway 网关。 1.网络拓扑规划&#xff1a; 在配置 Gateway 前&#…

锂电池寿命预测 | Matlab基于BiLSTM双向长短期记忆神经网络的锂电池寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 锂电池寿命预测 | Matlab基于BiLSTM双向长短期记忆神经网络的锂电池寿命预测 程序设计 完整程序和数据获取方式&#xff1a;私信博主回复Matlab基于BiLSTM双向长短期记忆神经网络的锂电池寿命预测。 参考资料 [1] h…

Java/Android 汉字转拼音

Java 汉字转拼音 1.TinyPinyin 功能&#xff1a; 适用于Java和Android的快速、低内存占用的汉字转拼音库。 特性&#xff1a; 生成的拼音不包含声调&#xff0c;均为大写&#xff1b;支持自定义词典&#xff0c;支持简体中文、繁体中文&#xff1b;执行效率很高(Pinyin4J的…

Nginx配置大全【六大使用场景、七大负载均衡策略、四大负载健康检查】

目录 基础配置信息应用场景一&#xff1a;配置web服务器应用场景二&#xff1a;反向代理服务器应用场景三&#xff1a;URL重定向应用场景四&#xff1a;防盗链应用场景五&#xff1a;根据设备类型重定向/代理/访问 不同域名/资源应用场景六&#xff1a;&#xff01;负载均衡服务…

Python数据分析案例42——基于Attention-BiGRU的时间序列数据预测

承接上一篇的学术缝合&#xff0c;排列组合模型&#xff0c;本次继续缝合模型演示。 Python数据分析案例41——基于CNN-BiLSTM的沪深300收盘价预测-CSDN博客 案例背景 虽然我自己基于各种循环神经网络做时间序列的预测已经做烂了.....但是还是会有很多刚读研究生或者是别的领…

最新版守约者二级域名分发系统

主要功能 二级域名管理&#xff1a; 我们的系统提供全面的二级域名管理服务&#xff0c;让您轻松管理和配置二级域名。 域名分发&#xff1a;利用我们先进的域名分发技术&#xff0c;您可以自动化地分配和管理域名&#xff0c;确保每个用户或客户都能及时获得所需的域名资源。…

leetcode热题HOT 51. N 皇后

一、问题描述&#xff1a; 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问…

python——字典(dict)

概念 字典里面的数据是以键值对形式出现&#xff0c;字典数据和数据顺序没有关系。 语法 数据为键值对形式出现&#xff0c;各个键值对之间用逗号隔开 d dict() d1 {"name":"zhanghao","age":12}方法 #mermaid-svg-nk6Q3uUsDPRNAJ0s {font…

SpringBoot基于RabbitMQ实现消息延迟队列方案

知识小科普 在此之前&#xff0c;简单说明下基于RabbitMQ实现延时队列的相关知识及说明下延时队列的使用场景。 延时队列使用场景 在很多的业务场景中&#xff0c;延时队列可以实现很多功能&#xff0c;此类业务中&#xff0c;一般上是非实时的&#xff0c;需要延迟处理的&a…

ipsec的特点和优点

IPsec&#xff08;Internet Protocol Security&#xff09;是一种用于保护 IP 网络通信安全的协议套件&#xff0c;它具有许多特点和优点&#xff0c;包括&#xff1a; 加密通信&#xff1a; IPsec 提供了对 IP 数据包的加密功能&#xff0c;可以确保数据在传输过程中是加密的…

Opencv | Opencv 基于图像的运算

目录 一. OpenCV 基于图像的运算1 cv.item( ) 获取图像某个位置的像素值2. cv. itemset( ) 修改图像某个位置的像素值3. cv.split( ) / cv.merge( ) 通道的分割与合并4. cv.copyMakeBorder ( ) 添加边框5. cv.addWeighted ( ) 图像融合 / 权重和6. cv.threshold 二值化操作7. c…

webpack详解

前端对于打包工具webpack的使用 首先是针对于版本的变化3-4 4的话node版本的底版不再支持,尽量下载14.0以后的版本,做到更好的兼容 配置方面增加了mode:production/development/none想要指定在不同的mode下开启默认的优化手段 loader和plugin的不同 1.loader能让webpack…

高防IP的优势和挑战

高防IP&#xff08;防御性网络IP&#xff09;是一种具有强大防御能力的网络服务&#xff0c;在面对网络攻击时能够保护系统免受攻击的影响。以下是高防IP的优势和挑战的例子&#xff1a; 优势&#xff1a; 强大的防御能力&#xff1a;高防IP能够识别和过滤掉各种类型的网络攻击…

【深入探讨】JavaScript 中的 forEach 和 map 区别

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端Clodplay &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域优质作者、阿里云专家博主&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨优质专栏&#xff1a;VS Code插件开…

房贷还款(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h> # include <math.h>int main() {//初始化变量值&#xff1b;double m, r 0.01;float d 300000;float p 6000;//运算还款所需月份&#xff1b;m log10…

元象4.2B参数 MoE大模型实战

01 简介 近期&#xff0c;元象公司推出了其首个Moe大模型XVERSE-MoE-A4.2B。该模型采用了混合专家模型架构&#xff08;Mixture of Experts&#xff09;&#xff0c;并拥有4.2B的激活参数&#xff0c;其性能可与13B模型相媲美。值得一提的是&#xff0c;这个模型是完全开源的&…

Python 实战人工智能数学基础:图像处理应用

1.背景介绍 在许多计算机视觉任务中&#xff0c;图像处理占据了很重要的角色&#xff0c;尤其是在目标检测、特征提取、分类、跟踪等计算机视觉任务中。图像处理是一个复杂的过程&#xff0c;涉及到图像的采集、分析、存储、显示等环节。本文将讨论基于Python实现的图像处理的…

spring快速搭建聊天AI

官网url: https://spring.io/projects/spring-ai 本文演示的是open AI 1创建java项目 2.拿到AI的key&#xff08;没有的话可以去淘宝花几块钱买一个&#xff09; //YOUR_API_KEY写你自己的open AI的key spring.ai.openai.api-keyYOUR_API_KEY spring.ai.openai.chat.options.…