一、vue

官网：

https://cn.vuejs.org/

npm create vue@latest
cd vue-project
npm install
npm run dev

二、双向绑定

<template>
  <div>
    姓名：<input v-model="userName"/> {{ userName }}<br>
    薪水：<input type="number" v-model="salary"/> {{ salary }}<br>
    <button v-on:click="addSalary">提交</button><button @click="changeShowUserInfo">查看个人信息</button>
    <hr />
    <div class="userInfo" v-if="showUserInfo">
      <h2>个人信息</h2>
      <p>年龄:<input type="number" v-model="userInfo.age"></p>
      <p>性别<input type="radio" value="1" v-model="userInfo.sex">男</input><input type="radio" value="2" v-model="userInfo.sex">女</input></p>
      <p>岗位：<select name="" id="" v-model="userInfo.impartment">
        <option value="dev">开发</option>
        <option value="test">测试</option>
        <option value="maintain">运维</option>
      </select>
      </p>
      <p>技术：   <span v-for="skill in userInfo.skills" :key="skill">{{ skill }}</span></p>
      <p>新技术：<input type="text" v-model="newSkill"><button @click="learnNewSkill">学习新技术</button></p>
      <p>个人信息汇总{{ userInfo }}</p>
    </div>
  </div>
</template>
<script lang="ts">
  export default{
    data(){
      return{
        userName:'roy',
        salary:15000,
        userInfo:{
          age:0,
          sex:1,
          impartment:'',
          skills:['java','python','vue']
        },
        newSkill:'',
        showUserInfo:false
      }
    },
    methods:{
      addSalary(){
        this.salary +=1000
      },
      learnNewSkill(){
        this.userInfo.skills.push(this.newSkill)
      },
      changeShowUserInfo(){
        this.showUserInfo = !this.showUserInfo
      }
    }
  }
</script>



<style scoped>
  .userInfo{
    background-color: aqua;
    widows: 80%;
  }
  .userInfo span{
    background-color: rgb(23, 239, 113);
    margin-left: 10px;
    border-radius: 5px;
  }
</style>

三、OptionsAPI（选项式）和CompositonAPI（组合式）

OptionsAPI

<script lang="ts">
  export default{
   setup(){
    let userName='roy'
    let salary =15000
    function addSalary(){
      salary +=1000
      console.log(salary);
      
    }
    return {userName,salary,addSalary}
   }
  }
</script>

CompositonAPI

1.双向绑定

<script lang="ts">
import {ref} from 'vue'
  export default{
   setup(){
    let userName=ref('roy')
    let salary =ref(15000)
    function addSalary(){
      salary.value +=1000
      console.log(salary);
      
    }
    return {userName,salary,addSalary}
   }
  }
</script>

2.vue3写法

<script setup lang="ts">
import { ref } from 'vue'
let userName = ref('roy')
let salary = ref(15000)
function addSalary() {
  salary.value += 1000
  console.log(salary);
}

</script>

3.在components（组件）目录下创建MySalary.ts文件

写入：

import { ref } from "vue";

export default function(){
    const userName =ref('rey')
    const salary =ref (15000)
    function addSalary(){
        salary.value+=1000
        console.log(salary);
        
    }
    return {userName,salary,addSalary}
}

app.vue：

<script setup lang="ts">
import MySalary from './components/MySalary'
//或者import MySalary from '@/components/MySalary'
let {userName,salary,addSalary} =MySalary()
</script>

四、vue3数据的双向绑定

ref

<script setup lang="ts">
import { ref } from 'vue'
let userName = ref('roy')
let salary = ref(15000)
function addSalary() {
  salary.value += 1000//这一块要操作value属性不要操作本身
  console.log(salary);
}

</script>

对于对象类型的

1.用react包裹

<template>
  <div>
    姓名：<input v-model="salaryInfo.userName" /> {{ salaryInfo.userName }}<br>
    薪水：<input type="number" v-model="salaryInfo.salary" /> {{ salaryInfo.salary }}<br>
    <button v-on:click="addSalary">提交</button>

  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
let salaryInfo=reactive({userName:'ray',salary:15000})//外层包裹一个react就有了响应式的能力
    function addSalary(){
        salaryInfo.salary +=1000
        console.log(salaryInfo.salary);
        
    }
</script>

2.用ref包裹

<script setup lang="ts">
import { ref } from "vue";
let salaryInfo=ref({userName:'ray',salary:15000})
    function addSalary(){
        salaryInfo.value.salary +=1000
        console.log(salaryInfo);
        
    }
</script>

3.toRef

<template>
  <div>
    姓名：<input v-model="userName" /> {{ userName }}<br>
    薪水：<input type="number" v-model="salary" /> {{ salary }}<br>
    <button v-on:click="addSalary">提交</button>

  </div>
</template>
<script setup lang="ts">
import { reactive, ref, toRef } from "vue";
let salaryInfo = reactive({ userName: 'ray', salary: 15000 })
let userName = toRef(salaryInfo, 'userName')
let salary = toRef(salaryInfo, 'salary')
function addSalary() {
  salary.value += 1000
  console.log(salaryInfo);

}
</script>

4.toRefs

<script setup lang="ts">
import { reactive, ref, toRef, toRefs } from "vue";
let salaryInfo = reactive({ userName: 'ray', salary: 15000 })
let { userName, salary } = toRefs(salaryInfo)
function addSalary() {
  salary.value += 1000
  console.log(salaryInfo);

}
</script>

5.把页面元素塞到函数里

<template>
  <div>
    姓名：<input ref="name" abc="asschhuc"/><br>
    <button v-on:click="showRes">提交</button>

  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let name =ref()
