本文主要是介绍Vue小知识大杂烩，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、Vue组件的三大部分：template、Script、Style
-
template --> 组件的模板结构 写html的地方
注意：<template> 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。
- script -> 组件的js行为
开发者可以在 < script> 节点中封装组件的 JavaScript 业务逻辑。< script > 节点的基本结构如下：
<script>
//今后，组件相关的data数据、methods方法等，都需要定义到export default所导出的对象中。
export default {data () {return {},
}
</script>vue中组件中data为什么必须是函数？
应为对象为引用类型，当重用组件时由于数据对象指向同一个data时，其他重用组件中的data同时会被修改，而使用返回对象的函数，由于每次都返回一个新视频，实例之间数据互不影响。
- style --> 组件的样式
开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构
二、： @ $ #
1. ：是v-bind的简写 用于绑定数据和元素属性
冒号":" （v-bind) 区分与v-model
Vue中有2种数据绑定的方式
- 单向绑定v-bind数据只能从 data 流向页面
- 双向绑定v-model数据不仅能从 data 流向页面，还可以从页面流向 data
2.@ 是v-on的简写 给标签绑定事件
如果我们想监听用户的点击、拖拽、键盘事件等就可以加上@
下图所示：给按钮添加@click监听点击事件，点击对应按钮就能调用方法
@click后面还可以加扩展参数：事件修饰符
- @click.prevent 阻止浏览器默认行为(@click.prevent="clickFn")
- @click.stop 阻止冒泡(@click.stop="clickFn")
- @click.once 事件只触发一次（常用）
- @click.capture：使用事件的捕获模式
- @click.self：只有event.target是当前操作的元素时才触发事件。
- @click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件
- @click.passive 事件的默认行为立即执行，无需等待事件回调执行完毕
@ 用在按键上：按键修饰符
.enter 回车(@keyup.enter="keyupFn")
.esc (@keyup.esc="keyupFn")
3. $ Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ 。
4. # 是v-slot的缩写，插槽所使用的指令；
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
插槽：写在子组件的代码，供父组件使用的占位符
分为：
- 默认插槽：
- 具名插槽：slot指定name
- 作用域插槽:子组件指明使用什么数据，并传给插槽使用者
在表格里使用插槽，通过 scop.row.属性名 可以拿到某一行数据，如下图
三、v-if与v-show都可以控制元素的显隐
v-if：根据表达式的真假。切换元素显示和隐藏
v-show：通过css的display:none实现，可用在展开详情、折叠控制面板。
四、其他
ref:vue提供的一种机制，在模板中给元素或者子组件注册引用信息，引用信息将会注册在父组件的$ref上。
neaxTick() :回调函数，延迟执行。简单理解，放在neaxTick中的操作不会立刻执行，而是等数据更新，DOM更新完成后再执行。
vue中有哪几种类型？
js数据类型分为两类基本数据类型和引用类型
基本：String、Boolean、Number、null、undefined、Symbol
引用：Object、function、Array
这篇关于Vue小知识大杂烩的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
