vue3笔记

建议安装nvm来管理本地nodejs的版本，尽量使用高版本的nodejs
需要安装npm

一. 创建vue3项目

使用vite来创建vue3的项目

npm create vite@latest

◇  Project name:
   your project name
◇  Select a framework:
   Vue
◇  Select a variant:
   JavaScript

随后进入此工程所在的目录

cd your_project_name
npm install
npm run dev

此时就将这个demo运行起来了，随后访问将控制台的这一行输出的地址，实际地址以各自的控制台输出为准。

  ➜  Local:   http://localhost:5173/

回头看看我们的项目结构

your_project_name
├── index.html 欢迎页，没啥用
├── node_modules 
│   └── 存放模块文件，不要动
├── package.json 配置文件
├── package-lock.json
├── public 资源文件
│   └── vite.svg 
├── README.md 项目说明
├── src 项目核心文件夹
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue 删掉
│   ├── main.js
│   └── style.css 删掉
└── vite.config.js

接下来我们对项目进行一些改造
删掉HelloWorld.vue 以及style.css,接下来修改main.js里面的内容

import { createApp } from 'vue'
// import './style.css' 这行删掉
import App from './App.vue'

createApp(App).mount('#app')

修改APP.vue里面的内容

<script setup>
// 清空
</script>

<template>
   这里面也清空
</template>

<style scoped>
#  这里面也清空
</style>

到这里一个基础的vue3项目框架整完了

二、vue3在vscode中的插件

需要安装这几个插件来方便我们开发

Vue-Official
vue-vscode-snippets
别名路径跳转

三、Vue3简单语法

3.1创建响应式数据

在<script>标签中，写入

//导入reactive关键字
import { reactive } from 'vue';
//定义响应式数据
const propNews = reactive({
  propSrc: "The Src",
  propUrl: "The Data"
})
//创建点击事件
const onClick = ()=>{
  propNews.propSrc = "newSrc";
}

在<template>标签中写入

<p>{{ propNews.propSrc }}</p>
<button @click="onClick">点击变更</button>

四.项目简单实例

在app.vue中编辑

<script setup>
import { reactive,ref } from 'vue';

const propNews = reactive({
    propSrc: "The Src",
    propUrl: "The Data"
})

const onClick = () => {
    propNews.propUrl = "update Data"
}
</script>

<template>
    <p>{{ propNews.propSrc }}</p>
    <p>{{ propNews.propUrl }}</p>
    <button type="button" @click="onClick">点击修改参数</button>
</template>

<style scoped>
</style>

点击按钮可以修改Url的值

五、组件传值

1.父传子

使用defineProps方法实现
在component文件夹下创建了一个组件Header.vue

<script setup>
const props = defineProps(['propSrc', 'propUrl'])
console.log(props)
</script>

<template>
  <div class="header">
    <h3>Header</h3>
    <p> propSrc: {{ propSrc }}</p>
    <p> propUrl: {{ propUrl }}</p>
  </div>
</template>

<style scoped>
.header {
  background-color: #f8dfdf;
  border-radius:20px;
  padding: 2px 0px 2px 10px;
}
</style>

创建一个Footer.vue

<script setup>
const props = defineProps({
  propSrc: Number,
  propUrl: String,
  propProduce: {
    type: Number,
    required: false,
    default: 45678
  }
})
console.log(props);
</script>

<template>
  <div class="footDiv">
    <h3>Footer</h3>
    <p>{{ propSrc }}</p>
    <p>{{ propUrl }}</p>
    <p>{{ propProduce }}</p>
  </div>

</template>

<style scoped>
.footDiv {
  background-color: #b5ffc7;
  border-radius: 20px;
  padding: 2px 0px 2px 10px;
}
</style>

然后回到APP.vue中，将组件导入。

<script setup>
import { reactive, ref } from 'vue';
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
const propNews = reactive({
  propSrc: "The Src",
  propUrl: "The Data"
})

const onClick = () => {
  propNews.propUrl = "update Data"
}
</script>

<template>
  <Header propSrc="FatherPropSrc" propUrl="FatherPropUrl"/>
  <p>{{ propNews.propSrc }}</p>
  <p>{{ propNews.propUrl }}</p>
  <button type="button" @click="onClick">点击修改参数</button>
  <Footer v-bind="propNews"></Footer>
