VUEVUE相关学习和知识备份

Posted 2021-01-04 buwuliao

一、学习资料参考

1.1、Vue.js

官网：Vue.js https://cn.vuejs.org/

官方文档：介绍 — Vue.js https://cn.vuejs.org/v2/guide/

API 参考：API — Vue.js https://cn.vuejs.org/v2/api/

附：vue.js（1.0版本） https://v1-cn.vuejs.org/ （教程和API自行寻找）

1.2、Vue Router 学习和理解：

官方文档：介绍 | Vue Router https://router.vuejs.org/zh/

API 参考：API 参考 | Vue Router https://router.vuejs.org/zh/api/

1.3、菜鸟教程：

Vue.js 教程 | 菜鸟教程 http://www.runoob.com/vue2/vue-tutorial.html

二、主要笔记理解和整理

注：此部分仅用于自己整理理解。对其他人可能不适用。请知悉~~

使用：具体可参考菜鸟教程实例：

大致就是

• 每个 Vue 应用都需要通过实例化 Vue 来实现。当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当属性值发生改变，html 视图也会产生相应的变化。
  • 实例化的时候，需要绑定对应的资源（el 参数）；
  • 还有data数据：（data 用于定义属性。{{ }} 用于输出对象属性和函数返回值。）
  • 以及methods方法：（ methods用于定义的函数，可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。）

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。（这些就相当于Vue内置的方法了，和一些框架，jar包呀什么的，其他什么的区别不大）

2.1 Vue.js 模板语法

就是说：

• 如果直接以{{ }} 调用，那么数据相当于实际是以字符串的形式展示。
  • 对于{{ }} ：里面可直接放入js表达式，也可放入VUE中声明的属性和方法。如果没有被声明，大概会报错
  • 对于v-的一些指令，里面也可以直接放入表达式。同时，里面的变量名如果已被声明，那么会展示对应的值；如果未被声明，以字符串展示。
• 如果要，以html的方式展示，需使用 v-html 指令；

2.1.1 修饰符

修饰符是以半角句号.指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。

例如，.prevent修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

2.2.2 指令和语句：

指令后的字符串必须是VUE中声明的属性或方法。

v-on 指令，它用于监听 DOM 事件。缩写：@

v-bind 指令被用来响应地更新 HTML 属性。缩写：：

v-model 指令来实现双向数据绑定：

---

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

v-else 指令：给 v-if 添加一个 "else" 块；

v-else-if： 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用。

---

v-show：根据条件展示元素

v-for 指令：要以 (value, key, index) in sites [key和index可选]形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。（）

• 可以迭代数组
• 也可以迭代对象
• 迭代整数

2.2.3 过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符" |指示。

过滤器函数接受表达式的值作为第一个参数，第二个过滤器实际是自定义的方法（ javascript 函数），用于对第一个参数进行处理。过滤器可以有多个。

2.2 Vue.js 计算属性

相当于可以根据要扩展get和set方法，并且性能好一点，不然你就只能取到原值了。

计算属性关键词: computed。（实际和一个method差不多，不过这个可以理解为默认是对应对象的get方法，在取值时自动调用。另外你也可以提供一个 setter方法，在赋值时自动调用。对应的实际代码可以见：Vue.js 计算属性 | 菜鸟教程 http://www.runoob.com/vue2/vue-computed.html ）

computed vs methods：效果一样，但 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

2.3 Vue.js 监听属性

Vue.js 监听属性 watch，可以通过 watch 来响应数据的变化

总结：

对于vue的属性，可以理解为是Vue封装的一些最佳实践，通过这些属性，你可以简单方便，高性能的实现想要的功能。大致就是这样

2.4 Vue.js 样式绑定优化：v-bind

2.4.1 v-bind 处理 class 和 style

v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

• 直接绑定字符串（有简单的true和false的功能）；
• 直接绑定对象（对象里和实际的字符串没区别，只是把字符串直接写出来还是放在对象里...）还可以结合对象的计算属性实现更强大的功能具体参考教程
• 直接绑定数组：其实数组里还是一个一个对象...（不过一个数组中可包含多个对象，防止一个对象过大，同时对象也可以互相组合，更加简单）

2.4.2 Vue.js style(内联样式)

在 v-bind:style 里直接设置样式

内联样式的实现和样式差不多，可以使用：字符串，对象，或者数组（一个数组里可以包含多个对象）。

2.5 Vue.js 事件处理器： v-on

2.5.1 v-on 指令

事件监听可以使用 v-on 指令：

on后面可以跟：

• js表达式
• 一个定义的method
• 也可以用内联 JavaScript 语句（是给方法传参的意思么）

2.5.2 事件修饰符

v-on 提供了事件修饰符来处理 DOM 事件细节（修饰符可以串联）

• .stop
• .prevent
• .capture
• .self
• .once

