vue.js基础知识

Vue.js是一款轻量级的JavaScript框架，用于构建用户界面。它采用了MVVM模式，通过数据绑定和组件化的思想，使得开发者可以更加高效地构建交互式的Web应用程序。

Vue.js与MVVM模式
MVVM模式包括3个核心部分。
Model(模型 ): 由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据。
View(视图):即用户界面。
ViewModel(视图模型 ): 用于链接匹配模型和视图的专用模型。

Vuejs 的核心思想包括以下两点。
(1)数据的双向绑定。View 和 Model 之间不直接沟通，而是通过 VewModel这个桥梁进行交互通过VewModel这个桥梁,可实现 View和Model之间的自动双向同步。当用户操作 View时,ViewModel会感知到 View 的变化，然后通知 Model 发生同步改变;反之，当 Model 发生改变时，ViewModel也能感知到Model的变化，从而使 View 做出相应更新. 

(2)“声明式”(declarative)是程序设计领域的一个术语，与之相对(2)使用“声明式”的编程理念。
的是“命令式”(imperative)。

命令行控制台
在命令行窗口中，可以使用的命令分为两类：

内部命令: 操作系统提供的基本命令，例如进入一个目录、显示一个目录中的文件列表等

外部命令·需要把程序安装到计算机中 然后执行相应的文件名

常用的内部命令
dir：显示一个目录中的文件

cd：进入一个目录

md：创建一个目录

Vue.js开发基础
 Vue的语法
插值语法：

功能:用于解析标签体内容

写法：Vue.js使用双大括号{{}}来进行数据绑定，将数据渲染到页面上。

指令语法：Vue.js提供了一些指令，用于操作DOM元素，例如v-bind、v-on、v-if、v-for等。 

使用模板字符串的另一个优点是，可以跨行，直接产生多行文本;而普通字符串不能跨行，如果要定义多行字符串，那么必须通过将多个单行字符串拼接才能获得。

Vue实例的生命周期
 常用的钩子函数：
beforeCreate(): 在实例创建之前调用
created(): 在实例创建之后调用，此时尚未开始 DOM 编译
beforeMount(): 在挂载开始之前调用
mounted(): 在实例被挂载后调用，这时页面的相关 DOM 节点已被新创建的 vmSel 替换相当于JavaScript 中的 window.onload()方法
beforeUpdate(): 每次页面中有元素需要更新时，在更新前就会调用 beforeUpdate0钩子函数updated(): 每次页面中有元素需要更新时，在更新完之后就会调用 updated0钩子函数beforeDestroy(): 在销毁实例前调用，此时实例仍然有效

destroyed(): 在实例被销毁之后调用 

计算属性与侦听器
计算属性
 可以在里面写一些计算逻辑的属性。

        他不像普通函数那样直接返回结果，而是经过一系列计算之后再返回结果。

        同时只要在它当中应用了data中的某个属性,当这个属性发生变化时,算属性可以嗅探到这种变化，并自动执行.

定义：
         定义:要用的属性不存在，通过已有属性计算得来。

         使用: 在computed对象中定义计算属性,在页面中使用{{方法名}}来显示计算的结果

缓存特性
computed 定义的属性在第一次访问时进行计算，以后再次访问时不再计算，而直接返回上次计算的结果。但是，如果计算属性的值依赖于响应式数据,那么当响应式数据发生变化的时候也会重新计算。

而定义在 methods 中的方法每次调用时都会计算一次。

侦听器
作用与语法
作用：用来侦听数据有没有变化，一旦有变化就调用函数

  语法：在和data、methods这些平级的位置写一个watch

普通监听
普通监听： 除对象以下的数据（数组）
监听器中方法名是其data中对应的属性名
系统自动注入的参数,有两个 newVal: 更新后的新值   oldVal:更新前的旧值
 监听器中的所有方法:无需调用,当被监听的数据发生改变时,自动被执行

深度侦听
深度侦听是指当依赖或侦听的属性是一个对象而不是简单类型的值（例如数值、字符串等）时，就会以递归方式侦听对象的所有属性

对数组进行侦听

1.使用标准方法修改数组可以被侦听到
当通过下列方法操作或更改数组时，变化可以被侦听到。这些方法包括:
尾部添加   push()
尾部删除   pop()
头部添加   unshift()
头部删除   shift()
删除、添加、替换  splice()
排序          sort()
逆序          reverse()

事件处理
     js的事件流三阶段
        事件捕捉阶段(capture phrase): 事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;

        处于目标阶段(target phrase): 处于绑定事件的元素上;

        事件冒泡阶段(bubbling phrase): 事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素

        (事件捕获是从上到下，而事件冒泡，是从下到上。)

  事件冒泡 
        微软提出了名为事件冒泡(event bubbling)的事件流。

        浏览器产生事件流分为三个阶段。从最外层的根元素 html开始依次向下，称为“捕获阶段”，到达目标元素时，“到达阶段“，然后依次向上回到根元素，称为“冒泡阶段”

     

事件修饰符：
prevent：阻止默认事件（常用）

stop：阻止事件冒泡（常用）

once：事件只触发一次（常用）

capture：使用事件的捕获模式

self：只有event.target是当前操作的元素时才触发事件

passive：事件的默认行为立即执行，无需等待事件回调执行完毕

按键修饰符
按键事件由用户按下或释放键盘上的按键触发，主要有 keydown、keypress、keyup 三个事件。
keydown:按下键时触发。
keypress: 按下有值的键时触发，而当按下 Ctrl、Alt、Shift、Meta 这样无值的键时，keypress
事件不会触发。对于有值的键，按下时先触发 keydown 事件，再触发 keypress 事件。
keyup:松开键时触发

表单绑定修饰符
.lazy  不会即时的将输入框的内容存放入data

.number 把string字符串转为number数字

.trim 屏蔽空格

结构渲染
条件渲染指令v-if
v-if和V-else
和绝大多数编程语言一致，有了 if，也就会有 else 与之相配。当条件满足时，渲染 vif对应的HIML结构，否则染 v-else 对应的HTML结构。当然，也可以只单独使用v-if; 而不使用v-else。

v-else-if
对于多重条件、可以使用 v-else-if 指令，这个指令可以连续重复使用

Vue.js 会尽可能高效地渲染元素，并且通常会复用已有元素而不是重新构造 DON结构。

v-if与v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件侦听器被销毁和
重建。
vi是“情性”的，即如果在进行初始渲染时条件为假，则不会渲染，直到条件第一次变为真时，才开始渲染相应的 DOM 结构。

v-if、v-show的区别
v-show 相对简单，不管初始件是什么，元素足是会被渲染，并且还会基于CSS的display属
性进行切换。
通常，vif的切换开销更大，而 v-show 的初始染开销更大。因此，如果切换非常频繁，建议优先使用 v-show;而如果在运行时条件很少改变，则使用 v-if 效果较好

v-for中的key属性有何作用
当Vue.is 更新使用v-for 染的列表时，默认使用“就地更新”的策略，如果数据项的顺序发生了
改变，Vue.js 不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置得到正确渲染。

将v-for与v-if一同使用时注意事项
当它们处于同一节点时，v-for 的优先级比 vf高，v-for 每次选代时都会执行一次v-if，这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显