10.12 冯娜
学习日志
一、什么是Vue：是第三方开发的、渐进式的、基于MVVM设计模式的、纯前端的的JS框架。
渐进式：可以逐步在项目中引入Vue的各项功能，同时，可以与其他技术混用，但是不推荐（es5：只要不是使用框架，一律使用es5，不能出现es6：我们使用框架的时候就可以使用es6）
MVVM设计模式:
1、传统前端三大部分：HTML、css、javascript
问题：html和css的功能都太弱了，对于页面中发生的一切变化都需要javascript来编写，导致需要javascript编写大量重复的增删改查操作。
2、现代前端三大部分：mvvm：
（1）数据模型（Model）：集中保存界面中所需要的所有变量和变量值。模型，指程序中创建的或从远程获取的数据，一般使用js中的一个对象data来保存，内容就会直接显示到view中
（2）界面（View）：视图，指网页中的元素和样式，一般指的就是html和css，view时html网页中的一个需要动态加载内容的父元素，比如：“div#app”。html中的视图也被称为模板template，如果发生template错误，那么html中查找就可以。
（3）控制器（ViewMode）：视图模型/控制，用于代替之前DOM/jQuery操作，封装了重复的增删改查操作，把模型中的数据和视图中的html元素“绑定”在一起。Vue类型提供的就是一种强大的ViewMode对象，可以自动同步数据和页面元素，专门负责自动将模型中的变量值自动同步到界面中所需要的位置，实现实时同步。
ViewMode核心原理：（响应系统/DOM树）
a、纯前端：不需要任何后端技术，就能够独立运行。
b、框架：包含核心功能的半成品代码，开发人员只需要根据业务的需求，添加定制自己个性化的一部分内容即可。（构造+原型）
二、对比原生DOM、jQuery、Vue框架
1、原生DOM：使用原生DOM，必须是一步一步的来，而且每一步都能少，步骤上非常繁杂，原生的DOM兼容性好。
问题：jQuery中有多少种查找方法？（查找id的元素，查找class的元素，查找name的元素）。
2、jQuery:其实是对DOM的每一步都进行了简化，但是并没有从根本上改变程序的流程。
3、Vue：
优点：已经包含核心功能，而且封装了很多重复的功能，编写时我们就不必要再编写重复的功能，比如：增删改查，算是在开发中彻底简化了开发的步骤。
缺点：不兼容旧浏览器，同时开发人员需要彻底的改变编程习惯和思维。
DOM数重绘问题：一两个看不出来，数量多了非常卡。
三、什么时候使用Vue？为什么使用Vue？
1、Vue适用于以数据操作为主的项目（web/app）。
2、我们使用vue框架可以提高项目的开发效率。
四、如何在项目中使用Vue
1、下载Vue.js，并通过script引入（学习阶段使用）
2、通过Vue-Cli脚手架工具（开发项目，使用的都是脚手架工具）。
五、下载安装。
六、编写vue程序步骤：
第一步：编写页面
第二步：在js中定义数据对象
第三步：在JS中创建vue对象，将界面和数据绑定起来
七、vue语法
1、绑定语法：
什么是绑定语法：是专门为html添加变量，html本身并不支持变量，但是html中的个别内容又需要根据程序中的变量自动变化，当html中的任何一个位置的内容，需要根据程序中的变量自动变化的时候，就需要使用绑定语法。
语法：{{变量/js表达式}}
双花括号语法：也叫做大胡子语法，官方的名字：Mustache.补缺，插值的意思，
大胡子语法，用于特定的Model数据绑定到视图中，当Model数据发生了改变，所有用到显示数的{{}}，里面的数据都会自动更新。首次加载的时候，new Vue{}会自动找到{{}}，用程序中的变量值，替换{{变量}}，当程序中的变量被修改的时候，再次扫描虚拟DOM树，找打这里，用新值自动替换。
{{}}的用法：
1、Model变量名：
{{showMessage}}
data:{
showMessage:"Hello world"}
2、算数/比较/逻辑/三目运算（过滤器代替它）
3、方法的调用（计算属性代替）
4、对象属性的访问
5、数组下标访问
6、字符串的拼接
7、创建对象
8、
指令（13种）
什么是指令：Directive：就是为html添加新功能的自定义属性，因为html本身是静态的，不具有任何动态生成能力，所以当我们想要在html中使用程序的一些特征的时候，例如：“分支”，“循环”等，就需要指令。
（1）v-bind：在vue中，元素的属性不能使用{{}}进行绑定，必须使用“v-bind”或“：”来进行绑定。
注意：“：”是“v-bind”的缩写
普通绑定：
动态绑定：
（2）控制元素的显示/隐藏
a、控制一个元素的显示/隐藏
v-show:
提示：v-show会判断条件是否成立，若条件成立，则显示数据，否则隐藏该元素
原理：使用css中的display来控制元素的显示/隐藏
b、两个元素，二选一显示
v-if
v-else
c、多个元素，多选一显示
v-if
v-else-if
...
提示：若v-if的条件成立，就显示v-if的元素，之后的元素不再显示，若v-if的条件不成立，则按顺序判断每个v-else-if的条件，哪个成立就选哪个，其他元素不再显示。若所有的条件都不满足，就显示v-else。
原理：v-if,v-else-if,v-else不是用display：none进行隐藏/显示的，而是而是彻底的删除不显示的元素，v-if,v-else-if,v-else，元素必须是紧邻的兄弟元素，中间不能阻隔任何的其他元素。
（3）、反复生成多个相同结构的元素
v-for：会自动遍历数组/对象/字符串中的每个元素，每遍历一个元素，就会自动创建
elem:变量名
i:下标
：key 是在内存中为每个html元素副本添加一个唯一标识。若每个html元素副本都有唯一的标识，则每次修改数组元素的时候，v-for只需找到受影响的哪一个html元素副本，修改即可。其余不受影响
面试题：v-for为什么一定要加key？（面试题库）
提高效率
注意：
1、v-for一定要写在重复生成的元素上，而不是写在父元素上。
2、若不关心下标，只关心元素，可以简写
3、of和in是可以相互替代的，用法完全一样，vue中v-for统一了js中for of和for in，即可以
遍历索引数组，又可以比哪里对象
4、of会自动取出数组/集合中的每个元素的值和下标，保存到右边的变量中，若of后世数字，那么of会从1开始迭代递增到目标数字
（4）v-on：
1、普通绑定：
2、动态绑定:
data:{
变量名：事件名
}
注意：v-on可以缩写为：@
提示：无论是data中的变量，还是methods中的函数，只要进入new Vue（）以后，都直接隶属于new Vue（），所以在new Vue()的直属方法中，使用this可以直接调用变量。
问题：若将button按钮换成a标签，href=“...”属性，默认会改变地址栏或跳转到其他页面。
解决问题：（阻止默认行为）。
1、js中，实参：event
function(e){
e.preventDefault();
}
2、vue中，
实参：$event
fn(e){
e.preventDefault();
}
提示：\(event是vue对象的内置变量，是将DOM事件对象e封装后得到的产物，是现成的内置变量，可以直接使用，只要想要vue的处理函数中使用事件对象，就必须在html绑定的调用方法中传入\)event。
3、使用事件修饰符
事件修饰符会自动实现原DOM事件对象操作的特殊属性，当需要修改事件的行为时，就要使用事件修饰符。
.prevent
使用.prevent代替内置变量$event下的e.preventDefault()，阻止默认行为。
.stop
使用.stop代替内置变量$event下的e.stopPropagation(),取消冒泡/蔓延。
多个修饰符可以同时修饰同一个事件，而且与顺序无关。
（5）、v-html绑定html片段
v-html专门用于加载一段html的代码片段，功能类似于js中的innerHTML()
data：{
变量名："
Hello World
"
}
（6）、v-cloak：防止用户短暂看到{{}}的语法
v-cloak让元素进行默认隐藏，直至内容准备就绪的时候，才会自定的显示出来，可以防止用户短暂看到{{}}内的语法。
手动添加一个属性选择器，隐藏所有加v-cloak的元素。
[v-cloak]{display:none;}
原理：在程序开始的时候，需要由我们手动添加display:none，准备就绪后，vue会自动将v-cloak属性删除，这个时候，也就删除了display:none属性，元素也就能显示出来了。
（7）、v-text:是{{}}的等效指令，只不过v-text是写在属性中的，而{{}}是写在内容中的。
给需要隐藏的元素添加v-text，v-text的后面就是我们要显示的内容。
（8）、保护{{}}中的内容不被编译
v-pre:保护当前元素中的{{}}语法，不会被绑定渲染
data:{
info:"你猜我再不在"
}
（9）、唯一不变元素
v-once:当前元素的{{}}语法对应的数据只能绑定一次，以后即使模型数据发生改变，也不会再改变了
data:{
name:"剋剋"
}
原理：只在首次加载的时候，一次性的将数据模型数据显示在当前元素中，不会将元素注册到监听队列中。正常情况下，watch中，有一个队列，维护这每个数据变量和页面之间的对应关系。每次数据模型发生改变后，都会通知watch，watch会遍历受到该数据变量影响的元素，并逐个的修改他们。通过减少监视的元素个数，可以优化页面绑定的效率。
评论留言