</template>

<style scoped></style>

通过Footer.vue和Header.vue这样就使用两种方式将父组件的参数引入到子组件中

2.子传父

使用defineEmits关键字实现
在components文件夹中，创建一个Content.vue

<script setup>
const emits = defineEmits(["getWeb", "setWeb"])
const btnclick = () => {
  emits('setWeb', 10)
}
</script>

<template>
  <div>
    <p>Content</p>
    <button @click="btnclick">Content按钮</button>
  </div>
</template>

<style scoped></style>

在App.vue中，

<script setup>
import { reactive } from 'vue';
import Content from './components/Content.vue';

//reactive方法修饰的对象是响应式数据
const propNews = reactive({
  propSrc: "The Src",
  propUrl: "The Data"
})

const emitsSetWeb = (data) => {
  console.log('emitsSetWeb', data)
  propNews.propSrc +=data
}
</script>

<template>
  <Content @set-web="emitsSetWeb"/>
  <p>{{ propNews.propSrc }}</p>
  <p>{{ propNews.propUrl }}</p>

</template>

<style scoped></style>

3.跨组件通信

指的是父组件可以将属性、方法传递给子组件的子组件

父组件

<script setup>
import { provide, ref } from 'vue';
const web = { name:'A', age:'2'}
provide('provideWeb',web)

const user = ref({ name: 'B', age: '3' })
provide('provideUser', user)

const func = () => {
  user.value.age++;
}
provide('provideFunc', func)

</script>

<template>
  <h3>nav组件-Bottom组件</h3>
</template>

<style scoped></style>

孙组件

<script setup>
import { inject } from 'vue';

const web = inject("provideWeb");
console.log('provide_web', web);

const user = inject("provideUser")
console.log("provideUser",user.value);

const func = inject('provideFunc')
func();
console.log("provideUser",user.value);
</script>

<template>
  <h3>nav组件-Bottom组件</h3>
</template>

<style scoped></style>

控制台打印

provide_web {name: 'A', age: '2'}
Nav.vue:8 provideUser Proxy(Object) {name: 'B', age: '3'}
Nav.vue:12 provideUser Proxy(Object) {name: 'B', age: 4}

六、匿名插槽和具名插槽

插槽指的是可以在父组件内自定义模板片段
子组件中可以将定义的模板片段插入到子组件的特定位置中

6.1匿名插槽

父组件

<template>
  <Header>
    <a href="http://www.baidu.com">百度</a>
  </Header>
</template>

子组件 Header.vue

<template>
  <div class="header">
    <h3>Header</h3>
    <slot/>
  </div>
</template>

6.2具名插槽

父组件

<template>
  <div id="app">
    <HelloWorld>
      <h1 style="color: aqua">这是第一个内容</h1>
      <h2 style="color: blue" slot="t1">我要放在具名插槽t1里使用</h2>
      <h3 style="color: green" slot="t2">我要放在具名插槽t2里使用</h3>
      <h4 style="color: orange" slot="t3">我要放在具名插槽t3里使用</h4>
      <h5 style="color: pink" slot="t4">我要放在具名插槽t4里使用</h5>
    </HelloWorld>
  </div>
</template>

子组件 Header.vue

<template>
  <div>
    <p>我是子组件</p>
    <p>我是一行话</p>
    <slot name="default">这是占位的内容</slot>
    <slot name="t1">这是t1占位的内容</slot>
    <slot name="t2">这是t2占位的内容</slot>
    <slot name="t3">这是t3占位的内容</slot>
## #     <slot name="t5"/>
  </div>
</template>

posted @ 2025-03-24 15:03 望山還是山#3911 阅读(16) 评论(0) 收藏举报

刷新页面返回顶部

supersoldier

vue3笔记

vue3笔记

一. 创建vue3项目

二、vue3在vscode中的插件

三、Vue3简单语法

3.1创建响应式数据

四.项目简单实例

五、组件传值

1.父传子

2.子传父

3.跨组件通信

六、匿名插槽和具名插槽

6.1匿名插槽

6.2具名插槽

公告