1. Vue 实例
1.1 创建一个Vue实例
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件组成。
1.2 数据与方法
数据的响应式渲染
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。(注意的是只有当实例被创建时 data 中存在的属性才是响应式的。)
使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
实例属性与方法
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
2. 模版语法
2.1插值
文本
使用“Mustache”语法 (双大括号) 的文本插值, 一次性插值,当数据改变时,插值处的内容不会更新。
原始HTML
输出真正的 HTML,你需要使用 v-html 指令注意:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
特性
Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令当绑定属性值为null、undefined 或 false特性甚至不会被包含在渲染出来的元素中
使用 JavaScript 表达式
对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。限制,每个绑定都只能包含单个表达式,语句不生效。注意:模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
2.2 指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
参数 一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性
修饰符 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。如.prevent组织form提交默认行为
缩写 v-bind缩写 : , v-on缩写 @
3. 特点
采用组件化模式,提高代码复用率,让代码更好维护:一个vue后缀的文件包含html、css、js全部包在一起完成一个活动版块的内容这就是组件化;
代码复用率:既然都封装好了,直接拿来用那就是代码复用率;
代码更好维护:直接在原代码基础上修改一些功能。
4.MVVM模型
M可以看成我们的数据,V看成我们的模板,最后一个VM就是可以将我们的数据渲染到模板,将模板的value保存到数据,在中间起到一个转换的工作,这个就是VM,整个系统就为MVVM模型
5.事件修饰符
-
==prevent:阻止默认行为==
-
==stop:阻止冒泡==
-
==once:事件只触发一次==
-
==capture:使用捕获模式==
-
==self:只有e.target是当前操作元素的时候才会触发(可以拿来阻止冒泡)==
-
==passive:== :我们的滚动事件有两种,一个是==scroll==在我们滚动滚动条的时候触发 的,一个是==wheel==当我们滚动鼠标滚轮的时候触发 这个时候会发现,当我们鼠标滚轮一动,需要先把回调函数执行完了,才 会去执行默认行为向下滚动的操作,这个时候passive就派上用场了。
6.键盘事件
-
特殊按键
- tab:必须配合keydown使用,因为一按下就会切换,keyup等你抬起按键时,已经切走了,就无法实现按这个键要实现的功能
- 系统修饰键如上图第三点,扩展:@keyup.ctrl.y = xxx表示只能ctrl + y才触发
-
如果想要用的按键在定义之外,可以先通过e.key去查看这个键叫什么名字,一般就是叫键盘上的名字有些不一样,如ctrl=control,得到名字后 ==如果是两个单词及以上也就是驼峰命名的(CapsLock)==,需要将大写转为小写,同时单词之间用-分割,如:caps-lock即可正确使用该键