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(elbinding) { //这个bind等同于把代码写到binduodate中去

                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(dataStrpanter = '') {}

dataStr是传过来要处理的数据,

dataFormat是过滤器名

panter:意思是样式,就是要对dataStr做什么样式处理

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页