今天是刘小爱自学Java的第137天。
感谢你的观看，谢谢你。
image
学习计划安排如下：
-
Vue的深入学习，emm准确地说还不能算是深入学习，我有点高估自己的学习进度了。
-
本来打算两天时间做一个基础入门的，毕竟教程也就一天的内容，看来计划赶不上变化。
-
vue中三大常用属性的小结、生命周期钩子的了解，以及指令的初步接触。
-
指令有点多，只能留到明天继续补全了。
一、回顾与生命周期
补充说明三大属性，当然vue肯定不止这些，只不过时间有限，只学下最常见的。
1回顾
image
每次new一个Vue实例都需要关联模板，Vue会基于此模板进行视图渲染。
①el属性：指定视图模板
这里是通过el+id选择器指定视图模板，例子中也就是id为app的div标签。
当然还可以通过template来指定视图模板，这种方式我们暂且就不学了。
②data属性：指定数据模型
data也就对应着数据模型，数据相关的都可以放在这里面。
③methods属性：指定方法模型
注意是methods，后面有个s不要忘记了，一开始我直接写的method，就出了问题。
其实这也很好理解，methods里面是存放方法的，肯定不止一个，故用复数形式。
例子中helloVue是方法名，其中function可以省略，直接写一个helloVue方法。
2生命周期钩子
钩子，就可以将其理解成回调函数，Vue为生命周期中的每个状态都设置了钩子函数。
每当Vue实例处于不同的生命周期时，对应的方法就会被触发调用，其中生命周期有好几个状态，我们只学最常见的两个：
image
①created
代表在vue实例创建后，通过控制台我们可以发现：在创建vue实例之后，Vue才会调用create方法。
②beforeCreate
代表在vue实例创建之前，通过控制台我们可以发现：在创建vue实例之前，Vue会先调用beforeCreate方法。
注意：这两个函数这里是用的省略写法，省略了function这个关键字。
3关于this
this和Java中的意思是差不多的，this用一句话说明就是：“谁调用我，它就是谁。”
我们做一个测试，同时引入几个知识点：
image
①setTimeout()
设置一个定时器，有两个参数：第一个参数为一个函数，第二个参数为定时时间，例子中也就是2000毫秒后执行函数。
此时this指的是Window对象，因为在js中设定了定时器，时间到了后，会由window去调用前面的函数并执行，所以this指的就是它。
②setTimeout()箭头函数
该方式为ES6中的语法，这块我们没有专门学，知道有这个函数即可。
同样是setTimeout()方法，只不过写法不同，为何这里的this指的又是当前vue对象本身？
箭头函数底层做了处理，将其转化成了对应的vue对象，显然这种方式是我们所需要的，以后基本都以箭头函数这种写法为主。
二、插值闪烁
有时使用电脑或者手机，因为网速较慢，页面加载很慢会出现看到源码的情况，做个测试：
image
在浏览器中设置网络为3G网络，在刷新页面时会先看到{{name}}，大约2秒后，页面加载完成才会显示正常的数据。
这个也好理解，页面是从上到下执行的：
-
当页面加载到div标签时，JS还未加载到，所以name的值是多少并不知道。
-
当页面加载完毕后才能显示正确的数据。
这种情况就叫做差值闪烁，以差值闪烁为例子，引出对于“指令”的学习。
三、指令
什么是指令？
指令是指带有 v-前缀的特殊属性。
例如在回顾中的v-model，代表了就是view和model的双向绑定。
那差值闪烁的问题怎么解决呢？
1v-text和v-html
image
①指令：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的。
我们以复选框作为一个例子。
image
①checkbox
这就是一个复选框，用v-model指令将它们一一和hobbys这个属性绑定。
hobbys.join()可以将获取的元素以参数内容的形式隔开。
②hobbys:[]
这个符号所表示的就是一个数组，和Java中是一样的。
其中值得注意的是：
多个CheckBox对应一个model时，model的类型是一个数组；单个checkbox值是boolean类型。
最后
时间受限，剩下的只能明天接着说了，谢谢你的观看。
如果可以的话，麻烦帮忙点个赞，谢谢你。
网友评论