vue笔记（一）：部署

首

文档

安装

1、安装nodejs（链接），18.0以上版本。

2、在想要创建项目的目录下执行命令

npm create vue@latest

按提示创建项目，其中vue router是实现路由功能，pinia实现组件之间共享数据。如果项目需要两个功能建议选择yes。

3、

cd 
npm install
npm run dev

启动项目访问所给链接即可。

安装bootstrap

如果创建项目时，部分功能没有选择，之后可手动加入，以bootstrap为例。

项目目录下执行：

npm install bootstrap

在main.js中引入：

//import './assets/main.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

pinia和router也像这样引入，如果自定义样式记得删除man.css样式，App.vue中的样式不需要也可以删除。

vue文件结构

创建/src/components/NavBar.vue:

分为三部分script（js）、template（html）和style（css）。script的setup可以帮用户完成很多东西，也可以不写然后手动设置，详细请看文档。style的scoped是为了让不同vue组件间css样式名称不产生冲突。

在App.vue中引入：

RouterView是每个路由对应的视图。

基础知识

 template获取script变量

创建组件/scr/components/TestSon.vue:

script中定义变量，template使用{{}}进行获取。

接受父组件参数

修改TestSon.vue：

使用defineProps定义组件接受的参数。 

创建组件/scr/components/TestParent.vue:

是的缩写，父组件直接以属性的方式传递参数。

向组件中传递模板

编写组件HomeContent.vue:

我们希望有一个类似容器的组件contentbase，容纳当前编写的模板内容。

ContentBase：

使用slot槽来接受内容，夹在之间的内容会替换的位置。

属性绑定

上述例子中父组件传递的参数msg是固定string，我们也可以通过v-bind动态的绑定：

也可以简写为：

条件渲染

列表渲染

需要绑定key，要求每个样例key不同。 

事件处理

可简写：

Say hello

输入绑定

如果需要在script中使用message的值，需要使用message.value来访问。ref用来声明响应式状态，对于一些复杂类型如object，可以使用reactive代替ref。

访问DOM

onMounted会在组件加载完之后调用，只会执行一次，input.value是组件实例。

子组件向父组件抛出事件

父组件TestParent

子组件TestSon

也可通过$emit直接抛出