VUE学习笔记第一章-Vue核心（尚硅谷）

目录

 

目录

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可以自顶向上逐步的应用

简单应用：主需要一个轻量小巧的核心库

复杂应用：可以引入各式各样的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}}

 Vue的实现

数据先交给虚拟DOM，再由虚拟DOM交给真实页面DOM

Vue入门

	
		
		
		
	
	
		
		
		
		
		

			
Hello {{name}},{{adress}},{{Date.now()}}

		
		

			
Hello {{name}},{{adress}}
		
		
	

模板语法

	
		
		
		
	
	
		
		
		
		
			

				
插值语法
				
你好，{{name}}
				

				
指令语法
				尚硅谷官网
				尚硅谷{{school.name}}官网
			
	
	

数据绑定

	
		
		
		
		
	
	
		
		
		
		

			
			
			
			
			
			单向数据绑定：
			双向数据绑定：
			
			
			
			
		
		
	
	
	

el和data的两个写法

	
		
		
		
	
	
		
		

			
你好，{{name}}
		
	
		
	
	

理解MVVM

	
		
		
	
	
	
		
		
		
		
		

			
			
学校名称:{{name}}
			
学校地址：{{address}}
			
		
	
	
	

数据代理

Vue 事件 

Vue事件的基本使用

	
		
		
		
	
	
		

			
欢迎来到{{name}}学习
			点我提示信息
			点我提示信息
		
	
	
	
	
	

Vue事件修饰符

	
		
		
		
		
	
	
		
		
		

			
欢迎来到{{name}}学习
			
			
			点我提示信息
			
			
			

				点我提示信息
			
			
			
			点我提示信息
			
			
			

				div1
				

					div2
				
			
			
			
			

				点我提示信息
			
			
			
			

				
1
				
2
				
3
				
4
			
		
		
		
	
	
	

Vue键盘事件

	
		
		
		
	
	
		
		
		

			
欢迎来到{{name}}学习
			
		
	
	

 计算属性

姓名案例-插值语法实现

	
		
		
		
	
	
		

			姓：

			名：
			姓名：{{firstName.slice(0,3)}}-{{lastName}}
		
	
	

姓名案例-methods方法实现

	
		
		
		
	
	
		

			姓：

			名：
			姓名：{{fullName()}}
		
	
	

姓名案例-计算属性实现

	
		
		
		
	
	
		
		

			姓：

			名：
			姓名：{{fullName}}
		
	
	

姓名案例-计算属性实现（简写）（只考虑读，不考虑写的情况）

	
		
		
		
	
	
		

			姓：

			名：
			姓名：{{fullName}}
		
	
	

监视属性

天气案例-监视属性1

	
		
		
			
	
	
		

			
			
今天天气很{{info}}
			
			切换天气
			切换天气
		
	
	

天气案例监视属性2

	
		
		
			
			
	
	
		

			
			
今天天气很{{info}}
			
			切换天气
			切换天气
		
	
	

 天气案例-深度监视

	
		
		
			
			
	
	
		

			
			
今天天气很{{info}}
			
			切换天气
			

			
a的值是：{{numbers.a}}
			点我让a+1
			
b的值是：{{numbers.b}}
			点我让b+1
			彻底替换掉numbers
		
	
	

天气案例-监视的简写形式

	
		
		
			
			
	
	
		

			
			
今天天气很{{info}}
			
			切换天气
		
	
	

姓名案例-watch实现

	
		
		
		
		
		
		
	
	
		

			姓：

			名：
			姓名：{{fullName}} 

		
	
	

绑定class样式与style样式

	
		
		
		
			
	
	
		

			
			
{{name}}
			
			
			
{{name}}
			
			
			
{{name}}
			
			
			
			
			
			
			
{{name}}
			
			
{{name}}
			
{{name}}
		
	
	

渲染

条件渲染

	
		
		
		
			
	
	
		

			
当前的n值是{{n}}
			点我n+1
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		
	
	

列表渲染

列表渲染-基本列表

	
		
		
		
		
		
	
	
		
		
		

			
			
			
人员列表
			

				
{{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}}
			
		
	
	
	

列表渲染-总结Vue数据监测

 

 后添加的Jack属性也是响应式的！

	
		
		
		
		
		
	
	
		
		

			
