前端VUE框架-es6
EMCAScript 6 又叫 es2015
1、常量和变量
常量： const a = "hello"
常量不能修改和重复定义
变量：
let:定义一个块级作用域的变量
需要先定义再使用；(不存在变量提升)
不能重复定义
可以被修改
var:定义一个变量
存在变量提升
变量提升： 先使用后定义和赋值
// console.log(b); undefined
// var b = 123456;
详解：
// var b;
// console.log(b); undefined
// b = 123456;
js的数据类型：
string array number null undefined boolean object
基本数据类型：string number null undefined boolean
引用类型：array object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const a = "hello";
console.log(a); // console.log(b);
// var b = 123456; //变量提升 // var b;
// console.log(b);
// b = 123456; //let c = 100;
if(10> 9){
let c=200;
console.log(c);
}
console.log(c);
var c = 300 let d = 888;
d = 999
console.log(d); var i=10;
var arr = [22,33,44,55]
for(let i=0;i< arr.length;i++){ } if(i>5){
console.log(i+10);
} const obj = {
name: "谢小二",
age: 22
}
var obj2 = obj;
obj2.age = 90 console.log(obj.age); </script>
</head>
<body> </body>
</html>
2、模板字符串
通过反引号来使用，字符串当中可以使用变量
可以当作普通字符串来处理
可以使用多行字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<ul id="list_1"> </ul>
<script>
var name = `小三`;
console.log(`她的名字叫${name}`); document.getElementById("list_1").innerHTML = `
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
` </script>
</body>
</html>
3、解构变量
解构变量的结构要一样，结构对象时被赋值的变量要和对象内的key一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// let arr = [89,90,99];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2]; let [a,b,c,[d]] = [89,90,99,[100]];
console.log(a);
console.log(c);
console.log(d); let obj = {
"a1":"json",
a2: 23
}; let {a1,a2} = obj;
console.log(a1); </script>
</head>
<body> </body>
</html>
4、对象的扩展
对象当中的属性可以简写
对象当中的方法也可以简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let username = '谢小闲'; let obj = {
username, //username='谢小闲'
fun() {
alert(999);
}
};
console.log(obj.username);
obj.fun(); //用法举例：
// var useranme = $("#text1").val();
// var password = $("#text2").val(); // $.get(url,{useranme,password},function(){
//
//
// }) </script>
</head>
<body> </body>
</html>
5、函数的扩展
可以给函数默认参数
剩余参数：function fun2(x=3,...y) {
console.log(x);
console.log(y); // [3.4.5]
}
fun2(x=2,y=3,z=4,5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun(x=100) { alert(x);
}
//fun(); function fun2(x=3,...y) {
console.log(x);
console.log(y); // [3.4.5]
}
fun2(x=2,y=3,z=4,5)
</script>
</head>
<body> </body>
</html>
6、数组的扩展
1)判断数组当中是否存在某个数值
console.log(arr.indexOf(1000)) //没有打印 -1 ，有则打印数值的索引
console.log(arr.includes(201)) // false或true 2）对数组的遍历
var arr = [78,89,90,21]; arr.forEach(function (value,index) {
console.log(value);
}) var arr2 = arr.map(function (value,index) {
return value+1 //必须有返回值
})
console.log(arr2); //[79, 90, 91, 22] let arr3 = [11,22,33]
for(var i in arr3){ // in 方法 i表示索引
console.log(arr3[i]);
}
for(var i of arr3){ // of 方法 i表示值
console.log(i);
} 3)对数组的过滤
var arr4 = arr.filter(function (value,index) {
return value > 50 //必须有返回值
})
console.log(arr4); // [78, 89, 90]
7、类扩展
<script>
var age2 = 99;
Object.prototype.age2 = age2; function Person(name,age){
this.name = name;
this.age = age;
this.run = function () {
alert(`${this.name}能跑`);
}
} Person.prototype.sing = function () { //prototype是对每一个类的扩展，如果类内有，那拓展就失效了
alert(`${this.name}能唱歌`);
}; let man = new Person("小秋",19);
console.log(man.name); //首先在类中查找
man.run();
man.sing(); //其次到类的prototype中查找
console.log(man.age2); //再到Object中查找 </script>
前端VUE框架-es6的更多相关文章
- 前端vue框架 脚手架
1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...
- 前端--vue框架
1.下载 查看已安装好的版本 -------渐进式的JS框架--------- vue是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架 ...
- 前端VUE框架
一.什么是VUE? 它是一个构建用户界面的JAVASCRIPt框架 vue不关心你页面上的是什么标签,它操作的是变量或属性 为什么要使用VUE? 在前后端分离的时候,后端只返回json数据,再没有 ...
- ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)
提示:如有不明白的地方请先查看前3篇ABP实践系列的文章 1,下载及启动abp项目前后端分离(netcore+vue) 2,修改abp数据库为mysql 3,商品系列api接口(本文主要依赖在这个商品 ...
- 前端vue框架 路由的安装及使用
安装: 1.cmd下输入: npm install vue-router --save //安装路由 2.npm run dev //重新启动 使用: 1.在mian.js下引入路由 import V ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- 前端vue框架 父组件与子组件之间的相互调用
子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
随机推荐
- LOJ 534 花团（线段树+dfs栈）
题意 https://loj.ac/problem/534 思路 又是复杂度错误的一题,\(O(n^2\log n)\) 能过 \(15000\) . 虽然看起来强制在线,其实是一道假的在线题.首先按 ...
- 设置pip代理
参考: python-proxy-for-pip 设置pip代理 pip install -i http://pypi.douban.com/simple xxx 2018.4
- python redis 操作
1.String 操作 redis中的String在在内存中按照一个name对应一个value来存储 set() #在Redis中设置值,默认不存在则创建,存在则修改 r.set('name', 'z ...
- 浅谈Java中的栈和堆
人们常说堆栈堆栈,堆和栈是内存中两处不一样的地方,什么样的数据存在栈,又是什么样的数据存在堆中? 这里浅谈Java中的栈和堆 首先,将结论写在前面,后面再用例子加以验证. Java的栈中存储以下类型数 ...
- ssh连接docker镜像ubuntu与debian
用密码登录root docker官网给的sshdemo是ubuntu的,https://docs.docker.com/engine/examples/running_ssh_service/ 亲 ...
- Python Scrapy 爬取煎蛋网妹子图实例（二）
上篇已经介绍了 图片的爬取,后来觉得不太好,每次爬取的图片 都在一个文件下,不方便区分,且数据库中没有爬取的时间标识,不方便后续查看 数据时何时爬取的,所以这里进行了局部修改 修改一:修改爬虫执行方式 ...
- Python全栈开发-Day5-常用模块学习
本节大纲: 模块介绍 time &datetime模块 random os sys shutil shelve xml处理 pyyaml处理 configparser hashlib re正则 ...
- Python全栈开发-Day3-Python基础3
本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3.递归 4.函数式编程介绍 5.高阶函数 1.函数基本语法及特性 三种编程范式: 1.面向过程:过程——> def 2.面向对象:类— ...
- Linux 各种软件的安装 - svn
首先感谢这篇博文 https://www.cnblogs.com/mymelon/p/5483215.html 按照他的配置,svn顺利搭好. 1:yum -y install subversion ...
- SQLSERVER 和 ORACLE的if not exist 用法
sql server: if not exists (select 1 from TB_Procedure where Id='2018ZZZ') BEGIN insert into TB_Proce ...