VUE(2)

一标签ref的属性

当在字组件定义类或者id时与App冲突的时候，就可以用标签ref来定义，相当于是一个局部定义，只能在定义的组件里面使用，但是整个标签ref只在html标签内定义，但是在组件里面定义的时候需要用暴露defineExpose()来导出元素值

改名字：<button @click="changename" ref="a">修改名字为lisi</button>
改名字：<button @click="changename" ref="b">修改名字为lisi</button>
let a=ref(1)
let b=ref(2)
defineExpose({a,b})

二 props的使用

defineProps是一个宏函数不需要引入,一般都是父亲给子传入，接收的时候用数组来接收

// 只接收list

// defineProps(['list'])

// 接收list + 限制类型

// defineProps<{list:Persons}>()

// 接收list + 限制类型 + 限制必要性 + 指定默认值withDefaults(defineProps<{list?:Persons}>(),list:()=>[{id:'ausydgyu01',name:康师傅·王麻子·特仑苏',age:19]]

// 接收list，同时将props保存起来* let x = defineProps(['list'])console.log(x.list) */

<h2 a="1+1" :b="1+1" c="x" :d="x"></h2> //这行代码中，加  ：b   ：d 都是表达式，而a,c就是一个字符串类型的

三 Hooks

写在ts文件里面的，可以将不同模块的函数，定义值模块化，比如说，全是使用sum的函数与数据，一种组合式的写法。但是注意，ts文件里面需要写的导出函数，函数里面要返回使用过的方法。使用的时候需要引入ts文件，当然可以解构获得单独的函数或者数据


export default function(){
     let sum=ref(0)
    function getsum(){
        sum.value+=1
    }
    return {sum,getsum}
}

四路由

1.路由的安装：npm install vue-router

2.创建组件，这里写一个路由组件的代码展示，写完index.ts文件后需要导入到main.ts文件里面才能在App组件里面使用

import { createRouter, createWebHashHistory } from 'vue-router'
import New from '../components/New.vue'
import About from '../components/About.vue'
import Shouye from '../components/Shouye.vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [ // 注意这里是 routes 而不是 routers  
        {
            path: '/new',
            component: New
        },
        {
            path: '/about',
            component: About
        },
        {
            path: '/shouye',
            component: Shouye
        }
    ]
})

export default router

3.在那个地方区域显示用的是

import { RouterView,RouterLink } from 'vue-router';
 <RouterView></RouterView>//该地方展示路由导入的内容

 <RouterLink to="/shouye">首页</RouterLink>
    <RouterLink to="/new">新闻</RouterLink>
    <RouterLink to="/about">关于</RouterLink>  //链接跳转指定路由

如果是在路由里面在引入子路由的话需要给改路由的地方添加子路由，注意<RouterLink to="/new/detail">{{ p.title }}</RouterLink> 跳转的时候，是找到/路由/子路由这样的位置

<RouterLink to="/new/detail">{{ p.title }}</RouterLink>

        {
            path: '/new',
            component: New,
            children: [
                {
                    path: 'detail',
                    component: Detail
                }
            ]
        },

4.如果要从路由里面导数据给子路由

query参数：通过：to来传递参数，子路由接收需要用到let route=useRoute()

import { useRoute } from 'vue-router';
import { toRefs } from 'vue';

let route=useRoute()
let {query}=toRefs(route)

<div class="new-list">
    <li>编号：{{query.id }}</li>
    <li>标题：{{query.title }}</li>
    <li>内容：{{query.containt }}</li>
</div>

   <li v-for="p in list" :key="p.id">
    <RouterLink 
    :to="{
        path:'/new/detail',
        query:{
            id:p.id,
            title:p.title,
            containt:p.containt
        }
    }">
        {{ p.title }}
    </RouterLink>
</li>

5 params写法：

：to里面就是要传入的是name而不是path了，如果传入path就会找不到具体写法如下所示

 {
            path: '/new',
            component: New,
            children: [
                {
                    name: 'xiangqing',
                    path: 'detail/:id/:title/:containt?',
                    component: Detail
                }
            ]
        },

  <RouterLink 
    :to="{
        name:'xiangqing',
        params:{
            id:p.id,
            title:p.title,
            containt:p.containt
        }
    }">
        {{ p.title }}
    </RouterLink>    //new路由里面的

