Vue.js基本知识

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即可正确使用该键