Vue学习总结笔记(四)

文章目录

• 1. 使用Vue 写一个表单数据
• 2. Vue 过滤器
• • 2.1 moment.js 和 day.js 的库
  • 2.2 Vue的 过滤器的使用
• 3. v-text 指令
• 4. v-html 指令 (谨慎使用&＃xff01;&＃xff01;&＃xff01;)
• • 4.1 COOKIE 工作原理
  • 4.&＃xff12; v-html 指令
• 5. v-clock 指令
• 6. v-once 指令
• 7. v-pre 指令
• 8. Vue的 自定义指令
• • 8.1 设置自定义指令的 两种方式
  • 8.2 自定义指令的 element参数 和 binding参数
  • 8.3 自定义指令 对象式
  • 8.4 全局自定义指令
• 9. Vue的 生命周期
• • 9.1 Vue的生命周期 介绍
  • 9.2 Vue生命周期的 整体流程
  • 9.3 模板编译的流程
  • 9.4 Vue中的template 和 template标签
  • 9.5 Vue的生命周期 更新流程
  • 9.6 Vue的生命周期 销毁流程
  • 9.7 Vue 整个生命周期的使用
  • 9.8 在beforeDestroy函数方法中&＃xff0c;消除计时器等操作

1. 使用Vue 写一个表单数据

在这提一句&＃xff0c;在定义的checkbox中有一个属性为&＃xff1a;checked&＃xff0c;勾选了为true&＃xff0c;没有勾选为false。

需要记住的几点&＃xff1a;

1.&＃64;submit表单form一旦提交就会触发demo中的内容 ,提交后页面内容会自动跳转消失,这里我们可以用prevent来解决
2.label的for可以与input的id进行关联&＃xff0c;点击账号就可以切换到input光标上面。
3.trim可以去除多余的空格&＃xff0c;但是字符串中间的空格是无法去除的。
4.这里我们可以直接将input的type定义为number&＃xff0c;达到输入数字的效果。在Vue提供给的v-model.number&＃xff0c;在data中直接写成数字形式。
5.input设置为radio和name来设置单选和关联内容,注意v-model绑定的是value值&＃xff0c;这里设置的是radio没有输入框&＃xff0c;因此定义value值来传给data
6.这里如果我们不定义value属性,这里默认是得到的checked值,此外data中的hobby值必须是数组,不能定义字符串!!
7.我们在这定义v-model.lazy可以一口气输入完成内容&＃xff0c;失去光标后&＃xff0c;直接提交给data&＃xff0c;而不是时时刻刻提交
8.这里的checkbox与上面不同,直接接受checked的值true或者false就可以了

上面内容配合下面源码定义&＃xff1a;

2. Vue 过滤器

2.1 moment.js 和 day.js 的库

了解&＃xff0c;一个专门处理日期的库&＃xff0c;叫做moment.js。这个库对日期的操作很全面&＃xff0c;但是体积很大。

还有一个轻量级的库叫做day.js。

day.js的使用&＃xff1a;

2.2 Vue的 过滤器的使用

" | " ,这个符号叫做管道符。

过滤器的实现过程&＃xff1a;

配置单个对象内部过滤器&＃xff0c;也就是局部过滤器&＃xff1a;

还有一个全局过滤器&＃xff0c;全局过滤器呢&＃xff0c;就是所有的Vue实例对象或组件都可以使用。

注意&＃xff1a;有一个误区&＃xff0c;并不是过滤器只能用到插值语法中&＃xff0c;Vue指令属性有的也可以使用&＃xff0c;例如: v-bind&＃xff1b;当然也有一些不能使用过滤器&＃xff0c;例如:v-model。使用的状况也是一样。只不过很少在指令属性中使用而已。

总结&＃xff1a;

3. v-text 指令

• v-text属性会替换掉原先的文本内容&＃xff0c;并且不会解析标签完完全全当成文本解析。

  {{name}}

  本来的内容
  



4. v-html 指令 (谨慎使用&＃xff01;&＃xff01;&＃xff01;)

4.1 COOKIE 工作原理

关于COOKIE&＃xff0c;在登录时&＃xff0c;服务器会向浏览器发送COOKIEs&＃xff0c;作为判断标识。

我们可以使用COOKIE.Editor插件来将COOKIE导入或者导出。此插件需要去谷歌商店去下载。

我们在浏览器控制台使用&＃xff1a;document.COOKIE&＃xff0c;来查看网页目前的COOKIE。

4.&＃xff12; v-html 指令

Javascript:表示后面添加js代码。

我通过添加ducument.COOKIE&＃xff0c;转给别的网站这样别人的网站就拿到了你的COOKIE&＃xff0c;就可以用你的COOKIE进行一个登录等操作了&＃xff01;

通过上面的效果&＃xff0c;可以知道v-html是不能随便定义的&＃xff0c;因为它是在网站上进行动态渲染的&＃xff01;这样如果我们使用上面演示的效果&＃xff0c;就导致了COOKIE的泄露。

这种效果&＃xff0c;就叫做XSS攻击&＃xff0c;XSS攻击通常指的是通过利用网页开发时留下的漏洞&＃xff0c;通过巧妙的方法注入恶意指令代码到网页&＃xff0c;使用户加载并执行攻击者恶意制造的网页程序。

5. v-clock 指令

v-clock指令配合CSS可以解决js阻塞问题。

v-cloak属性&＃xff0c;一旦被Vue实例对象接管&＃xff0c;该属性会被自动删除。

