「学习笔记」Vue 官方视频教程 2.0版
文章目录
- Vue 实例
- 数据与方法
- 生命周期钩子
- 模版语法
- 插值
- 指令(directives)
- 缩写
- v-bind 缩写
- v-on 缩写
- 计算属性和监听器【【没看】】
- Class 与 Style 绑定
- 绑定 HTML Class
- 绑定内联样式 Style
- 条件渲染
- v-if
- v-show
- v-if vs v-show
- v-if 与 v-for 一起使用
- 列表渲染
- 用 v-for 把一个数组对应为一组元素
- 在 v-for 里使用对象
- 维护状态 【【没太懂】】
- 事件处理
- 事件监听
- 事件处理方法
- 表单输入绑定
- 组件基础
- 组件的复用
- Prop
- Prop 的大小写
- Prop 类型
- 传递静态或动态Prop
- 单项数据流
- Prop 验证
- 非 Prop 的 Attribute
- 自定义事件
- 事件名
- 插槽
- 动态组件&异步组件
- 处理边界情况
Vue 实例
数据与方法
只有当实例被创建时就已经存在于 data
中的 property 才是响应式的。
Object.freeze()
,这会阻止修改现有的 property,也意味着响应系统无法再追踪变化。
Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀
$
,以便与用户定义的 property 区分开来。
var data = { a: 1 }
var vm = new Vue({el: '#example',data: data
})vm.$data === data // => true
vm.$el === document.getElementById('example') // => true// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {// 这个回调将在 `vm.a` 改变后调用
})
生命周期钩子
- 不要在选项 property 或回调上使用箭头函数
模版语法
插值
文本
通过使用v-once
指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:原始 HTML
为了输出真正的 HTML,你需要使用 v-html 指令:
你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
Attribute
Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用v-bind
指令:
对于布尔 attribute (它们只要存在就意味着值为true
),v-bind
工作起来略有不同,在这个例子中:<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false,则 disabled attribute 甚至不会被包含在渲染出来的 元素中。
注意:这里与 JavaScript 中的 falsy 值(''
、0
、null
、undefined
、NaN
)有区别。使用 JavaScript 表达式
有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如
Math
和Date
。你不应该在模板表达式中试图访问用户定义的全局变量。
指令(directives)
指令 (Directives) 是带有 v-
前缀的特殊 attribute。指令 attribute 的值预期是**单个 JavaScript 表达式 **(v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
参数
v-bind
指令可以用于响应式地更新 HTML attribute:
v-on
指令,它用于监听 DOM 事件。动态参数(2.6.0 新增)
<!--
注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
- 修饰符(modifier)
修饰符 (modifier) 是以半角句号.
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
缩写
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a><!-- 缩写 -->
<a :href="url">...</a><!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a><!-- 缩写 -->
<a @click="doSomething">...</a><!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
:
与 @
对于 attribute 名来说都是合法字符,在所有支持 Vue 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。
计算属性和监听器【【没看】】
Class 与 Style 绑定
绑定 HTML Class
对象语法
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:data: {isActive: true,error: null }, computed: {classObject: function () {return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}} }
数组语法
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:用在组件上
这个章节假设你已经对 Vue 组件有一定的了解。当然你也可以先跳过这里,稍后再回过头来看。
绑定内联样式 Style
对象语法
v-bind:style
的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。
CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名。
同样的,对象语法常常结合返回对象的计算属性使用。数组语法
v-bind:style
的数组语法可以将多个样式对象(data 上面的)应用到同一个元素上:data: {styleObject: {color: 'red',fontSize: '13px'} }
自动添加前缀
当v-bind:style
使用需要添加浏览器引擎前缀的 CSS property 时,如transform
,Vue.js 会自动侦测并添加相应的前缀。多重值(2.3.0+)
从 2.3.0 起你可以为style
绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染
display: flex
。
truthy 不仅仅是
true
对应JavaScript中的 falsy。
条件渲染
v-if
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
- 在
<template>
元素上使用v-if
条件渲染分组
因为v-if
是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个<template>
元素当做不可见的包裹元素,并在上面使用v-if
。最终的渲染结果将不包含<template>
元素。 - v-else
- v-else-if(2.1.0 +)
- 用
key
管理可复用的元素
v-show
不同 v-if
的是带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS property display。
注意,v-show 不支持
<template>
元素,也不支持v-else
。
v-if vs v-show
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
v-if 与 v-for 一起使用
不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。请查阅列表渲染指南以获取详细信息。
列表渲染
用 v-for 把一个数组对应为一组元素
v-for
还支持一个可选的第二个参数,即当前项的索引。
你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:
<div v-for="item of items"></div>
在 v-for 里使用对象
可以提供第二个的参数为 property 名称 (也就是键名)
还可以用第三个参数作为索引
Notice:多个参数可以不加 ()
包裹。
在遍历对象时,会按
Object.keys()
的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
维护状态 【【没太懂】】
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
attribute:
建议尽可能在使用 v-for 时提供 key attribute。
不要使用对象或数组之类的非基本类型值作为
v-for
的key
。请用字符串或数值类型的值。
事件处理
事件监听
事件处理方法
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
表单输入绑定
尽管有些神奇,但 v-model
本质上不过是语法糖。
在文本区域插值 (<textarea>{{text}}</textarea>
) 并不会生效,应用 v-model
来代替。
- 单选框
如果 v-model
表达式的初始值未能匹配任何选项,<select>
元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change
事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
- 值绑定 没看懂。
组件基础
组件的复用
- data 必须是一个函数。
Prop
Prop 的大小写
Prop 类型
传递静态或动态Prop
单项数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
Prop 验证
非 Prop 的 Attribute
自定义事件
事件名
不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或 property 名,所以就没有理由使用 camelCase 或 PascalCase 了。
因此,事件名用 kebab-case
的形式。
HTML 是大小写不敏感的
插槽
动态组件&异步组件
处理边界情况
「学习笔记」Vue 官方视频教程 2.0版相关推荐
- 「学习笔记」品优购项目-上(页面公共部分 )
「学习笔记」品优购项目-上 品优购项目-上 目标 品优购项目规划 网站制作流程 品优购项目介绍 品优购项目的学习目的 开发工具以及技术栈 开发工具 技术栈 品优购项目搭建工作 创建的文件夹如下(称为项 ...
- 「学习笔记」黑马面面布局开发
「学习笔记」黑马面面布局开发 黑马面面布局开发 一.目的 1.1 技术方案 1.2 代码规范 1.2 目录规范 二.流程开发 2.1 蓝湖/摹客协作平台 2.2 适配方案 2.3 初始化文件 2.4 ...
- 「学习笔记」多项式的蛇皮操作
文章目录 「学习笔记」多项式的蛇皮操作 前置知识 趋近 自然常数 对数 逆元 导函数 牛顿迭代与泰勒公式 不定积分与定积分 多项式乘法 多项式求逆元 多项式除法/取模 多项式牛顿迭代法 多项式开根 「 ...
- 「学习笔记」移动Web开发之flex布局9
「学习笔记」移动Web开发之flex布局9 一.flex布局体验 1.1 传统布局与flex布局 1.2 初体验 二.flex布局原理 2.1 布局原理 三.flex布局父项常见属性 3.1 常见父项 ...
- 「学习笔记」移动Web开发之rem适配布局10
「学习笔记」移动Web开发之rem适配布局10 一.rem单位 1.1 rem 单位 二.媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.2.1 mediatype 查询类型 2.2.2 关键 ...
- 「学习笔记」HTML5CSS3提高6(上)
「学习笔记」HTML5&CSS3提高6(上) HTML5新特性 概述 语义化标签 (★★) 多媒体标签 视频标签- video(★★★) 基本使用 兼容写法 video 常用属性 音频标签- ...
- 「学习笔记」ISAP求最大流
ISAP学习笔记 ISAP是OI中求最大流的常用方法之一.相对于Dinic,ISAP的速度提升了很多,但编码复杂度也上升了不少. 约定 采用邻接表存储图,对于每条弧,增加一条容量为0的逆向边. d数组 ...
- 「学习笔记」多项式相关
序 学多项式也有好久了,可是我自己还没怎么认认真真推过柿子,导致啥都不会,然后被吊打. 看来再不回顾一下就不行了啊. 多项式乘法 写了一个好看一点的\(\mathrm{NTT}\)板子,仅供参考. i ...
- c++时间片轮转rr进程调度算法_「学习笔记」时间片轮转(RR)调度算法(详解版)...
关键词:时间, 进程, 调度, 队列, 切换 时间片轮转(RR)时间片轮转(RR)调度算法是专门为分时系统设计的.它类似于 FCFS调度,但是增加了抢占以切换进程. 该算法中,将一个较小时间单... ...
最新文章
- JavaScript 函数创建思想
- openstack用rdo方式安装时遇到的问题
- ML.NET Cookbook:(3)如何从CSV加载包含多个列的数据?
- 在NIO.2中使用文件和目录
- 永远和靠谱的人在一起!
- 马斯克“地狱”归来,回应一切
- 数据库在什么情况下适合添加索引
- 使用Python,OpenCV旋转图像任意角度(完整和局部丢失~)
- 如何删除Eclipse中的中文包,让中文Eclipse显示英文
- 计算机中英文打字文章,中英文混合打字文章
- 小苹果音乐用计算机怎么打,小苹果苗语版歌曲-计算器音乐简谱,比如一些流行歌曲小苹果等等之类的?...
- redux 常见问题
- STM32单片机TTS温度播报系统 DS18B20 LCD1602
- 这些是 Python 官方推荐的最好书籍(推荐)
- dsoframer-在线编辑office文档,一款开源的由微软提供
- php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码,ONE
已经生成的数据表格大致 - phpStudy...
- PL/SQL Developer 14 配置
- python温度转换_一步一步教会你,详解用Python实现一个简易的温度换算GUI小工具...
- Qt中国象棋之棋子的实现
- “¥” 人民币符号及其他币种键盘快捷键