前端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 ...
随机推荐
- (zhuan) 自然语言处理中的Attention Model：是什么及为什么
自然语言处理中的Attention Model:是什么及为什么 2017-07-13 张俊林 待字闺中 要是关注深度学习在自然语言处理方面的研究进展,我相信你一定听说过Attention Model( ...
- unity3d 加载优化建议 总结 from 侑虎科技
第一部分 我们对于纹理资源的加载建议如下: 1.严格控制RGBA32和ARGB32纹理的使用,在保证视觉效果的前提下,尽可能采用“够用就好”的原则,降低纹理资源的分辨率,以及使用硬件支持的纹理格式. ...
- sublime3 mac : Package Control There are no packages available for installation
如下问题: 查看控制台:点击 ctrl+`打开控制台 发现是因为http://packagecontrol.io/channel_v3.json 获取失败,手动下载channel_v3.json文件, ...
- 传的参数是url地址时需要特殊处理
<a href="javascript:;" data-url="{$vo.url}" class="info_generate_qr" ...
- SQL中 根据行号设置每行数据的排序数值
根据行号自动把当前行号插入到某列中 实现排序 update tempTable set DisplayOrder = right( CAST(rownum as NVARCHAR),5) from( ...
- python IOError: [Errno 22] invalid mode ('r') or filename:
如果你是报这个错误,可能是因为你的文件路径中的中文字符太多的缘故. 你可以将路径或者文件名称改为英文试试.
- TRMM数据在arcgis打开
基本思路:地图配准 1将投影设置为plate carree(world) ,是在投影坐标系统下的世界中选择,当然为了输入坐标方便,设置属性genral中单位为度,显示为度分秒. 2 首先,要知道打开后 ...
- linux c/c++ 获取文件大小
linux c/c++ 获取文件大小 #include <sys/stat.h> int FileSize(const char* fname) { struct stat statbuf ...
- Codeforces 1077 F2 - Pictures with Kittens (hard version)
F2 - Pictures with Kittens (hard version) 思路: 单调队列优化dp 代码: #pragma GCC optimize(2) #pragma GCC optim ...
- idataway_前端代码规范
1.前后端json对接的规范. 前后端的json代码规范 result ={ success:”true”,//true表示成功,false表示失败. data:{}, //数据 errorCode: ...