通过这些机制&＃xff0c;我们就可以通过属性选择器&＃xff0c;来解决js发生阻塞停止了几秒&＃xff0c;这时页面也不会显示出未完成的代码块。

总体上&＃xff0c;当你的网速过慢时&＃xff0c;v-clock指令不会让还没有解析的代码&＃xff0c;跑到页面上去。

源码&＃xff1a;

6. v-once 指令

7. v-pre 指令

v-pre指令是一个提高Vue编译速度的指令&＃xff0c;有一些代码压根就没有应用到Vue中&＃xff0c;我们就可以给他设置v-pre指令&＃xff0c;Vue解析时直接跳过&＃xff0c;节约时间。

8. Vue的 自定义指令

8.1 设置自定义指令的 两种方式

Vue的自定义指令实际上就是我们通过自己设置dom元素来创建我们自己的Vue指令。

自定义指令的写法有两种如下: (假设我们写一个v-big的指令)

方式一&＃xff0c;函数式&＃xff1a;(简便一些&＃xff0c;但是不能处理细节问题)big:function(){}
方式二&＃xff0c;对象式&＃xff1a;(能够处理一些细节问题。)big:{key:vale,key:vale...key:vale}


8.2 自定义指令的 element参数 和 binding参数

自定义指令&＃xff0c;directives就有指令的意思。必须理解好element和binding的结构内容。

自定义指令的 element参数&＃xff1a;

element就是我们标记的dom标签元素本身&＃xff0c;这里我们可以判别element是否为真实DOM。

因为Vue有一个虚拟DOM&＃xff0c;所以判断是否为虚拟DOM还是真实DOM&＃xff0c;就可以通过下面两种方式来判别&＃xff1a;

• 方式一&＃xff1a;console.dir()来打印元素属性&＃xff0c;真实DOM包含很多元素属性。
  通过使用console.dir()来打印出它的元素内容是否包含真实dom的属性。
  在控制台中显示指定Javascript对象的属性&＃xff0c;并通过类似文件树样式的交互列表显示。
• 方式二&＃xff1a;instanceof HTMLElement 来判别返回true就是真实DOM

自定义指令的 binding参数&＃xff1a;

演示函数式写法&＃xff1a;

自定义指令什么时候会被调用&＃xff1f;
1.指令与元素成功绑定时(一上来)。2. 指令所在的模板重新解析时&＃xff0c;打个比方:如果我们在上面定义了name,我们修改name&＃xff0c;照样会引起big的调用。

8.3 自定义指令 对象式

自定义指令Vue函数式一个小问题&＃xff1a;

对于上面的问题我们就要用对象式来操作了&＃xff1a;

对象式&＃xff0c;要理解好三个函数&＃xff1a;

• bind(element,binding){}函数&＃xff1a;指令与元素成功绑定时(就是第一次加载页面绑定指令的时候)使用bind函数。

• inserted(element,binding){}函数&＃xff1a;指令所在元素被插入页面时&＃xff0c;使用inserted函数。

• update(element,binding){}函数&＃xff1a;指令所在的模板被重新解析时&＃xff0c;使用update()函数。

  n&＃43;1
  



Vue自定义指令对于多个单词要使用" - "来连接&＃xff1a;

对于自定义指令directives这里有一个非常注意的点&＃xff0c;在它里面定义的this指向的是Window全局&＃xff0c;而不是Vue实例对象。

8.4 全局自定义指令

9. Vue的 生命周期

9.1 Vue的生命周期 介绍

Vue绑定css属性的小注意事项&＃xff1a;

setInterval() 方法重复调用一个函数或执行一个代码段&＃xff0c;在每次调用之间具有固定的时间延迟。

Vue的生命周期又名&＃xff1a;生命周期回调函数&＃xff0c;生命周期函数&＃xff0c;生命周期钩子。

9.2 Vue生命周期的 整体流程

整体流程如下&＃xff1a;

9.3 模板编译的流程

9.4 Vue中的template 和 template标签

Vue中的template注意事项&＃xff1a;

template需要注意的是不能包含两个根元素节点&＃xff0c;h2和button就不能同时存在。
template写的内容会替换掉页面指向的内容。如下&＃xff1a;

Vue中的template&＃xff0c;设置template标签情况&＃xff1a;
template标签可以用&＃xff0c;但是要注意下面的情况&＃xff01;&＃xff01;

9.5 Vue的生命周期 更新流程

updated更新过程&＃xff1a;

9.6 Vue的生命周期 销毁流程

vm.$destroy()作用&＃xff1a;

完全销毁一个实例&＃xff0c;清理它与其它实例的连接&＃xff0c;解绑它的全部指令及事件监听器(这里的事件是自定义事件&＃xff0c;原生的DOM不会改变)。

多数场景不应该调用这个方法&＃xff0c;这个方法属于Vue实例对象自我解决(自杀)的效果。

9.7 Vue 整个生命周期的使用

生命周期就是在不同的阶段执行不同的方法。

9.8 在beforeDestroy函数方法中&＃xff0c;消除计时器等操作

计时器是全局的&＃xff0c;并不是伴随Vue对象实例产生或者销毁。

因此&＃xff0c;我们可以在beforeDestroy函数中&＃xff0c;进行清除。

如果我们用$destroy来毁灭Vue实例对象&＃xff0c;计时器它是不会被消除的&＃xff0c;这个时候我们既要保证毁灭了Vue实例对象&＃xff0c;又要保证计时器停止运作。

一般我们销毁实例对象后&＃xff0c;关闭那些相关的进程&＃xff0c;如计时器interval&＃xff0c;我们可以再beforeDestroy中给他们定义关闭。