标签：依次 渐进 组元 direct 传输 响应 返回值 技术 运算
正课:
1. 原生DOM vs 函数库 vs 框架
2. 什么是Vue
3. 如何使用Vue
4. 绑定语法
5. 指令
6. 双向绑定
1. 原生DOM vs 函数库 vs 框架
原生DOM: 优点: 跨平台好
缺点: 繁琐
函数库jQuery: 优点: 对原生DOM的每个API进行了简化
缺点: 并没有简化开发的步骤
框架Vue,AngularJS,React: 优点: 彻底简化了开发的步骤
缺点: 需要转变观念
什么是框架：已经是一个半成品的项目，封装了大量重复性劳动，人只要提供个性化定制即可。
2. 什么是Vue:
Vue是基于MVVM设计模式的渐进式的前端js框架
渐进式: 可以有选择的逐步使用框架中的组件
vs"全家桶": 必须全盘使用所有组件
前端js框架: 不需要nodejs，仅靠浏览器就可独立运行
为什么后续需要nodejs？将Vue框架中浏览器不认识的新技术翻译为浏览器认识的ES5的对等标准——已经封装好了
何时: vue侧重于以数据操作为主的前端项目开发(增删改查加事件绑定)
3. 如何使用Vue:
下载: cn.vuejs.org
最新稳定版: 2.6
开发版: 未压缩的，包含完备注释和错误提示信息
优: 可读性好
缺: 体积大，不便于传输
生产版: 代码经过压缩，删除了所有注释和错误提示信息
优: 体积最小化，便于传输
缺: 不便于学习和阅读
使用Vue 2种方式:
1. 下载独立的vue.js，在网页中引入:
2. 用脚手架代码:
版本：2.5
开发版：未压缩版本，有完备的错误提示
生产版：压缩版本，删除了错误提示
原理: MVVM设计模式:
旧的前端代码划分:
html: 定义网页的内容，专门保存网页内容和结构的文档
css: 定义网页的样式
js: 为网页添加交互行为(增删改查，事件绑定)
问题：HTML和css太蠢，不会动态变化一切交互都只能靠js添加。
导致js中大量重复的代码和重复的步骤
MVVM设计模式将前端内容重新划分: （步骤）
1. 界面(View):增强版的html+css，可根据数据自动变化
为HTML添加了动态功能: 变量，if else, for
2. 模型数据(Model): 所有页面上需要的/可能发生变化的数据。集中定义在data={ 数据1:值1, 数据2:值2, ... }
往往模型数据都是ajax从服务端请求来的。
3. 控制器(ViewModel)：将视图View和模型数据(Model)绑定在一起，
绑定: 监控视图和模型，始终保持模型数据与页面自动同步
控制器ViewModel中(new Vue()对象)包含两大子系统:
1. 响应系统: 监控模型中每个变量的变化，为每个模型自动添加get()和set()
只要有变量发生变化，都会自动经过set()和get()中会触发通知：xx变量变为xx新值
本质: 将data中每个属性都提升为new Vue对象的访问器属性。只要修改new Vue对象的访问器属性，就可修改data中的变量。但是，同时会发出通知！
通知会发给虚拟DOM树
2. 虚拟DOM树:
什么是: Vue临时生成的仅保存可能变化的元素和属性的DOM树(创建new vue时，通过扫描完整DOM树，仅提取可能变化的元素和属性，组成的一颗及精简的虚拟DOM树)
何时生成: new Vue()边扫描受监控的页面元素，边创建虚拟DOM树，仅保留可能发生变化的元素
何时使用: 响应系统通知某个变量被改变时，告知虚拟DOM树。虚拟DOM树快速遍历自己，找到受影响的DOM元素，仅修改受影响的DOM元素
总结: 虚拟DOM树:
1. 内容少，遍历极快
2. 封装了重复性的增删改查DOM操作//仅修改受影响的DOM元素的属性或内容
4. 绑定语法:
{{变量名}} Interpolation 插值
告知Vue框架，这里需要哪个变量
{{}}中还可写一切正确的有返回值的js表达式:
比如: 运算, 三目, 函数调用，访问数组元素，访问对象属性，模板字符串
问题: 只能绑定内容，不能绑定属性和事件等...
5. 指令directive
什么是: Vue新增的增强HTML功能的特殊属性
为什么: HTML缺少动态原因所需的要素: 运算, 分支，循环
包括:
1. 专门绑定属性值的指令: v-bind
何时: 绑定属性值
如何: <ANY v-bind:属性名="js表达式">
v-bind: 让普通的属性的""中也可以执行js程序
其实可省略: v-bind
所以: 今后只要绑定属性都用 :属性名="js表达式"
2. 事件绑定: v-on
如何:
HTML中: <ANY v-on:事件名="处理函数名">
<script>中
new Vue({
el:"#app",
data:{ 模型变量 },
methods:{
处理函数 (){
this.模型变量
}
}
})
其实: v-on: 可简写为@，
所以，今后绑定事件都用@事件名="处理函数"
3. v-if: 为HTML添加分支结构
v-if 控制一个元素的显示隐藏
<ANY v-if="条件表达式"
v-if v-else 可控制两个元素二选一显示
<ANY v-if="条件表达式"
<ANY v-else
v-if v-else-if v-else 可控制多个元素多选一显示
<ANY v-if="条件表达式"
<ANY v-else-if="条件表达式"
<ANY v-else
4. v-show: 控制一个元素显示隐藏
用法同v-if: <ANY v-show="条件表达式"
本质: 用display:none隐藏元素
v-if的本质: 用删除元素节点的方式，隐藏元素
5. v-for: 根据数组反复生成多个相同结构的元素
用法: <ANY v-for="elem of 数组">
//elem可当做模型变量使用，用作绑定
</ANY>
of会依次读取数组中每个元素
每读取一个元素就创建一个<ANY>
6. 绑定html片段:
问题: {{}}无法绑定HTML片段，它会努力保持HTML片段原样显示
解决: v-text="变量" 不行，v-text等效于{{}}
v-html="变量" 可以，会被浏览器解析为正文
总结: 只要绑定的内容是HTML片段，都用v-html
7. v-cloak: 在vue加载完之前，短暂隐藏{{}}语法，不让用户看到
如何:
1. 在界面中想隐藏的元素/父元素上添加v-cloak自定义属性
2. 在页面的<style>中用属性选择器找到所有有v-cloak属性的元素，设置隐藏:
<style>[v-cloak]{ display:none }</style>
结果: 当vue对象加载完成，会自动查找所有v-cloak属性，自动移除。所有元素就重新显示出来
8. v-pre: 保护内容中碰巧出现的{{}}不被VUE编译，保持原样显示
9. v-once: 控制一个变量只在开始时绑定一次，之后即使模型变量变化，也不再更新.
6. 双向绑定:
单向绑定: 将内存中模型数据中的值绑定到界面上(Model->View)
问题: 无法绑定表单元素的值
表单元素值的修改，无法自动映射到内存中
解决: 今后只要绑定表单元素，都用双向绑定
什么是双向绑定: 即能将Model中的数据绑定到界面上（Model->View），又能自动将界面上的修改，映射到内存中(View->Model)
如何: <表单元素 v-model:value="模型变量">
简写: 1. <input type="text"
<textarea>
<select>
都可简写为: v-model="模型变量"
省略:value，默认绑定value属性
2. <input type="checkbox">
可简写为: v-model="模型变量"
但默认绑定的是checked
3. <input type="radio">
可简写为: v-model="模型变量"
但用模型变量和radio的value做比较
如果模型变量的值=radio的value时，就选中
如果模型变量的值!=radio的value时，就不选中
标签：依次 渐进 组元 direct 传输 响应 返回值 技术 运算
原文地址：https://www.cnblogs.com/liuqingqing-bloom/p/13138178.html
