【VUE】VUE相关学习和知识备份

2018/09/04 15:05
阅读数 17

一、学习资料参考

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 在处理 classstyle 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

  • 直接绑定字符串(有简单的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: 指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    • 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: 上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

注意:有时候我们不需要其他钩子函数(即只有一个时),我们可以简写函数。即当钩子函数只有一个时,可以用简化的预发。

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 为了效率只会替换相同标签内部的内容。

三、结束

展开阅读全文
打赏
0
0 收藏
分享
加载中
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部