Vue自定义指令
在 Vue 的模板语法中有各种各样的指令： v-show、 v-for、 v-model 等等，除了使用这些指令之外， Vue 也允许自定义自己的指令 在 Vue 中，代码的复用和抽象主要还是通过组件 通常在某些情况下，需要对 DOM 元素进行底层操作，这个时候就会用到自定义指令 自定义指令分为两种 自定义局部指令： 组件中通过 directives 选项，只能在当前组件中使用 自定义全局指令： app 的 directive 方法，可以在任意组件中被使用 案例演示实现案例: 当某个元素挂载完成后可以自定获取焦点 实现方式一：使用默认的实现方式 实现方式二：自定义一个 v-focus 的局部指令 实现方式三：自定义一个 v-focus 的全局指令 方式一: 默认实现 方式二: 局部自定义指令自定义一个 v-focus 的局部指令, 只需要在组件选项中使用 directives 即可 它是一个对象，在对象中编写自定义指令的名称（注意：这里不需要加 v-） 自定义指令有一个生命周期, 是在组件挂载后调用的 mounted, 可在其中完成操作 <script> ...
Vue Composition API
Options API 的弊端在 Vue2 中，编写组件的方式是 Options Api Options API 的一大特点就是在对应的属性中编写对应的功能模块 比如 data 定义数据、 methods 中定义方法、 computed 中定义计算属性、 watch 中监听属性改变，也包括生命周期钩子 这种代码有一个很大的弊端: 实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中 组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散 组件的代码是难以阅读和理解的 Composition API 的思想就是: 将同一个逻辑关注点相关的代码收集在一起 认识 Composition APIVue2 是面向对象编程, Vue3 是函数式编程 所有的代码都写在 setup 函数 代码演示: App.vue <template> <div class="app"> <!-- template中ref对象自动解包 --> <h2>当前计数: {{ ...
Vue插槽
概述在开发中，我们会经常封装一个个可复用的组件, 比如通过 props 传递给组件一些数据，让组件来进行展示 但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的 div、 span 等等这些元素 比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片 应该让使用者可以决定某一块区域到底存放什么内容和元素 例如: 定制一个通用的导航组件 - NavBar 这个组件分成三块区域： 左边-中间-右边，每块区域的内容是不固定 左边区域可能显示一个菜单图标，也可能显示一个返回按钮，可能什么都不显示 中间区域可能显示一个搜索框，也可能是一个列表，也可能是一个标题，等等 右边可能是一个文字，也可能是一个图标，也可能什么都不显示 这个时候就可以来定义插槽 slot 插槽的使用过程其实是抽取共性、预留不同 将共同的元素、内容依然在组件内进行封装 同时会将不同的元素使用 slot 作为占位，让外部决定到底显示什么样的元素 定义 Vue 中将 <slot> 元素作为承载分发内容的出口 在封装组件中，使用特殊的元素<s ...
Vue组件通信
存在的问题如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护 组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件 再将这些组件组合嵌套在一起，最终形成我们的应用程序 按照如下的方式进行拆分 各个组件间存在如下关系: App 组件是 Header、 Main、 Footer 组件的父组件 Main 组件是 Banner、 ProductList 组件的父组件 那么这些组件间如何互相通信? 比如 App 可能使用了多个 Header，每个地方的 Header 展示的内容不同，那么我们就需要使用者传递给 Header 一些数据，让其进行展示 又比如我们在 Main 中一次性请求了 Banner 数据和 ProductList 数据，那么就需要传递给它们来进行展示 也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件 总之，在 Vue 项目中，组件之间的通信是非常重要且常见的 父子通信-父传子 父组件传递给子组件： 通过 props 属性 子组件传递给父组件： 通过 $emit 触发事件 P ...
Vue组件
概述面对复杂问题的处理方式 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容 但是，我们人有一种天生的能力，就是将问题进行拆解 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解 组件化也是类似的思想 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了 如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目 可以说整个的大前端开发都是组件化的天下 无论从三大框架（Vue、React、Angular），还是跨平台方案的 Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想 我们需要通过组件化的思想来思考整个应用程序 我们将一个完整的页面分成很多个组件 每个组件都用于实现页面的一个功能块 而每一个组件又可以进行细分 而组件本身又可以在多个地 ...
Vue常见指令2
v-model表单提交是开发中非常常见的功能，也是和用户交互的重要手段 比如用户在登录、注册时需要提交账号密码 比如用户在检索、创建、更新信息时，需要提交一些数据 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用 v-model 指令来完成 v-model 指令可以在表单 input、textarea 以及 select 元素上创建双向数据绑定 会根据控件类型自动选取正确的方法来更新元素 v-model 本质其实是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理 <div id="app"> <!-- 1.手动的实现了双向绑定 --> <!-- <input type="text" :value="message" @input="inputChange"> --> <!-- 2.v-model实现双向绑定 --> <!-- <input type="text&q ...
Vue侦听器
开发中我们在 data 返回的对象中定义了数据，这个数据通过插值语法等方式绑定到 template 中 当数据变化时，template 会自动进行更新来显示最新的数据 但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器 watch 来完成 代码演示: <body> <div id="app"> <h2>{{message}}</h2> <button @click="changeMessage">修改message</button> </div> <script src="../lib/vue.js"></script> <script> // Proxy -> Reflect // 1.创建app const app = Vue.createApp({ // data: ...
Vue计算属性
在模板中可以直接通过插值语法显示一些 data 中的数据 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示 比如我们需要对多个 data 数据进行运算、三元运算符来决定结果、数据进行某种转化后显示 在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算 在模板中放入太多的逻辑会让模板过重和难以维护 并且如果多个地方都使用到，那么会有大量重复的代码 演示代码: <body> <div id="app"> <!-- 插值语法表达式直接进行拼接 --> <!-- 1.拼接名字 --> <h2>{{ firstName + " " + lastName }}</h2> <h2>{{ firstName + " " + lastName }}</h2> <h2& ...
Vue常见指令
v-bind一系列指令，主要是将值插入到模板内容中, 但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定 比如动态绑定 a 元素的 href 属性 比如动态绑定 img 元素的 src 属性 绑定属性用法使用 v-bind： 缩写成：**:** 预期：any (with argument) | Object (without argument) 参数：attrOrProp (optional) 修饰符 .camel - 将 kebab-case attribute 名转换为 camelCase 用法：动态地绑定一个或多个 attribute，或者一个组件 prop 到表达式 绑定基本属性可以绑定一个或多个属性值，或者向另一个组件传递 props 值 比如图片的链接 src、网站的链接 href、动态绑定一些类、样式等等 v-bind 有一个对应的语法糖，也就是简写方式 在开发中，我们通常会使用语法糖的形式，因为这样更加简洁 <!-- 1.绑定img的src属性 --><img v-bind:src="showImgUrl" ...
Vue模板语法
模板语法React 使用的 jsx，所以对应的代码都是编写的类似于 js 的一种语法, 之后通过 Babel 将 jsx 编译成 React.createElement 函数调用 Vue 也支持 jsx 的开发模式 但是大多数情况下，使用基于 HTML 的模板语法 在模板中，允许开发者以声明式的方式将 DOM 和底层组件实例的数据绑定在一起 在底层的实现中， Vue 将模板编译成虚拟 DOM 渲染函数 Mustache胡子, 又称双大括号语法, 或者插值语法 如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache” 语法 (双大括号) 的文本插值 data 返回的对象是有添加到 Vue 的响应式系统中 当 data 中的数据发生改变时，对应的内容也会发生更新 Mustache 中不仅仅可以是 data 中的属性，也可以是一个 JavaScript 的表达式 演示: <div id="app"> <!-- 1.基本使用 --> <h2>{{ message } ...