vue.js知识收集

发表于 2024/07/18 更新于 2024/10/18

作者 缇欧&咪西

9 分钟阅读

预热の背景知识：

Vue框架背后的故事_vue框架创始人-CSDN博客

使用工具&预配置：

安装Node.js：注意下载长期稳定版（防止用最新版后出现奇怪bug；以及据说node版本过高的话，很多老组件（？）会不兼容从而运行不了）
安装vue.js：可使用npm或yarn等方式

安装的vue cli没玩明白——因为没用vue cli的可视用户界面调试过。

手动创建工程：可以手动指定需要用到的库（点击空格，not点击回车！）
开始编写你的vue工程~

基础使用步骤（个人傻瓜版）：

1. 普通vue组件：

在/components中写好你的组件，包括：
- <template>部分：HTML代码（模版）；
- <script>部分：JavaScript脚本；
- <style>部分：Css代码，控制组件布局样式；
在页面组件中，可以新编写代码&调用子组件；
最后，在根组件中进行组件注册&测试效果（本人比较傻，都是在根组件中一个个注册测试的_(:з」∠)_求放过）

2. `vue router`：

配置index.js，设置页面跳转规则

对相似的不同子页面，可通过配置路由参数来区分（这样就不用重复注册了）

如：

  
<router-link :to="{ name: 'JobDetails', params: { id: job.id } }"></router-link>
...

  


return {
	jobs {
		{ title: 'Job1', id: 1, details: '...' }, 
		{ title: 'Job2', id: 2, details: '...' },
	}
}

在子组件的<script>块中加入新参数：

  


export default {
	props: ['id'], 
	data() {
		return {
			id: this.$route.params.id
		}
	}
}

在router/index.js的注册组件（？）中加入props参数项：

  


...
{
	path: '/jobs/:id', 	// path设置为'/'为默认url路径，'jobs/:id'则是在默认url后添加的参数
	name: '...', 
	component: JobDetails, 
	props: true
}, 
...

3. `axios`库（学习中）：

https://blog.csdn.net/weixin_44844572/article/details/121916060

登录注册：

代码示例：

  


import axios from 'axios';
  
// let: 声明块级作用域变量
let formData = new FormData();
formData.append("name", "张三");
formData.append("age", 155);
  
axios.post('/api/upload', formData)
  .then(response => {
    console.log('Success:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

用户——>网页——>服务器：发送表单信息
1. 创建一个用于存储表单数据的FormData对象，用于向服务器发送表单数据。
2. 向FormData添加数据： FormData.append("字段名称", "字段值")
3. 通过ajax请求发送表单数据。

基本概念解释：

主要文件名：

index.html：页面总入口，挂载根组件App.vue
components 文件夹：项目的公共组件，就是一些整个项目都有可能用到的组件，如一些公用的弹窗、输入框、按钮等
main.js：项目入口文件，运行yarn serve时首先运行的文件，用于创建vue实例

根组件`App.vue`：

`createApp()`是个啥？

浅析vue的createApp方法原创

const app = createApp(App);

创建一个应用实例。
传递给该方法的组件为根组件

`.mount()`又是啥？

app.mount("#app")

将createApp()创建的应用实例挂载到DOM元素上。
初始化模板编译
启动响应式系统：实时更新网页/DOM

为什么`App.vue`中要对组件进行注册，而不能像html等一样，写完在浏览器中“开箱即用”呢？？

先了解vue中的组件是什么：组件基础

组件注册：

在 Vue.js 中，“注册”指的是将组件、指令、过滤器或其他功能模块引入到 Vue 实例中，使其可以在应用的模板中使用。之所以称为“注册”，是因为这个过程类似于在一个中央注册表中登记，使 Vue 知道它们的存在并可以在适当的地方使用它们。

单个项目下实现多页面跳转——`vue router`

vue项目为一个单页应用，要实现多页面网站应使用vue router。

原理：并非向服务器发送新请求，而是变化当前页面上显示的组件——因此运行更快速。

发送http请求——`axios`库

编写网页登录注册时绕不过的一个库。

（更高端的还有用pinia实现用户登录token验证等……）

一些教程链接：

最新教程看vue3官网；但vue2官方文档中的很多东西比vue3文档解释的更加详细易懂，不失作为学习上的参考。

vue语法——2/3同样

Vue JS 3 Tutorial for Beginners #2

vue3js.cn

Vue3 教程 | 菜鸟教程 (runoob.com)

表单输入绑定：`v-model`

https://cn.vuejs.org/guide/essentials/forms.html

vue3+elementplus后台管理系统，实现用户登录

vue3中实现明暗主题切换

vue3通过css对按钮替换主题颜色原创

论坛中利用js循环，输出所有帖子

帖子信息数组books
HTML：

<ul>
	<li v-for="item in books">
		<h3></h3>
		<p></p>
	</li>
</ul>

vue项目代码风格

单独测试组件

失败方案：

将你的组件代码放在vue CLI项目下的 src/components 目录下。
修改src/App.vue：引入&渲染新组件
yarn serve或npm run serve

改进方案：在App.vue中导入&注册新组件，然后在模版中使用

组件注册

  


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <MyComponent msg="This is my custom component!"/>
  </div>
</template>
   
<script>
import HelloWorld from './components/HelloWorld.vue';
import MyComponent from './components/MyComponent.vue';
   
export default {
  name: 'App',
  components: {
    HelloWorld,
    MyComponent
  }
}
</script>
   
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
   

小知识：

相对路径

相对当前文件的位置来引用其他文件。使用 . 表示当前目录，.. 表示上一级目录。

各种报错：

yarn下载失败

yarn指令

组件命名要multi-words

https://stackoverflow.com/questions/71205264/component-name-temp-should-always-be-multi-word-vue-multi-word-component-names

vue-language-server : Elements in iteration expect to have ‘v-bind:key’ directives

vue报错：’XX’ is defined but never used no-unused-vars

实例实战

（俺也没细看，只是mark一下先）

输入文本（`v-model`双向绑定）

单行文本（如用户名、密码输入）

多行文本（如用户评论编辑）

本文由作者按照 CC BY 4.0 进行授权

预热の背景知识：

使用工具&预配置：

基础使用步骤（个人傻瓜版）：

1. 普通vue组件：

2. vue router：

3. axios库（学习中）：

基本概念解释：

主要文件名：

根组件App.vue：

createApp()是个啥？

.mount()又是啥？

为什么App.vue中要对组件进行注册，而不能像html等一样，写完在浏览器中“开箱即用”呢？？

单个项目下实现多页面跳转——vue router

发送http请求——axios库