Vue 3 初识

1、项目运行

常用命令：

npm run serve //serve并不是绝对的，有的项目运行命令使用的是npm run dev，dev可以自由配置 查看位置 项目根目录下面的package.json（包描述文件）

2、项目创建

vue create <projectName> //创建命令 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 ，因为它不会找到组件实例。

#案例
<template>
    {{msg}}
    <button @click='sayHi'>点击我</button>
</template>

#基本用法
<script>
export default {
    setup(){
        #setup 
        const msg = '小樱'
        const sayHi = () => {
            return 'hi'
        }
        #return的属性和方法 可以在模板里面直接用
        return {
            msg,
            sayHi
        }
    }
}
</script>

#高级用法 推荐！！！
#setup 表示script里面的代码全部都写在setup函数内部，而vue3代码全部可以在里面跑完 
#定义在全局的数据和方法，在模板中使用会自动解包
<script setup>
#不需要return 定义好直接可以在模板里面使用 非常的nice！
const msg = '小樱'
const sayHi = () => {
    return 'hi'
}
</script>

6、响应式数据

ref  定义基本数据类型与引用数据类型 

注意：ref() 代理的数据在js中使用时，必须使用变量.value才可以正确取值且拥有双向绑定特性。

#使用前引入
import { ref } from 'vue'

#ref响应式定义数据
const 变量名称 = ref(初始值)   //ref定义数据

#使用方式
变量名称.value = xxx   //ref定义的对象需要.value才可以正常操作

#完整案例
<template>
  <div>
    <button  @click="click">登录</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

var name = ref('小明');
let array = ref([0,1,2])
const obj = ref({name:'张三',age:14})

function click(){
  name.value = '小张'
  array.value [0] = '7'
  obj.value.name = '李四'
  obj.value.age = 24
}
</script>

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就可以正常操作

#完整案例
<template>
  <div>
    <button  @click="click">登录</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const obj = reactive({name:'李四',age:26})

function click(){
  obj.name = "王五"
  obj.age = 30   
}
</script>

7、事件

#定义普通事件
function 事件名称(){
    
}

#事件绑定
@click="事件名称" 或者 v-on:事件类型="事件名称"  

  <button  @click="click(1)">点击1</button>
  <button  @click="click($event)">点击2</button> //$event表示对于事件对象的传递
  <button  v-on:click="click">点击3</button>

8、Vue指令

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

#案例
<div>
    姓名：<input type="text" v-model="name">
</div>

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

#案例
<tr v-for="(item,index) in name1" :key="index">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
</tr>