开发准备-Vue框架篇

#VUE框架学习

npm init vite@latest vite-demo创建vue项目实例

安装教程：Vue3 安装与配置 详细教程-CSDN博客

示例：

<template>

  <div>

      姓名：<input v-model="userName">{{userName  }}<br />

      薪水：<input type="number" v-model="salary">{{ salary }}<br>

      <button>提交</button>

  </div>

</template>

v-model="userName" 与下面定义的userName形成绑定关系

{{  }} 双括号为vue 特定语法，可以直接访问变量值

*双向绑定

<script setup lang="ts">

import MySalary from './components/MySalary';

let {userName,salary,addSalary}=MySalary()

</script>

只有.value可以改变+-改变数据，绑定属性

import{ reactive } from "vue";

    let salaryInfo=reactive({userName:'roy',salary:15000})

    function addSalary(){

      salaryInfo.salary+=1000

      console.log(salaryInfo)

}

reactive 可以不需要管value属性

ref没有双向绑定能力，无法属性绑定

toRefs实例（可以输出一个属性的全部内容）

let{userName,salary} = toRefs(salaryInfo)

dom元素可以用自己定义的属性去做操作

function showRes(){

  console.log(name.value)//input dom元素

  console.log(name.value.value)

  console.log(name.value.getAttribute("abc"))

}

defineExpose暴露需要的值

defineExpose({userName,salary})

路由管理

npm install vue-router@4 引入路由管理

Main.ts

//1.配置路由规则

const routes = [

    {path:"/home", component: HomePage},

    {path:"/about", component: AboutPage},

    {path:"/news", component: NewsPage, name:'news'},

];

//2.创建路由器

const router = createRouter({

    history:createWebHistory(),

    routes

});

//3.加载路由器

const app = createApp(App)

app.use(router)

app.mount('#app')

在router配置中的history项为路由⼯作模式

标签可以添加replace属性

有两种可选配置： push和replace

push 追加浏览器历史记录(默认值)。追加历史记录后，可以使⽤浏览器的返回按钮，跳回历史⻚

replace 替换浏览器历史记录。替换历史记录后，浏览器的返回按钮不可⽤

Pinia集中式状态存储