【微服务】137:Vue之生命周期钩子

vue

目录

    • 一、回顾与生命周期
    • 二、插值闪烁
    • 三、指令
    • 最后

今天是刘小爱自学Java的第137天。

感谢你的观看,谢谢你。

学习计划安排如下:

  • Vue的深入学习,emm准确地说还不能算是深入学习,我有点高估自己的学习进度了。
  • 本来打算两天时间做一个基础入门的,毕竟教程也就一天的内容,看来计划赶不上变化。
  • vue中三大常用属性的小结、生命周期钩子的了解,以及指令的初步接触。
  • 指令有点多,只能留到明天继续补全了。

一、回顾与生命周期

补充说明三大属性,当然vue肯定不止这些,只不过时间有限,只学下最常见的。

1回顾

每次new一个Vue实例都需要关联模板,Vue会基于此模板进行视图渲染。

①el属性:指定视图模板

这里是通过el+id选择器指定视图模板,例子中也就是id为app的div标签。

当然还可以通过template来指定视图模板,这种方式我们暂且就不学了。

②data属性:指定数据模型

data也就对应着数据模型,数据相关的都可以放在这里面。

③methods属性:指定方法模型

注意是methods,后面有个s不要忘记了,一开始我直接写的method,就出了问题。

其实这也很好理解,methods里面是存放方法的,肯定不止一个,故用复数形式。

例子中helloVue是方法名,其中function可以省略,直接写一个helloVue方法。

2生命周期钩子

钩子,就可以将其理解成回调函数,Vue为生命周期中的每个状态都设置了钩子函数

每当Vue实例处于不同的生命周期时,对应的方法就会被触发调用,其中生命周期有好几个状态,我们只学最常见的两个:

①created

代表在vue实例创建后,通过控制台我们可以发现:在创建vue实例之后,Vue才会调用create方法。

②beforeCreate

代表在vue实例创建之前,通过控制台我们可以发现:在创建vue实例之前,Vue会先调用beforeCreate方法。

注意:这两个函数这里是用的省略写法,省略了function这个关键字。

3关于this

this和Java中的意思是差不多的,this用一句话说明就是:“谁调用我,它就是谁。”

我们做一个测试,同时引入几个知识点:

①setTimeout()

设置一个定时器,有两个参数:第一个参数为一个函数,第二个参数为定时时间,例子中也就是2000毫秒后执行函数。

此时this指的是Window对象,因为在js中设定了定时器,时间到了后,会由window去调用前面的函数并执行,所以this指的就是它。

②setTimeout()箭头函数

该方式为ES6中的语法,这块我们没有专门学,知道有这个函数即可。

同样是setTimeout()方法,只不过写法不同,为何这里的this指的又是当前vue对象本身?

箭头函数底层做了处理,将其转化成了对应的vue对象,显然这种方式是我们所需要的,以后基本都以箭头函数这种写法为主。

二、插值闪烁

有时使用电脑或者手机,因为网速较慢,页面加载很慢会出现看到源码的情况,做个测试:

在浏览器中设置网络为3G网络,在刷新页面时会先看到{{name}},大约2秒后,页面加载完成才会显示正常的数据。

这个也好理解,页面是从上到下执行的:

  • 当页面加载到div标签时,JS还未加载到,所以name的值是多少并不知道。

  • 当页面加载完毕后才能显示正确的数据。

这种情况就叫做差值闪烁,以差值闪烁为例子,引出对于“指令”的学习。

三、指令

什么是指令?

指令是指带有 v-前缀的特殊属性。

例如在回顾中的v-model,代表了就是view和model的双向绑定。

那差值闪烁的问题怎么解决呢?

1v-text和v-html

①指令:v-text

将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出。

②指令:v-html

将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染。

这个就和jQuery中的html方法太像了。

2v-model

这个指令我们昨天就接触过,回顾中也有,是应用在input标签中的text类型中。

其实目前v-model的可使用元素有:

input,select,textarea,checkbox,radio,components(自定义组件)

除了最后一项,其它都是表单的输入项,我回顾了一下我以前的form表单笔记。

vue中将单选框radio,复选框checkbox单独拎出来了,这些本来是属于input的。

我们以复选框作为一个例子。

①checkbox

这就是一个复选框,用v-model指令将它们一一和hobbys这个属性绑定。

hobbys.join()可以将获取的元素以参数内容的形式隔开。

②hobbys:[]

这个符号所表示的就是一个数组,和Java中是一样的。

其中值得注意的是:

多个CheckBox对应一个model时,model的类型是一个数组;单个checkbox值是boolean类型。

最后

时间受限,剩下的只能明天接着说了,谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。

以上是 【微服务】137:Vue之生命周期钩子 的全部内容, 来源链接: utcz.com/z/376883.html

回到顶部