Vue的学习

1.vue：渐进式JavaScript框架
声明渲染---->组件系统----->客户端路由----->集中状态管理----->项目构建
2.Vue.js之HelloWorld细节分析
1）实例参数分析
el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）
2)插值表达式用法
a：将数据填充到HTML标签中
b：插值表达式支持基本的计算操作
3）Vue代码运行原理分析
概述编译过程的概念（Vue语法—>原生语法）


3.Vue模板语法
1）前端渲染：把数据填充到HTML标签中
2）前端渲染方式：
原生js拼接字符串：基本上就是将数据以字符串的方式拼接到HTML标签中。
缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护逐渐变得困难起来。
使用前端模板引擎：基于模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。
优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
缺点：没有专门提供事件机制。
使用vue特有的模板语法：
插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构
4.指令：指令的本质就是自定义属性。指令的格式：以v-开始（比如：v-cloak）
v-cloak指令的用法：1.插值表达式存在的问题：”闪动“；2.如何解决该问题：使用v-cloak指令；3.解决该问题的原理：先隐藏，替换好之后再显示最终的值。



5.数据绑定指令
1）v-text填充纯文本：相比插值表达式更加简洁

2）v-html填充HTML片段：存在安全问题、本网站内部数据可以使用，来自第三方的数据不可用

3）v-pre填充原始信息：显示原始信息，跳过编译过程（分析编译过程）

6.数据响应式
1）HTML中的响应式（屏幕尺寸的变化导致样式的变化）
2）数据的响应式（数据的变化导致页面内容的变化）
3）数据绑定：将数据填充到标签中
4）v-once只编译一次：显示内容之后不再句有响应式功能

7.双向数据绑定
1）v-model指令的用法


2）MVVM设计思想
M(model) V(view) VM(View-Model)
V—>M:事件监听（DOM Listeners）
M—>V:数据绑定（Data Bindings）
8.事件绑定
1）v-on指令用法

2）事件函数的调用方式



3）事件修饰符
.stop阻止冒泡



.prevent阻止默认行为


注意：使用修饰符时，顺序很重要；相应的代码会以同样身为顺序产生。因此，用
v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击