<div class="new-list">
    <li>编号：{{route.params.id }}</li>
    <li>标题：{{route.params.title }}</li>
    <li>内容：{{route.params.containt }}</li>
</div>  //detail路由里面的

6 props写法：

// 第一种写法: 将路由收到的所有params参数作为props传给路由组件

// props :true.

// 第二种写法:函数写法，可以自己决定将什么作为props给路由组件，一般用的是query参数

props(route){

return route.query

}

// 第三种写法: 对象写法，可以自己决定将什么作为props给路由组件

props:{

a:100

b:200,

c:300

}

子组件用defineProps导出就可以了

7 replace属性：

路由跳转一般默认的都属push属性，push就可以前进或者倒退路由，repleac相当于替换，无法进行在点击路由后前后跳转，repleac一般放在跳转的地方。

8 编程式路由导航

用到的是const route=useRouter()，route相当于路由器，可以调控所有的子路由比如说想去new路由，就可以写router.push('/new')，push或者replace里面写的和：to里面的东西是相同的，就比如下面第二个片段代码

import{RouterLink,RouterView, useRouter} from 'vue-router'

const route=useRouter()

function show(p:newinter){
    route.push(
        {
        name:'xiangqing',
        query:{
            id:p.id,
            title:p.title,
            containt:p.containt
        }
    }
    )
}

8 重定项

写在规则里面，rediect后面写的就是进入页面跳转的路由

       {
            path: '/',
            redirect: '/new'
        }

五 pinia

1.pinia 使用

第一步：在main.ts里面装上pinia

import { createPinia } from 'pinia';
const pinia = createPinia()
app.use(pinia)

第二步：创建store文件里面存储各种数据，pinia里面的数据可以全组件使用，很方便，这里演示求和sum的ts文件

import { defineStore } from "pinia";

export const useCountStore = defineStore('count', {
    state() {
        return {
            sum: 1
        }
    }
})

第三步：在组件里面导出，pinia存储的数据，countStore.sum就是响应式数据了的，可以直接使用

const countStore=useCountStore()
<h2>当前求和为：{{ countStore.sum}}</h2><br>

2.pinia修改数据的方法

function add(){
    //第一种
    // countStore.sum+=b.value

    // 第二种
    countStore.$patch({
        sum:countStore.sum+b.value,
        address:'广州'
    })
//第三种 这个是写在coun.ts pinia定义数据里面的 action方法
    actions:{
increment(value){console.log('increment被调用了',value// 修改数据
this.sum += value
 }

3.pinia 的解构赋值用storeToRefs 需要在pinia里面引用

import { storeToRefs } from 'pinia';
const{sum,address}=storeToRefs(countStore)

4.pinia的getters的使用

它是state的兄弟，里面定义的相当于计算属性，也是可以解构出来使用的

 getters: {
        bigSum: state => state.sum * 10,
        upperAddress(): string {
            return this.address.toUpperCase()
        }
    }

5.subscribe的使用

每个导出的pinia数据库都有subscribe这个函数属性，语法如下

TaklStore.$subscribe((mutata,state)=>{
    console.log('修改了数据',mutata,state);
    localStorage.setItem('talkList',JSON.stringify(state.talklist))
})     //这里的mutata相当于watch里面的oldvalue stata相当于newvalue，stata里面有原pinia的数据，但是取出来的数据是一个JSON对象，要转换为JSON字符串的形式，当然要使用的时候还要用JSON.parse转换回来

6.组合式store写法

在store里面像在script里的setup面写代码一样，直接定义数据，函数，但是最后需要返回定义的东西

六组件通信

#培训阶段

VUE(2)

http://localhost:8090//archives/vue-2

作者

骆伟林

发布于

2024年11月06日

许可协议

机器学习学习笔记上一篇

Vue.js 学习笔记下一篇