目录
目录
VUE简介
Vue可以自顶向上逐步的应用
Vue的特点
Vue的实现
Vue入门
模板语法
数据绑定
el和data的两个写法
理解MVVM
数据代理
Vue 事件
Vue事件的基本使用
Vue事件修饰符
Vue键盘事件
计算属性
姓名案例-插值语法实现
姓名案例-methods方法实现
姓名案例-计算属性实现
姓名案例-计算属性实现(简写)(只考虑读,不考虑写的情况)
监视属性
天气案例-监视属性1
天气案例监视属性2
天气案例-深度监视
天气案例-监视的简写形式
姓名案例-watch实现
绑定class样式与style样式
渲染
条件渲染
列表渲染
列表渲染-基本列表
列表渲染-key的原理
列表渲染-列表过滤
列表渲染-列表排序
列表渲染-更新时的一个问题
列表渲染-Vue检测数据改变的原理(对象)
列表渲染-模拟一个数据监测
列表渲染-Vue.set的使用
列表渲染-Vue监测数据改变的原理(数组)
列表渲染-总结Vue数据监测
数据劫持与数据代理
数据劫持
一、Object.defineProperty
1、不能监听数组的变化
2、必须遍历对象的每个属性
3、必须深层遍历嵌套的对象
4、造成的问题
二、Proxy
一道面试题
收集表单数据
过滤器
内置指令
内置指令(v-text指令)
内置指令(v-html指令)
内置指令(v-cloak指令)
内置指令(v-once指令)
内置指令(v-pre指令)
自定义指令
自定义指令-函数式
自定义指令-对象式
自定义指令-回顾一个DOM操作
自定义指令-总结
生命周期
引出生命周期
分析生命周期
总结生命周期
涉及到的资料
链接:https://pan.baidu.com/s/1MhmbgGHQOhZOpr5GH9K0fw?pwd=n2qe
提取码:n2qe
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue可以自顶向上逐步的应用
简单应用:主需要一个轻量小巧的核心库
复杂应用:可以引入各式各样的Vue插件
1. 采用组件化模式,提高代码复用率,且让代码更好维护。
2. 声明式编码,让编码人员无需直接操作DOM,提高开发效率。
//命令式编码
//准备html字符串
let htmlStr = ''
//遍历数据拼接HTML字符串
persons.forEach(p => {
htmlStr += '${p.id} - ${p.name} - ${p.age} '
});
//获取list元素
let list = document.getElementById('list')
//修改内容(亲自操作DOM)
list.innerHTML = htmlStr
//声明式编码
-
{{p,id} - {p.name} - {p.age}}
数据先交给虚拟DOM,再由虚拟DOM交给真实页面DOM
Vue入门
Hello {{name}},{{adress}},{{Date.now()}}
Hello {{name}},{{adress}}
模板语法
数据绑定
单向数据绑定:
双向数据绑定:
el与data的两种写法
你好,{{name}}
MVVM模型
学校名称:{{name}}
学校地址:{{address}}
回顾Object.defineproperty方法
事件的基本使用
欢迎来到{{name}}学习
事件修饰符
键盘事件
欢迎来到{{name}}学习
计算属性-插值语法实现
姓:
名:
姓名:{{firstName.slice(0,3)}}-{{lastName}}
计算属性-methods方法实现
姓:
名:
姓名:{{fullName()}}
计算属性-计算属性方法实现
姓:
名:
姓名:{{fullName}}
计算属性-计算属性简写
姓:
名:
姓名:{{fullName}}
监视属性
今天天气很{{info}}
监视属性
今天天气很{{info}}
监视属性
今天天气很{{info}}
a的值是:{{numbers.a}}
b的值是:{{numbers.b}}
监视属性(简写)
今天天气很{{info}}
姓名案例-watch实现
姓:
名:
姓名:{{fullName}}
绑定样式
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}
条件渲染
当前的n值是{{n}}
你好
尚硅谷
北京
基本列表
人员列表
- {{p.name}}--{{p.age}}
- {{a}}--{{b}}
汽车信息
-
{{value}}--{{k}}
测试遍历字符串
-
{{char}}--{{index}}
测试遍历指定次数
-
{{a}}--{{b}}
列表渲染-key的原理
人员列表
-
{{p.name}}--{{p.age}}
列表渲染-列表过滤
人员列表
- {{p.name}}--{{p.age}}--{{p.sex}}
列表渲染-列表排序
-
{{p.name}}--{{p.age}}--{{p.sex}}
列表渲染-更新时的一个问题
人员列表
-
{{p.name}}--{{p.age}}--{{p.sex}}
列表渲染-Vue监测数据改变的原理(对象)
学校名称:{{name}}
学校地址:{{address}}
列表渲染-模拟一个数据检测
列表渲染-Vue.set的使用
学校名称:{{school.name}}
学校地址:{{school.address}}
校长是:{{school.leader}}
学生信息:
学生姓名:{{student.name}}
学生性别:{{student.sex}}
学生年龄(真实):{{student.age.rAge}}
学生年龄(对外):{{student.age.sAge}}
- {{f.name}}--{{f.age}}
列表渲染-Vue监测数据改变的原理(数组)
学校名称:{{school.name}}
学校地址:{{school.address}}
校长是:{{school.leader}}
学生信息:
学生姓名:{{student.name}}
学生性别:{{student.sex}}
学生年龄(真实):{{student.age.rAge}}
学生年龄(对外):{{student.age.sAge}}
爱好
- {{h}}
朋友们
- {{f.name}}--{{f.age}}
后添加的Jack属性也是响应式的!
列表渲染-总结Vue数据监测
学生信息
姓名:{{student.name}}
年龄:{{student.age}}
性别: {{student.sex}}
爱好:
-
{{h}}
朋友们
-
{{f.name}}--{{f.age}}
指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。
比较典型的是Object.defineProperty()和 ES2016 中新增的Proxy对象。数据劫持最著名的应用当属双向绑定,这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是Object.defineProperty()(Vue 在 3.x 版本之后改用 Proxy 进行实现)。
Vue 的双向绑定已经升级为前端面试的必考题,原理我就不再重复了,网上一大片。简单来说就是利用 Object.defineProperty(),并且把内部解耦为 Observer, Dep, 并使用 Watcher 相连。
Object.defineProperty()的问题主要有三个:
let arr = [1,2,3]
let obj = {}
Object.defineProperty(obj, 'arr', {
get () {
console.log('get arr')
return arr
},
set (newVal) {
console.log('set', newVal)
arr = newVal
}
})
obj.arr.push(4) // 只会打印 get arr, 不会打印 set
obj.arr = [1,2,3,4] // 这个能正常 set
数组的以下几个方法不会触发 set:
push
pop
shift
unshift
splice
sort
reverse
Vue 把这些方法定义为变异方法 (mutation method),指的是会修改原来数组的方法。与之对应则是非变异方法 (non-mutating method),例如 filter, concat, slice 等,它们都不会修改原始数组,而会返回一个新的数组。Vue 官网有相关文档讲述这个问题。
使用 Object.defineProperty() 多数要配合 Object.keys() 和遍历,于是多了一层嵌套。如:
Object.keys(obj).forEach(key => {
Object.defineProperty(obj, key, {
// ...
})
})
所谓的嵌套对象,是指类似
let obj = {
info: {
name: 'eason'
}
}
如果是这一类嵌套对象,那就必须逐层遍历,直到把每个对象的每个属性都调用Object.defineProperty()为止。 Vue
的源码中就能找到这样的逻辑 (叫做 walk
方法)。
造成所谓的响应式数据,DOM无法进行更新。
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式属性。例如,对于:
Vue.set(vm.someObject, 'b', 2)
您还可以使用 vm.$set 实例方法,这也是全局 Vue.set
方法的别名:
this.$set(this.someObject,'b',2)
有时你可能需要为已有对象赋值多个新属性,比如使用 Object.assign()
或 _.extend()
。但是,这样添加到对象上的新属性不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
也有一些数组相关的注意事项,之前已经在列表渲染中讲过。
在数据劫持这个问题上,Proxy 可以被认为是 Object.defineProperty()的升级版。外界对某个对象的访问,都必须经过这层拦截。因此它是针对 整个对象,而不是 对象的某个属性,所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty()的第二个问题。
let obj = {
name: 'Eason',
age: 30
}
let handler = {
get (target, key, receiver) {
console.log('get', key)
return Reflect.get(target, key, receiver)
},
set (target, key, value, receiver) {
console.log('set', key, value)
return Reflect.set(target, key, value, receiver)
}
}
let proxy = new Proxy(obj, handler)
proxy.name = 'Zoe' // set name Zoe
proxy.age = 18 // set age 18
什么样的 a 可以满足 (a === 1 && a === 2 && a === 3) === true 呢?(注意是 3 个 =,也就是严格相等)???
Object.defineProperty(window, 'a', {
get () {
current++
return current
}
})
console.log(a === 1 && a === 2 && a === 3) // true
收集表单数据
过滤器
显示格式化后的时间
现在是{{fmtTime}}
现在是{{getFmtTime()}}
现在是{{time | timeFormater}}
现在是{{time | timeFormater('YYYY_MM_DD')}}
现在是{{time | timeFormater('YYYY_MM_DD') | mySlice}}
{{msg | mySlice}}
内置指令(v-text)
你好,{{name}}
你好
{{str}}
内置指令
你好{{name}}
如果cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击,窃取cookie内容,这样就增加了cookie的安全性,即便是这样,也不要将重要信息存入cookie。XSS全称Cross SiteScript,跨站脚本攻击,是Web程序中常见的漏洞,XSS属于被动式且用于客户端的攻击方式,所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当其它用户浏览该网站时,这段HTML代码会自动执行,从而达到攻击的目的。如,盗取用户Cookie、破坏页面结构、重定向到其它网站等。
v-clock指令
{{name}}
v-once指令
初始化的n值是{{n}}
当前的n值是{{n}}
v-pre指令
Vue其实很简单
当前的n值是{{n}}
自定义指令-函数式
{{name}}
当前的n值是:
放大十倍后的n值是:
自定义指令-对象式
{{name}}
当前的n值是:
放大十倍后的n值是:
自定义指令-demo
自定义指令-总结
{{name}}
当前的n值是:
放大十倍后的n值是:
放大十倍后的x值是:
引出生命周期
你好啊
欢迎学习Vue
使用断点,证明beforeMount函数,所有对于DOM的操作,最终都不奏效
证明,如果没有el,只有beforeCreate,create这两个函数被调用,使用了vm.$mount('root')可以让接下来的函数正常执行(让图里面的两个黄色三角走通了)
Vue官网对于$destroy()的解释
分析生命周期
当前的n值是:{{n}}
总结声明周期
欢迎学习Vue