VUE3初学

VUE初学

创建一个Vue项目

powershell 中 运行 vue ui

 

认识Vue各个文件夹

(20条消息) 前端Vue项目架构-文件夹作用的分析总结_码大星的博客-CSDN博客

 

.Vue 文件

 

template

<slot></slot> 存放父组件传过来的child

v-if =“false，true”

v-on == @click

父组件给子组件传值 ：user，传递事件@follow = “你return的函数名字”

子组件接受父组件的值 props，接受函数 context.emit('follow')

v-for= “post in posts” :key=" " (每一层循环的对象要保证加上一个key)

v-model=“” 内容绑定

@Submit

 

 

script

import

使用子组件是，并不是子组件的name属性叫啥就可以直接拿来用

而是使用的子组件文件名

导入外部的比如bootstrap => import 'bootstrap/dist/css/bootstrap.css';

导入default => import Navbar from './components/NavBar.vue' (不用加 {})

./是当前目录，../上一级目录

 

export属性

vue对象会导出属性

name：'' 别的组件标识

components：''当前template区域可以用到哪些东西 （记得加s）

setup ref属性变化（获取ref值用value） reactive属性不变（reactive得是个对象） （记得导入包）

props：{} 传过来父组件的参数 user：{type ：Object，required：true}

computed（（）=> props.user.fristName + '' + props.user.lastName）

 

style

scoped 每个vue有特定的自己的style

margin-top: 20px

字体

text-align: left; 字体左对齐

font-size

font-weight

图片

img{

border-radius: 50%;

}

 

 

 

报错

name改为NavbarView 需要multi

 

name 为ContentView 不能启用

 

Vue语法

router-link ：to={name ：}

一定要跟路由中对应上，这个区分大小写的

路由加参数

ps:修改路由中的参数 /:userid，还有对应跳转的地方params{userid:2}

import { useRoute } from 'vue-router';

const route = useRoute();

log.(route.params.userid)

 

全局变量