一、学习资料参考

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:

【VUE】VUE相关学习和知识备份的更多相关文章

  1. Vue 超快速学习

    Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeD ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. vue的相关知识

    一.DOM vs 函数库 vs框架 DOM:  API繁琐 函数库:JQuery对DOM的每个步骤的API进行一对一的简化,但并没有改变DOM做事的步骤和方法. 框架:一个包含部分已经实现的功能的半成 ...

  4. Vue源码学习1——Vue构造函数

    Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...

  5. vue 和 react 学习 异同点

    vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...

  6. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  7. 两万字Vue.js基础学习笔记(二)

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  8. NodeJS,MongoDB,Vue,VSCode 集成学习

    NodeJS,MongoDB,Vue,VSCode 集成学习 开源项目地址:http://www.mangdot.com

  9. Vue源码学习三 ———— Vue构造函数包装

    Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...

随机推荐

  1. 常用排序算法及Java实现

    概述 在计算器科学与数学中,一个排序算法(英语:Sorting algorithm)是一种能将一串数据依照特定排序方式进行排列的一种算法.本文将总结几类常用的排序算法,包括冒泡排序.选择排序.插入排序 ...

  2. java基础讲解08-----类和对象

    1.什么是面向对象? 面向对象设计的实质 就是对现实世界的对象进行建模操作. 现实的生活中,随处可见的一种事物就是对象,对象是事物存在的实体,通常我们将会对对象划分为两个部分,静态部分和动态部分.比如 ...

  3. git问题:git提交的时候总是提示key加载失败,总是需要手工将key加到Pageant中

    问题描述: 重装过一次系统,在重装之前git+tortoisegit配合很好,提交的时候都能自动加载ppk,但是重装系统后,也重新生成pulic key上传到了服务器,但是每次提交的时候都提示key加 ...

  4. Atitit. 衡量项目规模 ----包含的类的数量 .net java类库包含多少类 多少个api方法??

    Atitit. 衡量项目规模 ----包含的类的数量 .net java类库包含多少类 多少个api方法?? 1 framework 4.5 (10万个api)1 2 Jdk8   57M1 3 Gi ...

  5. pair + map 函数结合使用

    题目链接:codeforces 44A5birch yellowmaple redbirch yellowmaple yellowmaple green 4 3oak yellowoak yellow ...

  6. 1.2 Activity

    Activity是个应用组件,它给用户提供了为了完成某些工作而可以进行交互操作的界面,例如,电话详情,打电 话,发邮件,或是浏览地图.每一个Activity都有一个窗口来绘制自已的用户界面.通常来说, ...

  7. spring 使用注解来调度定时任务

    配置自动调度的包 @Configuration @ComponentScan(basePackages = "com.test.indexer.service") public c ...

  8. ActiveMQ 无法启动 提示端口被占用 解决方案

    http://bob-zhangyong.blog.163.com/blog/static/17610982012729113326153/ ————————————————————————————— ...

  9. android Bitmap用法总结(转载)

    Bitmap用法总结1.Drawable → Bitmappublic static Bitmap drawableToBitmap(Drawable drawable) {Bitmap bitmap ...

  10. datagrid 溢出文本显示省略号

    .datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{ -o-text- ...