Vue3 demo初体验笔记 -Vue3跟Vue区别

时间:2021-2-20 作者:admin

zhuanlan.zhihu.com/p/184903118

先挂上giuhub地址,用Vue3做个ui库,欢迎star,佛系更新

Github:JamesLHY/vue3-ui

官网:Vite App

1.Vue 3 的 Template 支持多个根标签,Vue 2 不支持

2.Vue 3 有 createApp(),而 Vue 2 的是 new Vue()

createApp(组件),new Vue({template, render})

3.新 v-model 代替以前的 v-model 和 .sync

4.新增 context.emit,与 this.$emit 作用相同,前者卸载setup(){}里面,后者写在methods里面

未完待续

继续更新

修改标题了

5.Vue 3 属性绑定

默认所有属性都绑定到根元素

使用 inheritAttrs: false 可以取消默认绑定

使用 $attrs 或者 context.attrs 获取所有属性

使用 v-bind=”$attrs” 批量绑定属性

使用 const {size, level, …xxx} = context.attrs 将属性分开

6.props V.S. attrs

props 要先声明才能取值,attrs 不用先声明

props 不包含事件,attrs 包含

props 没有声明的属性,会跑到 attrs 里

props 支持 string 以外的类型,attrs 只有 string 类型

未完待续

我又来了,更新了dialog组件

7.新组件Teleport

可以包裹住template,免受层叠上下文的影响,例子:

<div class='1' style='z-index:1'>
  <div>111</div>
</div>
<div class='2' style='z-index:2'></div>

如上例子,因为div2 的z-index 大于 div1 ,所以div1里面的111会被挡住。

vue3出了个新东西,Teleport

<Teleport to='body'>
<div class='1' style='z-index:1'>
   <div>111</div>
 </div>
 <div class='2' style='z-index:2'></div>
</Teleport>

用它包裹住加上参数to,可以使里面的内容自动加在to的下面,例子里就是加在body的下面,因此111会显示出来。

8.v-slot

vue3出了个新语法,可以在template后面加上参数 v-slot ,例子:

DialogDemo.vue

 <template v-slot:title>
 <strong>加粗的标题</strong>
 </template>

<template v-slot:content>
 <strong>hi</strong>
 <div>hi</div>
 </template>

Dialog.vue

<slot name="title"/>

<slot name="content"/>

在Dialog.vue里面申明slot的name,即可在DialogDemo.vue的template加上v-slot,里面标签很自由。

未完待续

好了我又来了
做的是tab组件,有兴趣的可以去上面的GitHub地址看看,总结了以下几点:

9.用 JS 获取插槽内容

const defaults = context.slots.default()

10.钩子

onMounted / onUpdated / watchEffect

前两者跟着前差不多

watchEffect介绍:

To apply and_automatically re-apply_ a side effect based on reactive state, we can use thewatchEffectmethod. It runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

Computed and Watch | Vue.js​v3.vuejs.org

功能就是类似把onMounted和onUpdated结合起来了

11.Typescript泛型

const indicator = ref <HTMLDivElement> (null)

可以通过 <> 给元素定型

12.获取宽高和位置

const { width, left } = el.getBoundingClientRect()

通过 getBoundingClientRect 获取元素的left,right,width,height

13.ES 6 析构赋值的重命名语法

const { left: left1 } = x. getBoundingClientRect()
const { left: left2 } = y. getBoundingClientRect()

es6析构赋值语法,可以通过用: 对相同类的给他起个新名字

以上就是关于tab组件的总结了,感觉跟vue3新语法有点偏离了,那就顺便也当作学一下es6跟ts吧

未完待续下次见

好家伙,我回来了。最近差不多把这个轮子造完了,官网装修也差不多了,不过也在debug中。

官网网址:Vite App

GitHub网址:JamesLHY/vue3-ui

有兴趣的朋友可以看看,如果有什么建议的话,欢迎提issue哦。

下面是官网的截图

特此感谢

[@方应杭](https://www.zhihu.com/people/b90c7eb6d3d5a4e2ce453dd8ad377672)

提供的牛逼的教程

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。