VUE学习笔记

关于vue框架的一个学习笔记

一、遇见VUE

1、认识Vue

（1）、为什么要学习Vue?
前端的必备技能，其融合了react的虚拟Dom及angular的组件化开发。

（2）、什么是Vue？（阅读官方文档）
a、Vue是一个渐进式的框架
（Vue的使用可大可小）
——用户可以一步一步、有阶段的来使用，不必一开始就使用所有的东西。
——意味着你可以将Vue做为你应用的一部分嵌入其中，具有丰富的交互体验。
——Vue全家桶能实现你重构项目或新项目中的各种需求
——Vue具有众多核心库及强大的生态系统
b、Vue的高级功能
——解耦视图与数据
——可复用的组件
——前端路由技术
——状态管理
——虚拟DOM
c、具有响应式和组件化的特点：
响应式：即为保持状态和数据同步，也称数据绑定。
组件化：与React异曲同工，“一切皆为组件”，可以将任意封装好的代码注册成标签，并在模板中调用。
——>优点：
①组件设计合理能减少重复开发；
②配合Vue的插件vue-loader，可以将一个组件的css、html、js写在一个文件中，做到模块化开发；
③可以与vue-router和vue-resourse插件配合起来，以支持路由和异步请求，满足了开发单页面应用的基本条件。

2、vue的安装

（1）、直接CDN引入，开发版本与生产版本。
（2）、下载和引入
（3）、NPM（后面具体讲）安装

二、vue的基础知识

1、MVVM模式

即Model-View-ViewModel（模型-视图-视图模型）。
其中模型是后端传递的数据，视图是HTML页面，视图模型是该模型的核心，它是连接View与Model的桥梁。
MVVM的两个方向：
①将模型转化为视图，即后端传递的数据转化为所看到的视图，实现方式为数据绑定。
②将视图转化为模型，即将所看到的视图转化为后端的数据，实现方式为DOM事件监听。
两个方向都实现，称为数据的双向绑定。

Vue即是基于MVVM的框架，在Vue中，Model指的是js中的数据，例如数组、对象等；View指的是页面视图，ViewModel指的是Vue实例化对象。

——>模式的优势：
①低耦合。View与Model分离，其中一方改变，不会影响另一方。
②重用性高。
③HTML模板化。修改模板不影响逻辑和数据，模板可直接调试。
④数据自动处理。Model实现了标准的数据处理，如排序、筛选等。
⑤双向绑定。缩小了开发周期。

2、传统的前端开发模式

硬代码开发，数据、展现、逻辑都混在一起。
——>缺点：
①代码的可读性差，很难完成知识的交付和转移。
②界面变更复杂，难调试，难定位。
③维护复杂，容易在修复中出现新bug。
④数据处理功能单一。

3、单页面应用（SPA）

.what？
指只有一个主页面的应用，浏览器一开始加载所有必需的HTML、css、js.
所有页面都包含在一个主页面中。
编写时分开，交互时由路由动态载入，单页面的页面跳转，只刷新局部资源。
——>优势：
①用户体验良好。不重刷新，数据有Ajax异步获取，显示流畅。
②前后端分离。
③减轻了服务端的压力，服务器只提供API接口，不管页面逻辑和页面拼接。
④共用一套后端代码。web，手机，平板。
——>缺点：
①不利于SEO的优化。
【SEO（Search Engine Optimization）：为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。】
②首屏加载慢。需要将所有页面所依赖的css和js合并统一加载。

4、生命周期，事物从出生到销毁的过程。

每个Vue实例被创建时，都会经历一系列的初始化的阶段。
例如：需要设置数据监听、编译模板、将实例挂载到DOM、并在数据变化是更新DOM等。
同时该过程会运行一些生命周期钩子的函数，能让开发者在实例生命周期不同的阶段添加自己的代码。

三、模板语法

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

1、插值

1、使用双大括号进行文本插值的数据绑定。
2、原始HTML（v-html）
因为双大括号会将数据解释为普通的文本，而非HTML代码。Vue不是基于字符串的模板引擎。
输出真正的HTML：
在data属性中定义该标签，再根据需要定义href属性值和标签内容，然后使用v-html绑定到对应的元素上。
——>注意：
站点上动态渲染的任意HTML可能会非常危险，容易导致XSS攻击。
【XSS攻击，即跨站脚本攻击，通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。】
则，对可信的内容使用，绝不对用户提供的内容使用插值。

2、指令

职责：当表达式的值改变，将其产生的连带影响响应式地作用于DOM。
1、参数
指令后面接冒号
2、修饰符
用于指出一个指令应该以特殊方式绑定。

3、对指令中动态参数的理解

方括号括起来的js表达式作为参数，该表达式会进行动态求值，并在最终作为参数来使用。

4、虚拟DOM与真实DOM的区别

虚拟DOM其实就是JS对象，以JS对象的形式去添加DOM元素。

四、计算属性、侦听器和过滤器

目的：插值表达式为了简化运算，当需对差值进一步处理，则使用计算属性。
同时，当差值数据变化时，执行异步或开销较大，采用监听器。

1、计算属性

监听数据的变化，对依赖数据的变化后进行操作。
计算属性在computed中选项中定义。在data中定义一个函数（属性）将vue中的属性进行计算操作。
其依赖属性的值变化，其属性值自动（计算）更新，相关的DOM也同步更新。
本质是一个方法，只是将计算属性的名称直接作为属性来使用。
why?
计算属性可以缓存，区别于methods中的其他函数。即只有相关依赖改变，才重新计算，相当于优化了方法。

2、侦听属性

使用watch来检测数据的变化。

五、内置指令

1、v-cloak