一:vue的简单介绍:
(1)Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件;
(2)Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
一:vue的优势:
(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化
二:浏览器的支持:
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
三:内置指令
v-on:click 单击事件
v-on:keyup.enter 回车事件
v-for 循环
v-model
v-if
v-else
v-bind
指令用于响应地更新 HTML 特性
<a v-bind:href="url"></a>
四:双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串,需要用三 Mustache 标签:
(1)<div>{{{ raw_html }}}</div>
(2)Mustache 标签也可以用在 HTML 特性 (Attributes) 内:
<div id="item-{{ id }}"></div>
(3)Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符”指示:
{{ message | capitalize }}
过滤器可以串联:
{{ message | filterA | filterB }}
过滤器也可以接受参数:
{{ message | filterA 'arg1' arg2 }}
五: v-if vs. v-show
在切换 v-if
块时,Vue.js 有一个局部编译/卸载过程,因为 v-if
之中的模板也可能包括数据绑定或子组件。v-if
是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show
简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,v-if
有更高的切换消耗而 v-show
有更高的初始渲染消耗。因此,如果需要频繁切换 v-show
较好,如果在运行时条件不大可能改变 v-if
较好。
六: 按键修饰符
在监听键盘事件时,我们经常需要检测 keyCode。Vue.js 允许为 v-on
添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
enter全部的按键别名:
-
- tab
- delete
- esc
- space
- up
- down
- left
- right