vue入门之基础语法(二)——vue实例的生命周期、指令

接上一篇:vue入门之基础语法(二)——创建实例和简单的指令http://blog.restartai.com/2018/09/vue-create-instance/

我们在上一篇简单的创建了一个vue实例,并且介绍了集中简单的常用的指令,比如控制元素显示隐藏的v-if/v-show、表单数据绑定的v-model、元素属性绑定的指令v-bind、事件方法绑定的指令v-on,其实vue中还有很多指令,甚至我们可以根据项目业务场景来自定义指令来让我们的工程变得简单,这篇我们先说一些稍微复杂的指令,然后再来说说vue的另一个重要的家伙【生命周期】。

  • 指令续集

    编号 指令名 作用
    1 v-html、v-text 这两个都是更新元素的文本,不同的是v-text更新的是元素的textContent、v-html更新的是元素的innerHTML如果我们要渲染一大段包含标签的后端返回的内容,这个时候就发现,模版语法并不能解析标签名,换行等等,这个时候就需要v-html了
    2 v-for 很重要的一个指令!基于源数据多次渲染元素,说的直白点就是循环渲染,想象一下100个li,难道要一个一个写么?v-for的源数据可以是数组,map对象,要特别注意key的使用
    3 v-once 只渲染组件或者元素一次,之后的渲染会被跳过,用于优化页面性能
    4 v-cloak、v-pre[介绍] v-pre:跳过这个元素和它的子元素的编译过程
    v-cloak: 这个指令保持在元素上直到关联实例结束编译

    虽然说指令多,但是常用的也就是v-if/v-show、v-on(@)、v-bind(:) 、v-for、v-model、
    v-html\v-text 后面介绍的三种,实际上用的是比较少的,当然,后面会有专门的一章来说自定义指令,vue还是给了开发者很大的开发空间的,如果能结合业务自定义契合公司业务的指令集,才是扩展了项目的可开发性。
    我们来看看这两个指令的使用:

v-html\v-text: 直接把data中的变量扔进去即可,主要看看区别【睁大眼睛哦】


是不是很神奇的发现了根本区别: v-text其实跟{{}}模版语法一样,直接渲染为文案,但是v-html会把标签,以及标签的样式等等都解析出来这就是两者的区别了。

v-for: 指令的重头戏!试想一下,我们ajax请求回来一串列表,然后渲染到页面的时候,难道你还要一个一个的分解一个一个的写吗?!!!emmmm?别闹,撩妹都没这么麻烦,何况我们有了v-for,来直接看一个例子:

 

注意,上面的例子中,我们没有加key值,为什么单独说这个key值呢?虽然说这是一个小家伙,但是有很大的作用,不管是微信小程序还是react等其他的前端框架,都有这个key在循环渲染的时候伴随左右,可谓是不写就警告你!写了又不知道干嘛???key其实相当于每一项的一个身份,通常情况下,如果数据结构很简单,我们直接渲染就好了,但是我们像跟踪每一项的时候,或者请求回来数据之后重用和重新排序现有元素,这家伙就是棒棒的~后面我们再细说了!

到这里我们的基础指令算是告一段落~后面会再补一篇自定义指令的博客~敬请期待!

  • 生命周期
    顾名思义,生命周期不就是一个生命的不同生命时期嘛~像人【幼儿园--》萝莉--》少女---》御姐--》少妇--》阿姨--》奶奶】再比如春夏秋冬,每一个事物都有属于自己的特殊生命时期。我们的vue实例也一样,基本上有八个生命周期,我们每一个过一遍,争取一遍记住咯
    【此图抽风,自行放大原图查看】

    基本的生命周期就是这几个,然而我们最常用的就是这几个,还有几个是特殊场景需要的,用列表的形式介绍一下

    编号 名称
    1
    2
    activated
    deactivated
    前者在keep-alive 组件激活时调用。
    后者在keep-alive 组件停用时调用。
    3 errorCapture 该生命周期是最新加的,用来捕获子组件的错误状态的,作为了解

    那么我们该如何书写呢?简单至极,你会写函数,就会写生命周期,因为每一个生命周期都对应着一个函数,如果我下面圈出来的这两个你记下来了,我想,你可以做很多有趣的事情~我们还可以在不同的生命周期函数中访问this实例,来达到修改/获取data中的值的目的

    我想,如果你js会一些基本操作,譬如【数组的增删改查,定时器,ajax请求的时候】你可以写出很浪漫的代码~也不至于现在偶一种独守空房的感觉

  • 生命周期和指令的使用,会伴随我们本系列博客的从头到尾,我们会在后续更深的博客中,给大家不一样的感觉,当我们学会了组件化,学会了路由,学会了模块化,你就会有搭积木一样的感觉,至于搭出来是一个茅草屋还是埃菲尔铁塔,这就看谁花的时间了。
    下期博文预告:vue入门之基础语法(三)——vue事件处理、如何对data数据做增删改查
  • 官方文档链接:
    条件循环(v-for): https://cn.vuejs.org/v2/guide/conditional.html
    生命周期:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

“vue入门之基础语法(二)——vue实例的生命周期、指令”的2个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注