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 router

4、变量定义

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 ，因为它不会找到组件实例。

#案例


#基本用法


#高级用法 推荐！！！
#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:事件类型="事件名称"  

  点击1
  点击2 //$event表示对于事件对象的传递
  点击3

8、Vue指令

v-model  
#可以用来给input 双向绑定数据字段或变量名称
#语法：v-model="变量名称"

#案例

    姓名：


v-for 
#可以用来做数组循环使用  
#语法 ：v-for="(item, index) in 数组" :key="index"

#案例

    {{ item.name }}
    {{ item.age }}