0411_Vue_D5

Amor_1998

已于 2022-04-11 22:52:24 修改

阅读量577

点赞数

分类专栏：学习日志文章标签： vue.js

于 2022-04-11 22:52:19 首次发布

本文链接：https://blog.youkuaiyun.com/Amor_1998/article/details/124096049

版权

学习日志专栏收录该内容

10 篇文章

订阅专栏

ES6相关特性

箭头函数中 this 总是绑定总是指向对象自身=往外找

在非严格模式下，普通函数的 this 指向 window 对象
function Person(){
  this.age = 0;
 
  setInterval(() => {
    // |this| 指向 person 对象
    this.age++;
  }, 1000);
}
 
person = new Person();

ES6 允许声明在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法，并且允许在对象属性中进行计算操作

function getCar(make, model, value) {
  return {
    // 简写变量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value
 
    // 属性可以使用表达式计算值
    ['make' + make]: true,
 
    // 忽略 `function` 关键词简写对象函数
    depreciate() {
      this.value -= 2500;
    }
  };
}
 
let car = getCar('Barret', 'Lee', 40000);
 
// output: {
//     make: 'Barret',
//     model:'Lee',
//     value: 40000,
//     makeBarret: true,
//     depreciate: [Function: depreciate]
// }

ES6 中有一种十分简洁的方法组装一堆字符串和变量。

${ ... } 用来渲染一个变量
` 作为分隔符
let user = 'Barret';
console.log(`Hi ${user}!`); // Hi Barret!

for...of VS for...in

for...of 用于遍历一个迭代器，如数组：

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
  console.log(nickname);
}
// 结果: di, boo, punkeye

for...in 用来遍历对象中的属性：

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
  console.log(nickname);
}
Result: 0, 1, 2, size

12. Set 和 WeakSet

Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型：
let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add('strings');
mySet.add({ a: 1, b:2 });
可以通过 forEach 和 for...of 来遍历 Set 对象：
mySet.forEach((item) => {
  console.log(item);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
});
 
for (let value of mySet) {
  console.log(value);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
}

Set 同样有 delete() 和 clear() 方法。

WeakSet

类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次：

var ws = new WeakSet();
var obj = {};
var foo = {};
 
ws.add(window);
ws.add(obj);
 
ws.has(window); // true
ws.has(foo);    // false, foo 没有添加成功
 
ws.delete(window); // 从结合中删除 window 对象
ws.has(window);    // false, window 对象已经被删除

生命周期函数 / 钩子

a又名生命周期回调函数、生命周期函数、生命周期钩子
b是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
c生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
d生命周期函数中的 this 指向是vm或组件实例对象

<!doctype html>
<html>
<script type="text/javascript" src="../js/vue.js"></script>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>
 
	<body>
		<div id="root">
		<h2 :style="{opacity:opacity}">欢迎学习vue</h2>	 
		<!--  透明度：  css属性，数据名字-->
		
		<h2 v-if="a">你好啊啊</h2>
		</div>
	</body>
   <script type="text/javascript">
   	Vue.config.productionTip = false
	
	  new Vue({
		el:'#root',
		data:{
			a:false,
			opacity:1
		},
		methods:{
			
			},
		mounted(){  //Vue完成模板的解析，并把初始的真实DOM元素放入页面后（完成挂载）调用mounted
			console.log('mouted')
			 
				setInterval(()=>{
					this.opacity-=0.01
					if(this.opacity<=0) this.opacity=1
					},16)
		 
		}
	})
	//通过外部的定时器实现（不推荐）
	// setInterval(()=>{
	// 	vm.opacity-=0.01
	// 	if(vm.opacity<=0) vm.opacity=1
	// 	},16)
	 
   </script>
</html>

ES6新特性

块级作用域 let，const

	var	let-变量	const -常量
作用域	全局/函数	块级	块级
是否可再赋值	可变	可变	不可变（对象或者数组，可变）
是否必须初始化	是	不是	是

JSON 和 XML 都用于接收 web 服务端的数据。

JSON 实例

{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

XML 实例

<sites>
  <site>
    <name>菜鸟教程</name> <url>www.runoob.com</url>
  </site>
  <site>
    <name>google</name> <url>www.google.com</url>
  </site>
  <site>
    <name>微博</name> <url>www.weibo.com</url>
  </site>
</sites>

JSON 与 XML 的相同之处：

JSON 和 XML 数据都是 "自我描述" ，都易于理解。
JSON 和 XML 数据都是有层次的结构
JSON 和 XML 数据可以被大多数编程语言使用

JSON 与 XML 的不同之处：

JSON 不需要结束标签
JSON 更加简短
JSON 读写速度更快
JSON 可以使用数组

最大的不同是：XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。

JSON.parse(): 将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify(): 于将 JavaScript 值转换为 JSON 字符串。

JS核心

0JS核心知识梳理 - 威武的大萝卜 - 博客园