vue3教程

返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。

创建组件

或者是一个 setup 函数，函数名称将作为组件名称来使用

创建一个异步加载组件

// 高阶组件

在当前应用中查找组件， 只能在 render 或 setup 函数中使用。

查找组件

在当前应用中查找指令， 只能在 render 或 setup 函数中使用。

将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

vue2x的生命周期

vue3的生命周期

与 2x 版本生命周期相对应的组合式 API

新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

问题: reactive 对象取出的所有属性值都是非响应式的

解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

利用ref函数获取组件中的标签元素

功能需求: 让输入框自动获取焦点

很多刚开始使用v-on的键盘事件时，经常会碰到明明添加了@keyup按键名/值，却没有起作用，（小鸡不尿尿，各有各的道），其实不是没有起作用，而是元素没有获取焦点导致的。

比如把 keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件。点击之后，焦点就在按钮上，所以这时按空格键有效。

思路：

1通过拖拽实现：可以使用vue-draggable组件实现，可以实现拖拽排序；

2通过点击按钮实现：可以在每个输入框后面添加上移和下移的按钮，点击按钮实现调整顺序；

3通过键盘快捷键实现：可以在输入框获取焦点的时候，添加上键盘快捷键，比如Ctrl+上下箭头，实现调整顺序。

Vue 中提供了14个比较常用的指令，如

1v-model ：双向数据绑定，

表单元素常用 input select radio checkbox textarea 等，v-model有三个修饰符，例如input元素 v-modeltrim去掉输入值的前后空格和v-modelnumber，将输入的字符串转换为number,v-modellazy 输入的数据不再实时更新，而是数据失去焦点的时候再更新输入的数据

2v-show： 元素的显示和隐藏，

频繁 *** 作元素的显示和隐藏，就用v-show ,原理是 *** 作的dom 的css样式 display的值是true还是false

3v-if：

元素的显示和隐藏，原理是，是否创建元素的dom,例如表格中某条数据是否显示编辑，删除按钮，由后台传的数据解决的，这种不频繁 *** 作的情况可用v-if，v-if 可以加入template标签中判断 v-show 不可以

4v-else ： 和v-if 搭配使用

5v-else-if ：条件满足v-if ？

不满足判断v-else-if 如果还不满足直接走v-else 这个的使用方式和我们的js 中的 if ，else if() ，else 是类似的使用方式

6v-bind： 绑定

v-bind:class v-bind:style v-bind:attribute v-bind可以省略成：最后写成 ：class :style :attribute

7v-on ：绑定常用事件

下面的常用事件去掉on 改为@click：点击某个对象时触发@clickondblclick：双击某个对象时触发@dblclickonmouseover：鼠标移入某个元素时触发@mouseoveronmouseout：鼠标移出某个元素时触发@mouseoutonmouseenter：鼠标进入某个元素时触发@onmouseenter

8v-for：项目中常用循环数组的指令。

9v-html ：将字符串html 转换为结构显示，

项目中基本不这种方式去处理，涉及到安全性问题

10v-text：防止为了{{}} 闪烁问题 项目不常用

11v-once： 指令指的是元素仅仅绑定一次，只是渲染一次

12v-cloak：指的是cloak 等元素编译结束以后才会显示dom

13v-pre :跳过当前元素及子元素的编译过程，先进行编译

14v-slot：插槽

将绑定点击事件那个方法删除不就可以了么，比如说你在button上绑定了一个点击事件如下： 然后就是js代码里面的 function dj(self){ alert("单击事件响应"); } 上面就是一个完整的单击事件的绑定过程 如果你后面不想要这个单击事件了你就把button

也就是说当元素设置 contenteditable 为true 那么当前元素可编辑

注意：此时该元素获取焦点时，该元素就可以进行编辑，和输入框一样的效果，但是它的值不是value而是innerText/innerHtml

在canvas上绘制文字时，我们需要实时绘制当前输入内容，刚开始使用场景是利用动态创建input元素，input获取焦点输入文字，当input失去焦点时绘制当前input的内容，功能可以实现，唯一不足就是我们需要输入框的大小按照输入内容的长度改变，使用input明显不太方便，可以使用动态改变size属性，如果输入的字母，数字，符合可以实现，当时如输入汉字的就会有问题，我们知道span等行内元素可以根据文字长度改变元素大小，所以，我们使用动态创建span标签，设置contenteditable="true",然后设置相应的样式，就可以模仿input输入框的效果

温馨提示：

1以上写法，仅仅适应页面上input框位置固定的情况下写的，如果页面上的部分input框存在增删的情况，则可能不适用，需要加以修改

2以上写法是针对vue页面写的，ref属性也是vue里面获取dom元素的方法，如果你们项目不是vue写的，也可设置id属性或者其他的，反正原理就是让dom元素依次往下排，让数组里面的数据和dom元素名称对应起来

以上就是关于vue3教程全部的内容，包括:vue3教程、vue键盘事件不生效、vue多个输入框调整顺序等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！