1. Toy模板网首页
  2. > Toy博客

Vue3快速使用手册

10月前 作者：秃狼 分类：Toy博客 阅读(30) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue3快速使用手册。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue3的创建

npm create vite@latest

1.设置项目名。

2.选择框架。

3.选择支持的语法，默认使用TS。

......

Vue3的使用

setUp(无法直接修改数据，也就是没有响应式)

在vue3中不不再推荐使用选项式编程而是使用组合式编程。

Vue2写法

<template>
  <div>
    <span>姓名:{{name}}</span>
    <br>
    <span>年龄:{{age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    data() {
        return {
            name: 'tolen',
            age: 18
        }
    },
    methods: {
        setName() {
            this.name = 'ostkaka'
        },
        addAge() {
            this.age++;
        }
    },
}
</script>

Vue3写法

<template>
  <div>
    <span>姓名:{{name}}</span>
    <br>
    <span>年龄:{{age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    setup() {
        //变量
        let name = 'tolen';
        let age = 18;

        //函数
        function setName() {
            name = 'ostkaka'
        }
        function addAge() {
            age++;
        }
        return {name, age, setName, addAge}
    }
}
</script>

如果data函数和setup中设置的变量名相互冲突的时候会优先读取setup中的数据。

但是每次都需要return对应的数据，写起来非常的麻烦，所以我们可以将setup单独写一个script。

<template>
  <div>
    <span>姓名:{{name}}</span>
    <br>
    <span>年龄:{{age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'Person',
}

</script>

<script lang="ts" setup>
    //变量
    let name = 'tolen';
        let age = 18;

        //函数
        function setName() {
            name = 'ostkaka'
        }
        function addAge() {
            age++;
        }
</script>

ref(用于定义响应式的基本数据，也可以定义对象，但是无法保证嵌套响应)

在我们需要保证响应式的数据赋值上使用ref函数，并且操作其中的vlaue属性,主要就是对value进行操作。

<script lang="ts" setup>
    import { ref } from 'vue'
    //变量，使用ref函数包裹
    let name = ref('tolen');
        let age = ref(18);
        //函数，主要做到响应式的效果就是使用ref中的value属性
        function setName() {
            name.value = 'ostkaka'
        }
        function addAge() {
            age.value++;
        }
</script>

reactive(用于定义响应式的对象)

在我们需要保证对象嵌套式的相应的时候我们就可以使用reactive。

<template>
  <div>
    <span>车牌:{{car.name}}</span>
    <br>
    <span>价格:{{car.cost}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">加价</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {reactive } from 'vue'
    //对象
    let car = reactive({
      name:'BYD',
      cost: 2000000
    });
        //函数
        function setName() {
            car.name = 'ostkaka'
        }
        function addAge() {
            car.cost+=10000;
        }
</script>

 当要使用响应式对象赋值的时候，我们需要使用toRefs函数来将对象中键值赋值为响应式的数据。

我们每次使用ref中数据的时候都需要添加 .value，写起来非常的麻烦，所以我们可以配置插件进行修改。

Vue3快速使用手册,vue,vue.js

computed

 编写计算属性，且计算属性是只读的，不同于普通的属性。

<template>
  <div>
    性:<input v-model="firstName"/>
    <br>
    名:<input v-model="secondName"/>
    <br>
    名字:<span>{{name}}</span>
    <button @click="change()">修改名字</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {ref, computed} from 'vue'
    let firstName=ref("to");
    let secondName=ref("len");
    let name = computed({
      set(val) {
        const[str1, str2] =  val.split('-');
        firstName.value = str1;
        secondName.value = str2;
      },
      get() {
          return firstName.value + secondName.value;
      }
    });
    let change = function() {
      name.value = "ost-kaka";
    }

</script>

在Vue3中主要就是引入computed函数，通这个函数来创建属性，并且在该函数中主要就是编写 set(修改属性)和get(获取属性)函数。

watch

watch是一个监听函数，我们且有三个参数：数据源，回调函数，监听配置。

watch的数据源只能是: ref，reactive，对象，gatter函数(返回一个数据)。

例子

<template>
  <div>
    名字:<span>{{name}}</span>
    <br>
    年龄:<span>{{age}}</span>
    <br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {ref, watch} from 'vue'
    let name = ref("tolen");
    let age = ref(18);
    let changeName = function() {
      name.value +='~';
    }
    let changeAge = function() {
      age.value++;
    }
    watch(name, function() {
      if(name.value != "ostkaka") {
        console.log(name.value);
      }
    })

</script>

暂停监听

//返回值就是暂停函数，通过对应的条件调用暂停函数
let stop = watch(() => person.value.name, function() {
        //编写对应的回调函数
        if(1==1) {
          stop();
        }
    })

 特殊情况

1.数据源是ref的话，直接使用ref就可以，不需要添加.value。

2.数据源是ref定义的对象的话，其默认是不支持深度监听的，所以需要在watch配置中添加deep:true。

    watch(name, function() {
      if(name.value != "ostkaka") {
        console.log(name.value);
      }
    },{deep:true})

3.数据源是reactive定义的话，其是默认开启深度监听的。

4.监听ref或reactive定义的对象中某个属性的时，如果属性是基本类型的话使用getter函数，如果是对象类型的话，可以直接监听，但是还是推荐使用getter函数，是可以在做对象属性监听的时候都使用getter函数进行编写。

//person.value.name对应ref中对象的属性
watch(() => person.value.name, function() {
        //编写对应的回调函数
    })

5.如果需要监听多个数据源的话，直接使用数组进行收集。

当我们需要自动去监听某些数据源的时候，我们就可以使用watchEffect，而watch需要我们手动的指出需要监听的数据源。

<template>
  <div>
    名字:<span>{{name}}</span>
    <br>
    年龄:<span>{{age}}</span>
    <br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {ref, watchEffect} from 'vue'
    let name = ref("tolen");
    let age = ref(18);
    let changeName = function() {
      name.value +='~';
    }
    let changeAge = function() {
      age.value++;
    }
    watchEffect(function() {
        console.log(name.value)
    })

</script>

标签中的ref属性

如果使用标签中的id作为唯一标识的话，在不同的组件之间就会有冲突的风险。使用使用ref作为容器用于间隔。

<template>
  <div>
    名字:<span ref="person">{{name}}</span>
  </div>
</template>

<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
//且person中的值就是该标签的数据。
    let person  = ref();

</script>

如果ref加在html标签上，则其数据就是标签数据，如果ref加在主键标签上，则其数据就是主键数据。

 ts类型规范

自定义接口

//对应的自定义类型
export interface Person {
    name: string,
    age: number,
}

//标识对应类型的数组形式
export type Persons = Array<Person>

在vue中进行使用

<script lang="ts" setup>
    import {Persons, type Person} from '../types/index'
    let ren:Person = {name:'tolen', age: 18};
    let rens:Persons = [
    {name:'tolen', age: 18},
    {name:'tolen', age: 18},
    {name:'tolen', age: 18}
    ];
</script>

props

使用defineProps函数进行参数的传递。

//父组件传入对应的list集合

<template>
  <div>
   <ul>
    <li v-for="item in list" :key="item.age">
      {{item.name}} -- {{item.age}}
    </li>
   </ul>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {defineProps} from 'vue';
    defineProps(['list']);
    
</script>

将接口写入泛型就可以指定对应类型的数据。

<script lang="ts" setup>
    import {Persons } from '../types';
    import {defineProps} from 'vue';
    defineProps<{list?:Persons}>();
    
</script>

使用withDefaults，设置默认的数据。且需要是个函数返回对应的数据。

<script lang="ts" setup>
    import {Persons } from '../types';
    import {defineProps, withDefaults} from 'vue';
    // defineProps<{list?:Persons}>();
    withDefaults(defineProps<{list?:Persons}>(), {
      list: () => [{name: 'ostkaka', age: 45}]
    });
    
</script>

Vue的生命周期

1.创建：setUp中的代码就是创建时需要执行的代码。

2.挂载前/挂载：使用onBeforeMount和onMounted。

    //挂载前
    onBeforeMount(() => console.log("挂载前"));
    //完成挂载
    onMounted(() => console.log("完成挂载"));

 3.更新前/更新：使用onBeforeUpdated和onUpdated。

    //更新前
    onBeforeUpdate(() => console.log("更新前"));
    //更新完成
    onUpdated(() => console.log("更新"));

4.卸载前/卸载：使用onBeforeUnmount和onUnmounted

    //卸载前
    onBeforeUnmount(() => console.log("卸载前"));
    //卸载完成
    onUnmounted(() => console.log("卸载完成"));

hooks

将相同模块的代码放在同个ts文件中，进行统一的维护。

集中的ts文件

import { ref } from "vue";

export default function() {
    let num = ref(50);

    let add = function() {
        return num.value += 10;
    }
    //返回数据可以存在多个
    return {num, add};
}

在主键中使用

<script lang="ts" setup>
    import useradd from '../hooks/useAdd'
    const {num,add} = useradd();
</script>

路由

安装路由

npm i vue-router

创建router文件/index.ts，创建路由规则。(使用history的工作模式，也可以使用哈希模式（就是路径中带#）)

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

import blog from '../page/blog.vue'
import user from '../page/user.vue'

const router = createRouter({
//使用history的工作模式，也可以使用哈希模式（就是路径中带#）
    history: createWebHistory(),
    routes:[
        {   name: 'blog'
            path:'/blog',
            component: blog
        },
        {   
            name: 'user',
            path:'/user',
            component: user
        }
    ]
})

export default router

在main.ts中使用router。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

let app = createApp(App);
app.use(router);
app.mount('#app');

使用router-link标签进行跳转(可以使用字符串，也可以使用 对象形式，对象中可以使用name和path来指定路由)，使用router-view指定渲染vue主键的位置。

App.vue例子

<script setup lang="ts">

</script>

<template>
  <router-link to="/blog">博客区</router-link> <span>||</span>
  <router-link to="/user">用户区</router-link>
  <hr>
  <router-view></router-view>
</template>

测试结果

Vue3快速使用手册,vue,vue.js

 如果在子页面中还要展示其他的小页面的话，就可以使用子路由，使用参数 children。

路由传递参数

在router-Link中的to属性可以传入query/params参数。

 <router-link :to="
  {
    name: 'blog',
    query/params: {
      name: 'ostkaka',
      age: 13
    }
  }
  ">博客区</router-link>

在对应的组件上使用useRoute函数进行接收。

import {useRoute} from 'vue-router'
  let route = useRoute();
 // route.query / route.param

可以使用restful风格，在路由配置中编写路径格式，必须使用name进行配置。(如果某个参数非一定存在的话就在其后加`?`)

Vue3快速使用手册,vue,vue.js

在对应的组件上使用useRoute.params进行接收。 

编程式路由导航

使用route-Link是在template中进行编写的，如果需要在script中编写的话，我们需要使用useRouter进行编写。useRouter.push函数跳转到对应的路径。（运用场景：定时跳转，划过跳转，等等，在script编程）

重定向

将一个路径直接重定向到另一个路径上。 

Vue3快速使用手册,vue,vue.js

pinia

作用：集中管理数据。

安装

npm i pania

在main.t中引入并使用pinia。

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'

let app = createApp(App);
//创建pinia
const pinia = createPinia();
//使用pinia
app.use(pinia);
app.mount('#app');

存储数据：创建文件夹 /store，并创建对应模块的文件，在state中编写对应的数据。

import {defineStore} from 'pinia'

export const useAddStore = defineStore('add', {
    state() {
        return {
            sum: 1,
            size: 1
        }
    }
})

修改数据

1.直接修改。

<script setup lang="ts">
    import {useAddStore} from '../store/add'
    
    let addStore = useAddStore();
    console.log(addStore);
    let add = function () {
       addStore.sum += addStore.size;
    }
    let minus = function () {
        addStore.sum -= addStore.size;
    }
</script>

2.使用$patch函数。

<script setup lang="ts">
    import {useAddStore} from '../store/add'
    
    let addStore = useAddStore();
    //修改对应对应的属性
    addStore.$patch({
        sum: 100,
        size: 2
    })
    
</script>

3.通过action属性进行修改。

import {defineStore} from 'pinia'

export const useAddStore = defineStore('add', {
    actions: {
        add(sum, size) {
            this.sum = sum;
            this.size = size;
        }
    },
    state() {
        return {
            sum: 1,
            size: 1
        }
    }
})

在对应的组件中直接调用此函数即可修改。

storeToRefs的使用

如果需要使用store中的数据时为了不破坏响应式，我们就可以使用storeToRefs来保证数据的响应式。（storeToRefs('store')）

组件通信

1.使用自定义事件(子传父常使用)

在传递者进行 定义事件和触发事件

<script setup lang="ts">
    import{onMounted} from 'vue'
    //声明事件
    const emit = defineEmits(['send-toy']);
    onMounted(() => {
        emit('send-toy', 'ostkaka');
    })
</script>

获得数据者进行 事件的绑定

<script setup lang="ts">
  import Add from './components/Add.vue' 
  import Love from './components/Love.vue'
  
  let saveToy = function(value:any) {
    console.log('@', value);
  }
</script>

<template>
  <Add @send-toy="saveToy"/>
  <hr>
  <Love/>
</template>

2.使用mitt组件（任意主件间通信）

下载mitt

npm i mitt

创建mitt工具包

//引入mitt
import mitt from 'mitt'

const emitter = mitt()

export default emitter

在需要进行通信的组件中进行引入

在获取数据的组件中使用emitter.on进行事件的绑定

<script setup lang="ts">
  import emitter from './utils/emitter'
  
  //绑定事件
  emitter.on('send-toy', (value:any) => {
    console.log("@", value)
  })

</script>

在传递数据的组件中使用emitter.emit进行事件的触发

<script setup lang="ts">
    import emitter from '../utils/emitter'
    // 触发事件
    emitter.emit('send-toy', 'ostkaka')
    
</script>

3.使用provide和inject实现爷孙数据传递

在上级处使用provide函数来传递数据给子级。

<script setup lang="ts">
  import { provide, ref } from 'vue'

  let money = ref(100);
  //向自己的子孙通过数据
  provide('money', money);

</script>

在子级处使用inject函数来接收上级的数据。

<script setup lang="ts">
    import { inject } from 'vue';

    //使用上级的数据,第二个参数为默认数据
    let money = inject('money', 1);
    
</script>

最终实现上级向子级数据的传递。

插槽

1.默认插槽

 在对应的组件中编写插槽位置。

<template>
    <slot></slot>
</template>

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

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

在调用处使用。


<template>
  <Add>
    <span>你好</span>
  </Add>
</template>

2.具名插槽

指定标签存放在对应的插槽上。

<template>
    <slot name="s1"></slot>
    <slot name="s2"></slot>
</template>

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

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

使用标签填充插槽。

<template>
  <Add>
    <template v-slot:s1>
      <span>你好</span>
    </template>
    <template #s2>
      <span>ostkaka</span>
    </template>
  </Add>
</template>

可以使用 # 代替 v-slot: 指定插槽。

3.作用域插槽

当插槽的组件的数据需要传递到调用者时就可以使用此插槽。

<template>
    <slot name="s1" :userName="name"></slot>
</template>

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

<script setup lang="ts">
    import { ref } from 'vue';
    let name = ref('ostkaka');
</script>

调用者使用传来的数据。文章来源地址https://www.toymoban.com/news/detail-823790.html

<script setup lang="ts">
  import Add from './components/Add.vue' 
</script>

<template>
  <Add>
    <template v-slot:s1="value">
      <span>你好</span>
      <span>{{value.userName}}</span>
    </template>
  </Add>
</template>

到了这里，关于Vue3快速使用手册的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue3+js-md5密码加密使用

    在实际开发中，后台管理系统往往登录密码加密后才能传给后端，这里可以有效的保护用户信息与安全，下面使用js-md5对用户密码进行加密

    2024年01月18日
    浏览(42)
  • Vue3中快速简单使用CKEditor 5富文本编辑器

    Vue3中快速简单使用CKEditor 5富文本编辑器

    CKEditor 5就是内嵌在网页中的一个富文本编辑器工具 CKEditor 5开发文档（英文）：https://ckeditor.com/docs/ckeditor5/latest/index.html 接下来带你快速熟悉CKEditor 5在Vue3中简单使用，看最终效果图👇 本文项目采用CKEditor 5定制经典配置（ckeditor5-build-classic） + @ckeditor/ckeditor5-vue 官网定制，选

    2024年02月09日
    浏览(62)

  • vue3 使用 web3.js；钱包转账；唤醒钱包.......

    web3.js基本使用 本篇文章不适合没有经验的小白，需要对web3有一定的了解，所以有些参数需要自己懂！ 准备 安装web3.js依赖包 npm install web3 文档教程地址：https://web3.tryblockchain.org/ 这是我自己封装的类 web3.js 直接复制过去就可以用

    2024年02月03日
    浏览(51)
  • Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（下）

    Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（下）

    在进入文章的正文之前，我们先一起了解一下关于 CSDN 今年的 1024 程序员节。与此同时这也是我在 CSDN 参与的第二个 1024 程序员节日，转眼间也快写博客两年时间，去年很遗憾没有去到深圳（疫情原因）线下参加这个有趣而充实的峰会。今年没有特殊情况的话一定会如约而至

    2024年02月06日
    浏览(51)
  • Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（上）

    Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（上）

    今天久违的更新一下关于 Vue 的文章了，本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享，实战内容包括有打印插件 Print.js 的使用，以及关于 ElementPlus 中的 el-table 与 el-pagination 的深入使用。本次项目以文章（axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联

    2024年02月06日
    浏览(46)

  • 如何快速使用Vue3在electron项目开发chrome Devtools插件

    为了方便快速建立项目，我已经写好脚手架，直接clone项目，快速开发 点击快速进入源代码 拉取代码 安装依赖 运行项目 打包项目 打开chrome://extensions/，打开开发者模式，直接把打包产物拖到窗口即可 具体代码进入源代码 主要使用我另外开发的插件chrome-extension-ipc实现通讯

    2024年02月06日
    浏览(40)
  • vue3使用flv.js播放推流视频，完整版组件

    vue3使用flv.js播放推流视频，完整版组件

    目录 前言 1、构建 2、销毁 3、断流、卡顿重连 4、报错、停滞重连 5、累计延时处理 6、手动全屏 前言 本人是在vue3中使用flv.js处理推流时，遇到的一些问题，以及处理办法，归纳总结为一个组件，仅限于推流使用。 目前只贴出部分关键代码，若需要完整的代码，请往github下

    2024年02月16日
    浏览(42)

  • 使用vite-plugin-qiankun插件， 将应用快速接入乾坤（vue3 vite）

    qiankun官网 vite-plugin-qiankun插件github地址：vite-plugin-qiankun 1、安装乾坤 2、在主应用中注册微应用（main.ts） 3、挂载 在App.vue挂载微应用节点 1、安装插件 qiankun目前是不支持vite的，需要借助插件完成 2、修改vite.config.ts 3、修改main.ts

    2024年02月13日
    浏览(46)

  • vue3中使用Three.js及ROS2绘制机器人3D图形

    要实现机器人3D位置的显示，你需要使用ROS2和Vue3结合开发。 首先，在Vue3中创建一个3D场景，你可以使用Three.js库来创建。Three.js是一个用于创建和渲染3D图形的JavaScript库，可以轻松创建3D场景、3D对象、光线等。 接下来，在Vue3中使用ROS2提供的 roslibjs 库，订阅机器人的位置信

    2024年02月03日
    浏览(48)
  • vue3 快速入门系列 —— vue3 路由

    vue3 快速入门系列 —— vue3 路由

    在vue3 基础上加入路由。 vue3 需要使用 vue-router V4 ，相对于 v3，大部分的 Vue Router API 都没有变化。 Tip ：不了解路由的同学可以看一下笔者之前的文章：vue2 路由 参考：vue2 路由官网、vue3 路由官网 在 Vue Router API 从 v3（Vue2）到 v4（Vue3）的重写过程中，大部分的 Vue Router API 都

    2024年04月09日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包