（tips：感谢您点击我的文章，并且阅读，
本人非科班出生，所学知识是网上找的，若有理解错误，望大佬能够指出， ）
Vue概述
Vue：渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
Vue 的优点：
- 易用：熟悉HTML、CSS、 JavaScript知识后，可快熟上手
- 灵活：在一个库和一套完整框架之间自如伸缩
- 高效：20kb运行大小，超快虚拟DOM
Vue基本使用
Vue的基本使用步骤
- 提供需要填充数据的标签
- 引入Vue.js
- 把vue的data属性内的 key放到对应的标签位置
-
实例参数分析
- el：元素的挂载位置（值可以是css选择器或者DOM元素）（把数据关联到什么位置）
- data：模型数据：（值是一个对象）
-
插值表达式
- 将数据填充到HTML标签中
- 插值表达式支持基本的计算操作，
- Vue代码运行原理
- 概述编译过程的概念（Vue语法→原生语法）
- Vue代码→执行→通过Vue框架翻译→获取原生语法→浏览器运行框架翻译好的代码，
Vue模板语法
如何理解前端渲染？
- 把数据填充到HTML标签中 通过ajax 获取后端数据 填充到Vue模板，最后展示出来，这个过程就是前端渲染
前端渲染的方式
- 原生JS拼接字符串
- 使用前端模板引擎
- 使用Vue特有的模板语法
模板语法概述
- 插值表达式
- 指令
什么是指令?
- 什么是自定义属性？
- 指令的本质就是自定义属性
- 指令的格式：以v-开始（比如v-on ，v-cloak v-once）
v-cloak指令
- v-cloak指令的用法
1.提供样式（style）
[v-cloak]{ display:none;}
2.在插值表达式所在的标签中，添加v-cloak指令
- 插值表达式存在的问题：如果在浏览器很卡的情况下，会先出现mustache语法的 {{messsage}}
- 何解决该问题：使用v-clock指令
- 先通过样式隐藏内容，然后通过内存中进行值的替换好之后，再显示最终的结果
v-text 填充纯文本
* 相比插值表达式更加简洁
v-html 填充HTML片段
* 存在安全问题
* 本网站内部数据可以使用，来自第三方的数据不可用
v-pre 填充原始信息
- 显示原始信息，跳过编译过程，
例：
正常 {{msg}} 会渲染成 你好
加了v - pre
v-once
- v-once只编译一次
- 显示内容后不在具有响应式的功能
- 使用v-once的应用场景,如果显示的信息后续不需要在修改,那么就可以使用v-one, 这样可以提高性能
v-model指令
- 当用户修改前端数据时,v-model会将后台数据也一起修改
-
数据响应式
- 如何理解数据响应式
①. html5中的响应式(屏幕尺寸的变化导致样式的变化)
②. 数据的响应式(数据的变化导致页面内容的变化) - 什么是数据绑定
①. 数据的绑定:将数据填充到标签中
- 如何理解数据响应式
-
双向数据绑定
- 双向数据绑定是什么？
- 数据模型和视图之间的双向绑定。
- 当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。
- 双向数据绑定的优点：无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作， 双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了。
- 简单的说就是
- 一个是数据到前端页面进行展示
- 用户修改页面内容,影响模型数据
- (二者结合就是 双向数据绑定)
- 双向数据绑定是什么？
MVVM
- M(model) 模型 (提供数据)
- v(view) 视图 (提供视图模型)
- VM(View-Model) 两者结合
事件绑定
Vue 如何处理事件
- v-on指令
<input type= 'button' v-on:click='num++'/> - v-on的语法糖(简写)
<input type= 'button' @click='num++'/>
事件函数的调用方式
- 直接绑定函数名称
<input type = 'button' v-on:click='say' value='你好'/> - 调用函数
<input type = 'button' v-on:click='say()' value='你好'/>
事件函数参数传递- 普通参数和事件对象
<input text='button' @click='say（$event）' value="说你好"/>
<input text='button' @click='say（'sayHi'，$event）' value="说你好"/>
- 普通参数和事件对象
- 事件绑定- 参数传递
- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$even
事件修饰符
-
stop 被修饰的标签将会阻止冒泡
<a @cilick.stop="handle">跳转<a/> -
pevent 被修饰的标签将会阻止默认行为
<a @cilick.prevent="handle">跳转<a/> -
once 被修饰的标签点击事件将只会被触发一次
<a @click.once="handle">跳转</a> -
可以串联一块写，表示既阻止冒泡，又阻止默认行为
<a @cilick.stop.prevent="handle">跳转<a/>使用修饰符时，顺序很重要；
相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。
按键修饰符
-
.enter 回车键
<input @keyup.enter='submit'/> -
.delete 删除键
<input @keyup.delete="crearContent"/> -
.up 上键、 .left 左键， .right 右键 ， .button 下键 等
<input @keyup.up ="test1"/>
<input @keyup.left ="test1"/>
<input @keyup.right ="test1"/>
<input @keyup.button="test1"/>
- 自定义按键 config.keyCodes
Vue.config.keyCodes.f1 = 112
未完结，（今日学习到此结束，本篇文章，是本人的理解并写出的，若有错误，望大佬指出，感谢各位大佬的观看，您辛苦了）
