Vue小知识大杂烩

一、Vue组件的三大部分:template、Script、Style

  • template --> 组件的模板结构 写html的地方

注意:<template> 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素。

  • script -> 组件的js行为

开发者可以在 < script> 节点中封装组件的 JavaScript 业务逻辑。< script > 节点的基本结构如下:

javascript 复制代码
<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:

插槽:写在子组件的代码,供父组件使用的占位符

分为:

  1. 默认插槽:
  2. 具名插槽:slot指定name
  3. 作用域插槽:子组件指明使用什么数据,并传给插槽使用者

在表格里使用插槽,通过 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

相关推荐
牧羊狼的狼26 分钟前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one2 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830944 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮4 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常5 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip5 小时前
JavaScript事件流
前端·javascript