DOVE-----Vue.js框架入门（一）
第一周学习内容整理（7.6-7.12）
markdown语法
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。其编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
1、标题：使用 = 和 - 标记一级和二级标题；使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。
2、段落：段落的换行是使用两个以上空格加上回车，也可以在段落后面使用一个空行来表示重新开始一个段落。
3、字体：*斜体文本* ~~~~~~~ _斜体文本_
~~~~~~~~~~~~ **粗体文本** ~~~~~ __粗体文本__
~~~~~~~~~ ***粗斜体文本*** ~~ ___粗斜体文本___
4、分隔线：可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。也可以在星号或是减号中间插入空格。
5、列表：Markdown 支持有序列表和无序列表。无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容；有序列表使用数字并加上 . 号来表示。
6、引用：在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>>n个…
7、图片：！[alt 属性文本] (图片地址) ~~~~~~~ 开头一个感叹号 !，接着一个方括号，里面放上图片的替代文字，接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 ‘title’ 属性的文字。
8、连接：[链接名称] (链接地址) 或者 <链接地址>
9、表格：使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
10、转义：Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符。
Vue.js框架
概述
Vue：渐进式JavaScript框架。
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
官网：https://cn.vuejs.org/v2/guide/
- 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手vue
- 在一个库文件和一套完整框架之间自如伸缩
- 高效：20kB运行大小，超快虚拟DOM
基本使用
1、vue使用基本步骤：
- 需要提供标签用于填充数据
- 引入vue.js库文件
- 使用vue语法功能
- 把vue提供的数据填充到标签里
2、el：元素挂载位置（值可以是CSS选择器或者DOM元素）
~~~~~ data：模型数据（值是一个对象）
~~~~~ 插值表达式:{{ }}，将数据填充的HTML中，支持基本计算操作
模板语法
1、插值表达式：{{ }},将数据填充的HTML中，支持基本计算操作
2、指令：自定义属性 ~~~~~ 格式：以v开始（比如：v-cloak）
v-cloak指令的用法：
~~ （1） 提供样式
~~~~~ [v-cloak]{
~~~~~ ~~~~~ display:none;
~~~~~ ~ }
~~~~ (2)在插值表达式所在标签中添加v-cloak指令
~~~~ 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果。
[v-cloak] {
display: none;
}
{{ message }}
v-text指令：填充纯文本，相比插值表达式更简洁
{{msg}}
v-html指令：填充HTML片段，存在安全问题，本网站内部数据可以使用，第三方数据不可用
"html">
v-pre指令：显示原始信息，跳过编译过程（分析编译过程）
{{ this will not be compiled }}
3、数据响应式：
- 响应式：html5中的响应式（屏幕尺寸的变化导致样式的变化）
~~~~~~~~~~~~~~~~~~ 数据的响应式（数据的变化导致页面内容的变化） - 数据绑定：将数据填充到标签中
- v-once指令：只编译一次，显示内容之后不再具有响应式功能
4、双向数据绑定：用户修改页面内容时，数据会变，数据又会反过来影响数据绑定的内容的变化
~~~~~ v-model指令用法：
~~~~~ MVVM设计思想：model,view,view-model
5、事件绑定
- vue如何处理事件
v-on指令用法：
v-on指令简写形式： - 事件函数的调用方式
直接绑定函数名称
调用函数 - 事件函数参数传递
普通参数和事件对象
事件绑定-传递参数
（1）如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
（2）如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event - 事件修饰符
.stop阻止冒泡跳转
.prevent阻止默认行为跳转 - 案件修饰符：
.enter回车键
.delete删除键 - 自定义案件修饰符
全局config.keyCodes对象Vue.config.keyCodes.f1=112
规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode值
6、属性绑定
7、样式绑定
- class样式处理
对象语法
数组语法
样式绑定相关语法细节
（1）对象绑定和数组绑定可以结合使用
（2）class绑定的值可以简化操作
（3）默认的class会保留 - style样式处理
对象语法
数组语法