vue3学习笔记 2023
vue文件
"组件"是一种封装的思想, 把相关业务逻辑的"js/css/html"都封装到一起, 当需要调用"组件"的时候, 只需要在html中期望的位置插入对应的"标签"即可, 比如封装了一个"switch"组件, 在html中我们只需要使用"switch"标签即可.
<switch v-model:checked="isOnline"/>
这里的v-model:checked是自定义的"双向数据绑定", 后面的课我们会讲解实现.
到这里大家一定很想知道这个组件是如何实现的, 看之前先了解一个新的文件格式.
vue文件
前面的课程都是基于一个html来写的, 但现在了解了组件封装, 就需要知道如何封装, 首先官方建议每一个组件的代码封装到一个"vue"文件中.
下面就是"switch"组件的代码, 其文件名为"switch.vue", 暂时不需要看懂代码, 本章最后一课会讲解, 暂只需要了解代码结构.
<template><spanclass="switch":class="checked && 'switch--checked'"@click="onChange"></span>
</template><script>
import { defineComponent } from "vue";
export default defineComponent({props:{checked:{type:Boolean,default:false}},methods:{onChange(){this.$emit('update:checked',!this.checked);}}
});
</script><style lang="scss" scoped>
.switch {position: relative;box-sizing: content-box;display: inline-block;height: 22px;width: 42px;border-radius: 24px;background-color: #adb5bd;transition: background-color 200ms;vertical-align: middle;cursor: pointer;&:after {content: "";display: block;position: absolute;top: 2px;left: 2px;width: 18px;height: 18px;transition: all 0.2s ease-in-out;background-color: #fff;border-radius: 9px;box-shadow: 0 2px 4px #00230b33;}&--checked {background-color: #42b883;&:after {transform: translate3d(20px, 0, 0);}}
}
</style>很明显可以看到3部分代码: "html/js/css", 不知道你有没有疑问:"vue文件浏览器能运行吗?" 答案是:"不能!"
vite编译器
vue官方提供的vue编译器, 使用非常简单, 其可以把vue代码转成"html/js/css", 这样我们的代码就能在浏览器运行了. 不论是开发阶段, 还是最终代码编译阶段, 他都是我们必须的工具. 下节课会讲开发前环境搭建, 届时会具体介绍vite的使用.
创建/运行项目
新vue项目
在IDEA新建一个vue项目
nodejs(运行环境)
vue的开发/编译工具(vite)是基于nodejs平台的, 所以第一步先安装nodejs,下载地址: Node.js, 安装LST(长期维护)版本即可.
npm
安装完毕后命令行会增加一个包管理工具: npm, 包管理可以理解为通过他可以下载js插件, 后续我们开发用到的JS插件都通过他安装. 查看下版本:
C:\Users\qiye>npm -v
9.3.1C:\Users\qiye>node -v
v18.14.0vue3
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
See Configuration Reference.因为npm下载插件的默认源是国外服务器, 为了加速改成国内的, 在命令行输入:
设置npm安装源npm config set registry https://registry.npmmirror.com比如安装"axios"(接口请求用的js插件, 后面会用到), 就可以执行:
安装axios
npm i axios -S这里的-S的意思是保存"安装记录", 这样其他人使用你的项目的时候, 可以直接通过npm i安装所有你安装的包. 安装好的插件会存在于项目根下的"node_modules"文件夹.package.json
"安装记录"保存在项目根目录下的"package.json"中, 其内容是一个JSON, 其中安装记录就保存在"dependencies"字段中.
准备工作到这里就差不多了, 接下来我们初始化项目.
⭐import
特别需要注意, 从现在开始我们使用js插件不再通过"script"标签, 而是使用import语法, 比如需要引入"axios"插件, 只需要在js代码的头部导入:
import axios from 'axios'第一个"axios"表示你要是用的axios对象, "from"后面的"axios"是插件的名字, 也就是前面你"npm i" 安装时候的名.
导语 这篇分享是关于Vue3 系列的学习知识的整理的开始,能够对大家学习带来帮助.也是对自己能力的一种提升. 学习大纲 认识NPM 安装NPM 使用NPM NPM中级用法 了解package.js ... 声明:转载于掘金的文章,原文地址:https://juejin.cn/post/7005140118960865317/,本文只是自用. 一.简介 2020年9月18日,Vue.js发布3.0版本,代 ... 目录 简介 一.创建项目 1.使用vue-clli创建 2.使用Vite创建 二.Composition API(组合式API) 1.setup函数 2.ref函数和reactive函数 1.ref函 ... 一.前言 对抗性权值扰动改善图神经网络的泛化性能.2022 ICLR Reject,2023 AAAI Accept. 论文地址:Adversarial Weight Perturbation Imp ... Vue3是一个流行的JavaScript框架,它允许您构建交互式的Web应用程序.Vue3中使用的状态管理工具是Vuex,但是有一种新的状态管理工具叫做Pinia,它提供了更简单.更轻量级的状态管理方 ... 目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ... 目录 1. Teleport 传送组件 1.1 为什么要使用 Teleport 1.2 如何使用 Teleport 1.3 Teleport 源码 2. keep-alive 缓存组件 2.1 为什么 ... 一.Composition API优势 相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Api 功能分组 Compositi ... 文章目录 一.使用淘宝NPM镜像 (一)为何使用淘宝镜像 (二)安装淘宝NPM镜像 (三)查看淘宝NPM镜像版本 二.使用CNPM安装Vue最新稳定版 (一)安装Vue最新稳定版 (二)查看Vue命令 ...vue3学习笔记 2023相关推荐
最新文章
热门文章