2020/7/30 vue复习
vue:构建用户界面，只关注视图层
Vue中一个核心的概念就是让元素不再操作DOM,解放用户双手，让程序员更多的去关心业务逻辑操作
模板引擎带来的问题：比如有1000条记录进行升序排列，可能只有2条记录不是顺序的，这样就会导致渲染过多，浪费性能，所以框架就出来了，帮组我们减少数据操作，通过框架的指令，让程序员更多关注业务逻辑
框架与库的区别：
框架：完整的解决方案，对项目侵入性比较大，项目需要更换框架，则需要重构整个项目
库（插件）：提供某个小功能，对对项目侵入性比较小，容易切换，影响小
（后端）MVC : M:model层数据CRUD V：视图层前端页面 C:业务逻辑层
（前端）MVVM：把每个页面分成了M,V,VM ,其中VM是MVVM的核心，因为VM是M,V之间的调度者
使用了MVVM思想主要是为了让我们开发更加方便，因为MVVM提供了数据的双向绑定（由VM提供）
当我们导入包之后，在浏览器内存中就多了一个Vue构造函数
用localhost访问页面时候，要将vue.js文件放在同级目录下
{{msg}}:插件表达式获取Vue实列对象中的data对象中的msg属性
v-text: 也能获取显示msg属性值，区别就是v-text无闪烁问题
v-text 与v-html都会将内容覆盖，但是v-html能识别html代码
v-bind是vue中提供绑定属性的指令，v-bind会把后面引号中内容当做js代码执行 用 : 可以代替 v-bind: 这样更快捷
v-on指令替代绑定事件缩写是@
<button v-on:click='show'>按钮</button>
{{msg}} 数据发生变化的时候 模板也会变化
{{*msg}} 数据只会绑定一次 之后不会跟着数据发生变化了
{{{msg}}} 三个大括号的 是会去解析数据里 面的html标签的 （v-html）
在vm实列中想要调用data上的数据或者methods方法，必须通过this.属性名或者this.方法名，这里this是Vue的实列对象
VM:会简单自己内部data数据，只要data数据一改变就会将新的数据应用要页面上去，这样程序员就不用关心如何把新数据渲染上去，只要关心数据就行了
vue事件修饰符：
模板字符串：
v-model 提供数据双向绑定
对象的属性名可带引号可不带但是属性名带短斜线就必须带引号
<p :style="{color:'red','font-weight':200}">第一种方法</p>
<!-- 注意v-for循环的时候key属性只能使用num或者string
key在使用时，必须用v-bind指定key的值的值， -->
用key来唯一表示你绑定的是哪一项，使得数据关联起来，否则
<!--v-if特点：每次都会重新删除和创建元素
v-show不会删除DOM元素，只会切换display属性
如果元素涉及到频繁的切换，最好不要用V-if总是
不断的删除和重新创建消耗内存，如果元素永远
不会显示被用户看到，那就用v-if 这样不存在-->
第一章要点总结：
<!-- 在vue中使用事件绑定机制，如果加了小括号就可以传参了 -->
<a href="" @click.prevent='del(item.id)'>删除</a>
del方法中小括号可加可不加，要传参就加
专门查找索引的
this.list.findIndex(index => {
if (item.id == id) {
return true;
}
})
ES6为Array增加了find()，findIndex函数。（找到不会继续再找）
find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。
findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
Jquery中 用contains 来筛选包含某个字符串的元素
将所有包含哈的元素选出来，以数组的形式返回
正则补充：
1./g 表示该表达式将用来在输入字符串中查找所有可能的匹配,返回的结果可以是多个。如果不加...
2./i 表示匹配的时候不区分大小写,这个跟其它语言的正则用法相同
3./m 表示多行匹配。什么是多行匹配呢?就是匹配换行符两端的潜在匹配。影响正则中的^$符号
4./s 与/m相对,单行模式匹配。
字符串的padStart（maxlength,’要填充的字符串’）方法
规定字符串的长度为maxlength，不足的就在前面拿字符串填充
字符串的padEnd（maxlength,’要填充的字符串’）方法
规定字符串的长度为maxlength，不足的就在后面拿字符串填充
按键修饰符：
@keyup.enter='add'
自定义按键修饰符
@keyup.123='add'
但是keycode不好记，自定义全局按键修饰符，这样按f2就ok了
自定义全局指令
<!--包括自定义指令，Vue中所有指令都已V-开头-->
全局指令的定义：
Vue.directive('focus', {…})
自定义私有指令：
自定义指令中 v-color的写法
<input type="text" class="form-control" v-model='keywords' id='search' v-focus v-color="'blue'">
直接写blue表示变量,会去data中找变量blue对应的数据，再加单引号表示字符串
全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
省去了bind: update: 相当于在bind update里都写了一份这个函数
'fontsize': function(el, binding) { //这个bind等同于把代码写到bind和uodate中去
el.style.fontSize = binding.value + 'px ';
}
设置样式可以在bind中定义样式可以，样式通过指令绑定给了元素，不管元素有没有插入到DOM树中，都会有内敛样式，将来都会解析应用到这个元素
与js行为有关的操作，最好在inserted中写，在bind中写不生效，
vue实例的生命周期：
生命周期钩子=生命周期函数=生命周期事件
用parseInt会将非数字部分忽略
console.log(parseInt('30px'));//30
<tr v-for='item in search(keywords)' :key='item.id'>
自定义search方法内部进行循环(主要用到filter与includes)包含关键字keywords的item筛选遍历出来
<tr v-for='(item,i) in search(keywords)' :key='item.id'>
多个参数i可以拿到item的索引（有时候id是乱的，可根据索引删除）
beforeCreate():实例被全部创建出来，就会执行这个函数，data中数据, methods还没被初始化，调用拿不到的
created(): 到created中 data数据，methods已经被初始化好,最早可以在这里用
beforeMount: 这里表示vue在编译模板，把Vue代码那些指令执行，在内存中渲染好模板，还没有挂载在页面上（显示在页面上） 如页面中{{msg}} 打印出来还是{{msg}}, data中数据还没有挂载到页面上去（数据还没把{{msg}}替换）
mounted():用户可以看到渲染好的页面，是实列创建期间的最后一个生命周期函数，当执行到这个阶段，表示vue实列已经被创建好了 {{msg}}等数据也被替换了，没被用的话就躺在内存中等待被调用，要操作DOM节点，最早要在mopunted()中操作
当实列中数据改变时，这俩个事件才会触发（触发次数0~无穷）
beforeUpdate: 数据被更新时，才会触发，data中数据是最新的，但是页面中的数据还没有被更新
updated: 到updated时，已经将data中的最新数据重新渲染一份到内存DOM树，当内存DOM树被更新后就会将DOM树中的内容重新渲染到页面上去，此时完成了从data=>页面的渲染 （M=>V）
当执行到beforeDestory（）: vue实列从运行阶段到销毁阶段，但是没有真正的执行销毁过程，实例中的methods和data 都还没被销毁
destoryed():到这个阶段，data,methods等都会销毁了
全局过滤器： Vue.filter('dataFormat', function(dataStr, panter = '') {}
dataStr是传过来要处理的数据，
dataFormat是过滤器名
panter:意思是样式，就是要对dataStr做什么样式处理