Vue基础

Vue

vue官网学习笔记

css预处理器

一种专用编程语言，用于生成css文件

sass：基于Ruby，通过服务端处理

less：基于NodeJS，通过客户端处理，使用简单

WebPack

模块打包器，主要作用是打包、压缩、合并及按序加载

vue基础

用于构建用户界面的渐进式框架，可以自底向上逐层应用，Vue核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。

是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ICE

应用与组件实例

根组件

const RootComponent = { //创建根组件
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)//用根组件创建应用实例，也可以直接创建
const vm = app.mount('#app')//将实例挂载到根DOM，返回根组件实例

组件实例属性

• vue常用七个属性

  • el："#app",——指示vue编译器从什么地方开始解析 vue的语法，将该实例与前端DOM绑定，两种方法？

  • data：用来组织从view中抽象出来的属性，数据

  • template：用来设置模版，会替换页面元素

  • methods：业务逻辑，方法

  • render：创建真正的Virtual DOM

  • computed：计算，处理复杂业务逻辑

  • watch：监听属性，通过watch来响应数据的变化

• 组件实例暴露了一些内置 property，如 $attrs 和 $emit。这些 property 都有一个 $ 前缀

生命周期钩子

• 每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会
• 生命周期钩子的 this 上下文指向调用它的当前活动实例。
• 不要在选项 property 或回调上使用箭头函数，因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BgxFXuKD-1624780437872)(https://v3.cn.vuejs.org/images/lifecycle.svg)]

模版语法

插值

• 文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，通过使用 v-once 指令]，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

• 原始html：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

• Attribute：Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令

• 使用 JavaScript 表达式

指令

• 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
• 参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示
  • v-bind 指令可以用于响应式地更新 HTML attribute
  • v-on 指令用于监听 DOM 事件
• 动态参数：从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
  • 动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告
  • 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的
• 修饰符：修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

缩写

• v-bind:attri = :attri
• v-on:click = @click

Data Property和方法

• 组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来

console.log(vm.$data.count) // 对象访问
console.log(vm.count)       // 通过实例暴露

• 直接将不包含在 data 中的新 property 添加到组件实例是可行的。但由于该 property 不在背后的响应式 $data 对象内，所以 Vue 的响应性系统不会自动跟踪它。

• Vue 使用 $ 前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留 _ 前缀

• 从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程？？？

防抖函数？？？

计算属性和侦听器

计算属性

• 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。在内存中计算。虚拟DOM。缓存。
• 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数
• 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

侦听器？？？

• Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
• 使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的

class与Style绑定

• 在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或数组
• :class 指令也可以与普通的 class attribute 共存
• 可以绑定一个返回对象的计算属性，这是一个常用且强大的模式
• 我们可以把一个数组传给 :class，以应用一个 class 列表
• 当你在带有单个根元素的自定义组件上使用 class attribute 时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖
• 如果你的组件有多个根元素，你需要定义哪些部分将接收这个类

条件渲染

• v-if v-else-if v-else
• v-show
  • 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display
  • v-show 不支持 <template> 元素

列表渲染

• 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引
• 可以用 of 替代 in 作为分隔符
• 可以用 v-for 来遍历一个对象的 property
  • 可以提供第二个的参数为 property 名称 (也就是键名 key)
  • 可以用第三个参数作为索引
• 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值

数组更新检测

• 变更和替换（非变更方法，返回新数组）都不会丢弃原来的DOM，只会更新

显示过滤/排序后的结果

• 可以使用计算属性或方法

连用

• 不推荐在同一元素上使用 v-if 和 v-for
• 当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量

在自定义组件上使用

• 任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props

事件处理

内联处理器中的方法？？？

多事件处理器

• 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔

事件修饰符

建议方法只有纯粹的数据逻辑，事件修饰符处理 DOM 事件细节。饰符是由点开头的指令后缀来表示的。修饰符可以串联。可以只有修饰符。

• @click.stop=... 阻止单击事件继续传播
• .prevent 阻止
• .capture 捕获方式
• .self 表示元素自身
• .once 点击事件将只会触发一次。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上
• .passive 立即触发，尤其能够提升移动端的性能

按键修饰符

• 可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符

• Vue 为最常用的键提供了别名：

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

系统修饰键

• 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

  • .ctrl
  • .alt
  • .shift
  • .meta

  <!-- Alt + Enter -->
  <input @keyup.alt.enter="clear" />
  

• 请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。

• .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

• 鼠标按钮修饰符

  • .left
  • .right
  • .middle

表单输入绑定

基础用法

• 可以用 v-model 指令在表单 <input>、<textarea>及 <select> 元素上创建双向数据绑定
• v-model 会忽略所有表单元素的 value、checked、selectedattribute 的初始值而总是将当前活动实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值
• 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，推荐提供一个值为空的禁用选项

值绑定

• 把值value绑定到当前活动实例的一个动态 property 上，可以用 v-bind 实现，此外，使用 v-bind 可以将输入值绑定到非字符串

修饰符

• 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步，可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />

• 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number修饰符
• 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

组件基础

• 在典型的 Vue 应用中，我们使用单个文件组件而不是字符串模板
• 组件是带有名称的可复用实例

组件组织

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FEQDSe18-1624780437873)(https://v3.cn.vuejs.org/images/components.png)]

通过 Prop 向子组件传递数据

监听子组件事件

• 父级组件可以像处理原生 DOM 事件一样通过 v-on 或 @ 监听子组件实例的任意事件

• 同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件

• 我们可以在组件的 emits 选项中列出已抛出的事件

使用事件抛出一个值

• 子组件内部使用 $emit 的第二个参数抛出
• 父组件在内联方法中直接通过 $event 访问到被抛出的这个值，若是方法则就是形参

通过插槽分发内容

向一个组件传递内容，可以通过使用 Vue 的自定义 <slot> 元素来实现， <slot> 作为我们想要插入内容的占位符

动态组件

在不同组件之间进行动态切换，可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component :is="currentTabComponent"></component>

currentTabComponent 可以包括

• 已注册组件的名字，或
• 一个组件的选项对象

解析DOM模板时的注意事项

• 有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的

  <table>
    <tr v-is="'blog-post-row'"></tr>//v-is 值应为 JavaScript 字符串文本
  </table>
  //因为table内部只能出现一些特定元素，相当于使用v-is换名

• HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写。这意味着在 DOM 模板中使用时，驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased (横线字符分隔) 等效值

下一节深入组件待学…