Why

(｡･∀･)ﾉﾞ，这还有啥why，混口饭吃，有个能创建网站的前置能力，已经很足够了

vue

初始工程

创建命令
npm create vue@latest

cd your_demo
npm install
npm run serve

重要文件

node_moudles 组件库
public 
src 主要编写文件
index.html 入口文件
pack-lock.json package.json 配置依赖等
vite.config..js 配置文件

computed

作用：根据已有数据计算新数据

<template>
    <div class="person">
        姓: <input type="text" v-model="firstName"><br>
        名: <input type="text" v-model="lastName"><br>
        全名: <span>{{  fullName }}</span><br>
        <button @click="changeFullname">全名改为：xxx</button>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

    let firstName = ref('zhang')
    let lastName = ref('san')
    
     // 计算属性——只读取，不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */
   let fullName = computed({
    get(){
        return firstName.value +"-"+lastName.value
    },
    //修改
    set(val){
        alert("有人修改乐fullName",val)
        firstName.value=val.split('-')[0]
        lastName.value=val.split('-')[1]
    }
   })

   function changeFullname(){
    fullName.value="li-si"
   }
</script>

！路由

害。。。速成嘛，就先重点路由吧

导航区，展示区

指定路由的具体规则

形成一个个的xxx.vue

需要提前想好路由工作模式

//创建一个路由器并且暴露出去

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue'
import person from '@/views/person.vue'
import News from '@/views/News.vue'
//创建路由器(rnm，这里不要用{}把Home他们包起来)

const router = createRouter({
    history:createWebHistory(), // 路由器的工作模式
    //配置路由
    routes:[ //一个个路由规则
        {
            path: '/home',
            component: Home
        },
        {
            path: '/person',
            component: person
        },
        {
           path: '/news',
           component: News
        }
    ]
})

export default router

【编程式导航】

路由组件的两个重要的属性：$route和$router变成了两个hooks

import {useRoute,useRouter} from 'vue-router'

const route = useRoute() //解构传入的数据
const router = useRouter() //路由器，进行跳转

console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

//news.vue
    <ul>
        <li v-for="news in newsList" :key="news.id">
            <RouterLink :to="{
            path: '/news/detail',
            query: {
                id: news.id,
                name: news.name,
                context: news.context,
                // News: news//不行
                car: car
            }
        }">{{ news.name }}
            </RouterLink>
        </li>
    </ul>

  <h1>新闻</h1>
<ul>{{ id }}</ul>
<ul>{{ name }}</ul>
<ul>{{ context }}</ul>
<ul>{{ car}}</ul>
<hr>
<ul>{{ query.id }}</ul>
<ul>{{ query.name }}</ul>
<ul>{{ query.context }}</ul>
<ul>{{ query.car}}</ul>



<script setup>
import { useRoute,useRouter } from 'vue-router'
import { toRefs } from 'vue';
import {useDetailStore} from '@/store/details'
import { storeToRefs } from 'pinia';
//接受props
defineProps(['id','name','context','car'])
    ------
let route=useRoute() //hook
let router=useRouter() //路由器
let {query}= toRefs(route) //解构
</script>

pinia

有点类似与Java的ThreadLocal？

npm install pinia

//js中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'

const pinia=createPinia()
const app=createApp(App)
app.use(router).use(pinia)
.mount('#app')

首先是在js文件中去定义数据以及方法，还有暴露出来

// import { defineStore } from "pinia";


// export const useDetailStore=defineStore('details',{
//     state(){
//         return {
//             toy:"atm",
//             sum: 666,
//             todayNews:[
//                 {id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},
//                 {id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},
//                    {id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}
//             ]
//         }
//     },
//     //计算
//     getters:{}
// })


//组合式写法

import { defineStore } from "pinia";
import { ref } from "vue";

export const useDetailStore = defineStore('detials', () => {
    const toy = ref('atm')
    const todayNews = ref([
        { id: 'yuysada01', content: '你今天有点怪，哪里怪？怪好看的！' },
        { id: 'yuysada02', content: '草莓、蓝莓、蔓越莓，你想我了没？' },
        { id: 'yuysada03', content: '心里给你留了一块地，我的死心塌地' }
    ])
    const sum = ref(399)
   const change=(newToy)=>{
    toy.value=newToy
   }

    return {toy,todayNews,sum,change}

})

而接收的话也是有好几种的

import {useDetailStore} from '@/store/details'
import { storeToRefs } from 'pinia';
//先定义出来
const detailStore=useDetailStore()
//第一，直接解构出来
const {toy,sum,todayNews} = storeToRefs(detailStore)
//第二,不再是响应式
// let toy=detailStore.toy
// let sum=detailStore.sum

//感觉有点迷糊
// let toy=ref(detailStore.toy)
// let sum=ref(detailStore.sum)

//details.js中
 const change=(newToy)=>{
    toy.value=newToy
   }
  function changeStore(){
  // detailStore.$patch({
  //   toy: "wlgq",
  //   sum: 555
  // })
  toy.value="aiodsjfodis"
  detailStore.change(toy.value)
}