不过修饰符的作用是什么？需看下官方文档。

2.5.3 按键修饰符

具体见文档吧..毕竟很多

2.6 Vue.js 表单

2.6.1 表单控件：见原文。

v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

意思即使：表单通过v-model 绑定了一个VUE里面的数据，如果表单上的数据变了，VUE里面的数据同步改变。而vue里面数据的改变，会导致html页面立即刷新的感觉么。如果多个表单使用v-model绑定同一个VUE里面的数据，那么任何一个改变，其他所有都会同步改变。好神奇呀。

不过v-model 绑定的对应事件，好像是对应的表单已经定义好的选中事件，并不是自己可以随便定义的那些。

2.6.2 修饰符

• .lazy：在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
• .number：如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
• .trim：如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

2.7 Vue.js 组件

组件可以扩展 HTML 元素，封装可重用的代码。

2.7.1 基本使用：

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

组件的template属性是组件的内容。组件是可以复用代码的意思。

2.7.2 全局组件

所有地方都可以用。

2.7.3 局部组件

需在一个Vue对象里声明，则只会在Vue对象绑定的html元素里使用

// 创建根实例
new Vue({
  el: ‘#app‘,
  components: {
    // <runoob> 将只在父模板可用
    ‘runoob‘: Child
  }
})

2.7.4 Prop

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。

意思就是：使用组件时，可以传入一个参数，或者赋值给对象等。然后在组件的template内，使用传入的数据（不过使用前需要先用prop属性获取对应的数据）。大概是这个意思。

2.7.5 动态 Prop

（prop 单向绑定：父组件属性变化将传导给子组件，但不会反过来。）

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

大概就是：在组件中可以使用 v-bind指令来传入对应的值，如果 v-bind 指令绑定的对象值发生了改变，那么对应的组件里的值也会发生改变

2.7.6 Prop 验证

组件可以为 props 指定验证要求。

当 prop 是一个对象而不是字符串数组时，它包含验证要求。

即：当prop是字符串数组，他就是简单的获取值的意思。如果prop 是一个对象，那么对于获取到的值，自动包含验证功能，实现可以参考：{prop:{ }}。里面的中括号可以包含验证（即验证方法）的基本要求。比如数据类型验证，是否必须，默认值，以及方法实现等，还可以有。

type 可以是下面原生构造器

• String
• Number
• Boolean
• Function
• Object
• Array

type 也可以是一个自定义构造器，使用 instanceof 检测。

2.7.7 自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

大概的意思就是：在父组件上用 v-on 绑定一个自定义事件，事件有自己的执行方法逻辑。当子组件改变时，可以在自己的方法里，手动调用$emit(eventName)来触发事件，调用父组件对应的方法逻辑，实现功能。

为什么要叫自定义事件恩，因为就是单纯实现这种功能而实现的一个自定义事件。

2.8 Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

2.8.1 全局指令

Vue.directive() 方法：

2.8.2 局部指令

和局部组件很类似。在Vue实例内部注册。使用directives属性。

2.8.3 钩子

2.8.3.1 钩子函数

指令定义函数提供了几个钩子函数（可选）

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。

2.8.3.2 钩子函数的参数（每个钩子函数都有且自动获取的参数）

钩子函数的参数有：

• el: 指令所绑定的元素，可以用来直接操作 DOM 。
• binding: 一个对象，包含以下属性：
  • name: 指令名，不包括 v- 前缀。
  • value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
  • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 编译生成的虚拟节点。
• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

注意：有时候我们不需要其他钩子函数（即只有一个时），我们可以简写函数。即当钩子函数只有一个时，可以用简化的预发。

2.9 Vue.js 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

vuejs/vue-router: ?? The official router for Vue.js. https://github.com/vuejs/vue-router （源码相关的git项目）

介绍 | Vue Router https://router.vuejs.org/zh/ （中文的官方文档奥）

2.10 Vue.js 过渡 & 动画

2.10.1 过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

2.10.2 语法格式

<transition name = "nameoftransition">
   <div></div>
</transition>

大致理解为，使用transition标签，用name制定前缀，然后以name开头定义一些特定的CSS，实现过渡效果。

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

• v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
• v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
• v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
• v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

2.10.3 CSS 过渡

通常我们都使用 CSS 过渡来实现效果。

2.10.4 CSS 动画

CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

2.10.5 自定义过渡的类名

我们可以通过以下特性来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用。

自定义过渡类名的语法：标准格式在前，name名在后。

2.10.6 JavaScript 钩子

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

所谓的JavaScript 钩子是指：不使用制定的CSS格式，而是使用v-on调用函数方法，然后在JS函数方法中，通过对象给Dom赋值CSS样式，实现过渡效果。

2.10.7 初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡。和其他的enter，leave等很类似。

这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。

自定义 JavaScript 钩子：

2.10.8 多个元素的过渡

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

三、结束