Vue模板语法
引入Vue.js
1、创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
双向数据绑定 : v-model
显示数据 : {{xxx}}
理解vue的mvvm实现
实例：
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 创建Vue实例（Vue是一个vue.js库提供的构建函数）
const vm = new Vue({//配置对象（属性名必须是指定的一些名称）
el: '#app',//element:选择器，表明将页面哪个元素交给Vue管理
data: {//数据（Model）
username: 'Vue'
}
})
vm.username = 'kobe';
</script>
2、MVVM：
Model：模型，数据对象（data）
View：视图，模板页面
ViewModel：视图模型（Vue的实例）
3、模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性)
双大括号表达式
语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法
指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
ES6、ES7语法
字符串的扩展
includes(str) : 判断是否包含指定的字符串
startsWith(str) : 判断是否以指定字符串开头
endsWith(str) : 判断是否以指定字符串结尾
repeat(count) : 重复指定次数
例：
<script type="text/javascript">
let str = 'asdfohsvckxnlck';
// console.log(str.includes('t'));
// console.log(str.includes('a'));
// console.log(str.startsWith('a'));
// console.log(str.endsWith('k'));
console.log(str.repeat(5));
</script>
数值扩展
二进制与八进制数值表示法: 二进制用0b, 八进制用0o
Number.isFinite(i) : 判断是否是有限大的数
Number.isNaN(i) : 判断是否是NaN
Number.isInteger(i) : 判断是否是整数
Number.parseInt(str) : 将字符串转换为对应的数值
Math.trunc(i) : 直接去除小数部分
例：
<script type="text/javascript">
console.log(0b1010);//10
console.log(0o56);//46
console.log(Number.isFinite(123));//true
console.log(Number.isFinite(Infinity));//flase
console.log(Number.isNaN(NaN));//true
console.log(Number.isInteger(123));//true
console.log(Number.isInteger(123.456));//false
console.log(Number.isInteger(123.0));//true
console.log(Number.parseInt('123abc456'));//123
console.log(Number.parseInt('a123abc456'));//NaN
console.log(Math.trunc('123.123'));//123
</script>
数组扩展
Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
<script type="text/javascript">
let btns = document.getElementsByTagName('button');
Array.from(btns).forEach(function(item, index){
console.log(item);
})
</script>
</body>
Array.of(v1, v2, v3) : 将一系列值转换成数组
<script type="text/javascript">
let arr = Array.of(1, 4, 'abc', true);
console.log(arr);
</script>
[1, 4, "abc", true]
find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
<script type="text/javascript">
let arr2 = [2,3,4,2,5,7,3,6,5];
let result = arr2.find(function(item, index){
return item > 4;
});
console.log(result);//5
</script>
findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
<script type="text/javascript">
result = arr2.findIndex(function(item, index){
return item > 4;
});
console.log(result);//4
</script>
对象扩展
1、 Object.is(v1, v2)
判断2个数据是否完全相等
console.log(0 == -0);//true
console.log(NaN == NaN);//false
console.log(Object.is(0, -0));//false
console.log(Object.is(NaN, NaN));//true
Object.assign(target, source1, source2..)
将源对象的属性复制到目标对象上
例：
let obj = {};
let obj1 = {username:'iverson', age:43};
let obj2 = {sex: '男'};
Object.assign(obj, obj1, obj2);
console.log(obj);
{username: "iverson", age: 43, sex: "男"}
直接操作 proto 属性
let obj2 = {};
obj2.proto = obj1;
let obj3 = {};
let obj4 = {money: 5000000};
obj3.proto = obj4;
console.log(obj3);//{}
console.log(obj3.money);//5000000
对象的深度克隆
1、数据类型：
数据分为基本的数据类型(String, Number, boolean, Null,Undefined)和对象数据类型
基本数据类型：String, Number, boolean, Null,Undefined
特点： 存储的是该对象的实际数据
对象数据类型：
特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里
2、复制数据
基本数据类型存放的就是实际的数据，可直接复制
let number2 = 2;
let number1 = number2;
克隆数据：对象/数组
1、区别： 浅拷贝/深度拷贝
判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 复制了obj在栈内存的引用
2、常用的拷贝技术
1). arr.concat(): 数组浅拷贝
2). arr.slice(): 数组浅拷贝
3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
4). 浅拷贝包含函数数据的对象/数组
5). 深拷贝包含函数数据的对象/数组
拷贝数据：
基本数据类型：
拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据
对象/数组：
拷贝后不会生成新的数据，而是拷贝了引用。修改拷贝以后的数据会影响原数据
拷贝数据的方法：
1、直接赋值给一个变量 //浅拷贝
2、Object.assign() //浅拷贝
3、Array.prototype.concat() //浅拷贝
4、Array.prototype.slice() //浅拷贝
5、JSON.parse(JSON.stringify()) //深拷贝（深度克隆），拷贝的数据里不能有函数，因为它处理不了
浅拷贝（对象/数组）：
特点：拷贝的引用，修改拷贝以后的数据会影响原数据，使得原数据不安全
深拷贝（深度克隆）
特点：拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据
思考：
如何实现深度克隆
拷贝的数据里有对象/数组会发生浅拷贝
深拷贝的数据里不能有对象/数组，即使有，还可以继续遍历对象/数组，拿到每一项的值，直到拿到的都是基本数据类型，然后再赋值，就是深度克隆
知识点储备
如何判断数据类型： arr-->Array null-->Null
1、typeof返回的数据类型： String、Number、Boolean、Undefined、Object、Function
2、Object.prototype.toString.call(obj)
for in循环 对象（属性名）、数组（下标）
Set和Map数据结构
Set容器 : 无序不可重复的多个value的集合体
Set()
Set(array)
add(value)
delete(value)
has(value)
clear()
size
Map容器 : 无序的 key不重复的多个key-value的集合体
for_of循环
for(let value of target){}循环遍历
遍历数组
遍历Set
遍历Map
遍历字符串
遍历伪数组
Map()
Map(array)
set(key, value)//添加
get(key)
delete(key)
has(key)
clear()
size
指数运算符(幂): **
Array.prototype.includes(value) : 判断数组中是否包含指定value
<script type="text/javascript">
console.log(2 ** 3);//8
let arr = [1,4,5,6,'abc'];
console.log(arr.includes('a'));//false
console.log(arr.includes('abc'));//true
console.log(arr.includes(4));//true
Vue模板语法
引入Vue.js
1、创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
双向数据绑定 : v-model
显示数据 : {{xxx}}
理解vue的mvvm实现
实例：
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 创建Vue实例（Vue是一个vue.js库提供的构建函数）
const vm = new Vue({//配置对象（属性名必须是指定的一些名称）
el: '#app',//element:选择器，表明将页面哪个元素交给Vue管理
data: {//数据（Model）
username: 'Vue'
}
})
vm.username = 'kobe';
</script>
2、MVVM：
Model：模型，数据对象（data）
View：视图，模板页面
ViewModel：视图模型（Vue的实例）
3、模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性)
双大括号表达式
语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法
指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