学生信息
			
			年龄加1岁

			添加性别属性，默认值：男

			修改性别

			在列表首位添加一个朋友

			修改第一个朋友的名字为：张三

			添加一个爱好

			修改第一个爱好为：开车

			过滤到爱好中的抽烟
			
			
姓名：{{student.name}}
			
年龄：{{student.age}}
			
性别: {{student.sex}}
			
爱好：
			

				

					{{h}}
				
			
			
朋友们
			

				

					{{f.name}}--{{f.age}}
				
			
		
	
	
	
	

数据劫持与数据代理

数据劫持

指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。
比较典型的是Object.defineProperty()和 ES2016 中新增的Proxy对象。数据劫持最著名的应用当属双向绑定，这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是Object.defineProperty()(Vue 在 3.x 版本之后改用 Proxy 进行实现)。

一、Object.defineProperty

Vue 的双向绑定已经升级为前端面试的必考题，原理我就不再重复了，网上一大片。简单来说就是利用 Object.defineProperty()，并且把内部解耦为 Observer, Dep, 并使用 Watcher 相连。
Object.defineProperty()的问题主要有三个：

1、不能监听数组的变化

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 官网有相关文档讲述这个问题。

2、必须遍历对象的每个属性

使用 Object.defineProperty() 多数要配合 Object.keys() 和遍历，于是多了一层嵌套。如：

Object.keys(obj).forEach(key => {
  Object.defineProperty(obj, key, {
    // ...
  })
})

3、必须深层遍历嵌套的对象

所谓的嵌套对象，是指类似

let obj = {
  info: {
    name: 'eason'
  }
}

如果是这一类嵌套对象，那就必须逐层遍历，直到把每个对象的每个属性都调用Object.defineProperty()为止。 Vue 的源码中就能找到这样的逻辑 (叫做 walk 方法)。

4、造成的问题

造成所谓的响应式数据，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 

在数据劫持这个问题上，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}}
		
	
	
	

内置指令（v-html指令）

	
		
		
		
		
		
	
	
		

			
你好{{name}}
			

			

			

			

		
	
	
	

 如果cookie中设置了HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击，窃取cookie内容，这样就增加了cookie的安全性，即便是这样，也不要将重要信息存入cookie。XSS全称Cross SiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。

内置指令（v-cloak指令）

	
		
		
		
		
		
		
		
	
	
		

			
{{name}}
		
	
	

内置指令（v-once指令）

	
		
		
		
		
		
	
	
		

			
初始化的n值是{{n}}
			
当前的n值是{{n}}
			点我n+1
		
	
	
	

内置指令（v-pre指令）

	
		
		
		
		
		
	
	
		

			
Vue其实很简单
			
当前的n值是{{n}}
			点我n+1
		
	
	
	

自定义指令

自定义指令-函数式

	
		
		
		
		
		
	
	
		

			
{{name}}

			
当前的n值是： 
			
放大十倍后的n值是： 
			点我n+1
		
	
	
	

自定义指令-对象式

	
		
		
		
		
		
	
	
		

			
{{name}}
			
当前的n值是： 
			
放大十倍后的n值是： 
			点我n+1
			

			
		
	
	
	

自定义指令-回顾一个DOM操作

	
		
		
		
	
	
		点我创建一个输入框
		
	

自定义指令-总结

	
		
		
		
		
		
	
	
		

			
{{name}}
			
当前的n值是： 
			
放大十倍后的n值是： 
			
放大十倍后的x值是： 
			
			点我n+1
			
			

			
		
		
		

			
		
		
	
	
	

生命周期

引出生命周期

	
		
		
		
		
		
		
	
	
			

				
你好啊
				
				
					

						
					欢迎学习Vue
				
			
	
	
	

分析生命周期

使用断点，证明beforeMount函数，所有对于DOM的操作，最终都不奏效

 证明，如果没有el，只有beforeCreate,create这两个函数被调用，使用了vm.$mount('root')可以让接下来的函数正常执行（让图里面的两个黄色三角走通了）

Vue官网对于$destroy()的解释

	
		
		
		
		
	
	
			

				

				
当前的n值是:{{n}}
				点我n+1
				点我销毁vm
			
	
	
	

总结生命周期

	
		
		
		
		
		
	
	
		

			
欢迎学习Vue
			透明度设置为1
			点我停止变换