function showRes(){
  console.log(name)//RefImpl
  console.log(name.value)//input dom 元素
  console.log(name.value.value)//值
  console.log(name.value.getAttribute("abc"));//asschhuc
}
</script>

五、自定义组件传参

1.子组件传送到父组件

app.vue

<template>
  <div>
    <MySalaryInfo ref="salaryInfo"></MySalaryInfo>
    <button @click="showRes">查看薪水信息</button>

  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import MySalaryInfo from "./components/MySalaryInfo.vue"
let salaryInfo =ref()
function showRes(){
  console.log(salaryInfo)//RefImpl
  console.log(salaryInfo.value);//Proxy(Object)
  console.log(salaryInfo.value.userName);
  console.log(salaryInfo.value.salary);
}
</script>
<style scoped>

</style>

components/MySalaryInfo.vue

<template>
    姓名：<input type="text" v-model="userName" /><br />
    薪水：<input type="number" v-model="salary" />
</template>

<script lang="ts">
    export default {
        name:"SalaryInfo"
    }
</script>

<script setup lang="ts">

import { ref } from 'vue';
let userName =ref('roy')
let salary =ref(15000)

defineExpose({userName,salary})
</script>

<style>
</style>

2.父组件传到子组件

app.vue

<template>
  <div>
    <MySalaryInfo :salary-info="salaryInfo"></MySalaryInfo>
    <button @click="showRes">薪水修改</button>

  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import MySalaryInfo from "./components/MySalaryInfo.vue"

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

function showRes(){
  salaryInfo.salary+=1000
}
</script>
<style scoped>

</style>

components/MySalaryInfo.vue

<template>
    姓名：<input type="text" v-model="salaryInfo.userName" /><br />
    薪水：<input type="number" v-model="salaryInfo.salary" /><br />
    {{ salaryInfo }}
</template>

<script lang="ts">
    export default {
        name:"SalaryInfo"
    }
</script>

<script setup lang="ts">

import { ref } from 'vue';
import type { SalaryInfo } from "@/types/salaryInfo";

defineProps<{salaryInfo:SalaryInfo}>()//salaryInfo当前使用的，SalaryInfo是引入的
</script>

<style>
</style>

src/types/salaryInfo.ts

export interface SalaryInfo{
    userName:string,
    salary:number
}

六、组件的生命周期

创建、挂载、更新、销毁

七、路由插件基础使用

npm install vue-router@4

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue';
import { createRouter,createWebHistory } from "vue-router";
import HomePage from "./pages/HomePage.vue"
import NewsPage from "./pages/NewsPage.vue"
import AboutPage from "./pages/AboutPage.vue"


//1.配置路由规则
const routes =[
    {path:"/home",component:HomePage},
    {path:"/news",component:NewsPage,name:'news'},
    {path:"/about",component:AboutPage}
]

//2.创建路由器
const router =createRouter({
    history:createWebHistory(),//路由工作模式
    routes
})
//3.加载路由器
let app =createApp(App)
app.use(router)
app.mount('#app')

app.vue
<template>
  <div id="app">
    <h1>hello App!</h1>
    <p>
      <!-- 路由链接 -->
      <RouterLink to="/home">首页</RouterLink><!--字符串跳转-->
      <RouterLink :to="{path:'about'}">关于</RouterLink><!--对象跳转-->
      <RouterLink :to="{name:'news'}">新闻</RouterLink><!--具名跳转-->
    </p>
    <div class="content">
      <RouterView/><!-- 路由出口 -->
    </div>
  </div>
</template>

<script setup lang="ts">
</script>



<style scoped>
  a {
    margin: 10px;
  }
  .content{
    background-color: yellowgreen;
    widows: 10%;
    height: 400px;
    border: 1cap;
    border-radius: 10px;
  }
</style>

src/pages/NewsPage.vue

<template>
    <ul>
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>
</template>
<script setup lang="ts">
</script>
<style>
</style>

src/pages/AboutPage.vue
类似
src/pages/HomePage.vue
类似

八、路由工作模式和replace属性

1.history模式

//1.配置路由规则

const routes =[
    {path:"/",redirect:"/home"},
    {path:"/home",component:HomePage},
    {path:"/news",component:NewsPage,name:'news'},
    {path:"/about",component:AboutPage}
]

2.hash模式

import { createRouter,createWebHistory,createWebHashHistory } from "vue-router";e

//2.创建路由器
const router =createRouter({
    history:createWebHashHistory(),//路由工作模式
    routes
})

replace

<RouterLink replace :to="{name:'news'}">新闻</RouterLink><!--具名跳转-->

不能回退页面

九、pinia集中状态储存

App.vue

<template>
  <div id="app">
    <h1>hello{{ userInfo.username.value }}</h1>
  </div>
</template>

<script setup lang="ts">
import {userStore} from "@/store/user"
import { toRefs } from "vue";
import { storeToRefs } from "pinia";
const user = userStore()
// user.$patch({
//   username:'roy2'
// })
user.changeUsername("666");
console.log(user.username);
console.log(user.getUsername);
// const userInfo = toRefs(user);
const userInfo = storeToRefs(user);//更安全
console.log(userInfo);

</script>

<style scoped>

</style>

src/store/user.ts

import { defineStore } from "pinia";
export const userStore =defineStore("userStore",{
    actions:{
        changeUsername(value:string){
            if(value && value.length<10){
                this.username +=value
            }
        }
    },
    getters:{
        getUsername():string{
            return this.username.toUpperCase()
        }
    },
    state(){
        return{
            username:'--'
        }
    }
})