Vue 3 初识
1、项目运行
常用命令：
npm run serve //serve并不是绝对的，有的项目运行命令使用的是npm run dev，dev可以自由配置 查看位置 项目根目录下面的package.json（包描述文件）2、项目创建
vue create //创建命令 projectName表示项目名称 vue/cli默认创建 注意事项：
不能在创建完项目后直接运行项目，需要进入项目内部的环境，可以使用cd命令进入
默认目录结构以及错误记录：
项目详细结构 ：
3、页面路由
#单个路由配置
{
//表示home页面的路由配置
path: '/home', //浏览器要访问的地址
name: 'home', //页面名称
component: HomeView //具体访问的页面
}#完整案例
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
//表示home页面的路由配置
path: '/',
name: 'home',
component: HomeView
},
{
//表示about页面的路由配置
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router4、变量定义
var //可以重复定义，也可以重新赋值，并且存在变量提升
let //有块级作用域{},不可以重复定义，可以重新赋值
const //常用语常量定义数据类型分类
1、基本数据类型：
string boolean null number undefined
2、引用数据类型：
object（array数组，object对象）
定义对象数组
#案例 let objArray = ref([{name:'张三',age:14},{name:'张三',age:14},{name:'张三',age:14}])对象数组添加数据操作
objArray.value.push({name:name.value,age:age.value})
5、setup函数
所有的组合 API 函数都在此使用, 只在初始化时执行一次
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
在 setup 中你应该避免使用 this ，因为它不会找到组件实例。
#案例
{{msg}}
#基本用法
#高级用法 推荐！！！
#setup 表示script里面的代码全部都写在setup函数内部，而vue3代码全部可以在里面跑完
#定义在全局的数据和方法，在模板中使用会自动解包
6、响应式数据
ref 定义基本数据类型与引用数据类型
注意：ref() 代理的数据在js中使用时，必须使用变量.value才可以正确取值且拥有双向绑定特性。
#使用前引入
import { ref } from 'vue'
#ref响应式定义数据
const 变量名称 = ref(初始值) //ref定义数据
#使用方式
变量名称.value = xxx //ref定义的对象需要.value才可以正常操作
#完整案例
reactive 定义引用数据类型
注意：reactive 代理的引用数据和原生js一样取值
reactive() 通过new Proxy() 进行封装
ref() 通过 const obj = { value:reactive() } 进行封装
注意：reactive只针对对象和数组做定义时才有效
#使用前引入
import { reactive } from 'vue'
#reactive定义响应式引用数据类型数据
const 变量名称 = reactive({name:'李四',age:40})
#使用方式
变量名称.age = 30 //reactive 定义的对象不需要.value就可以正常操作
#完整案例
7、事件
#定义普通事件
function 事件名称(){
}
#事件绑定
@click="事件名称" 或者 v-on:事件类型="事件名称"
//$event表示对于事件对象的传递
8、Vue指令
v-model
#可以用来给input 双向绑定数据字段或变量名称
#语法：v-model="变量名称"
#案例
姓名：
v-for
#可以用来做数组循环使用
#语法 ：v-for="(item, index) in 数组" :key="index"
#案例
{{ item.name }}
{{ item.age }}