Vue基础之【ES6语法】【生命周期】
<h4><a id="1ES6_0"></a>1.ES6</h4>
1.1.简介
ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法
1.2.变量声明
let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const声明的是常量，不可修改
# 1.var
# 结果为:undefined, 因为使用 var 声明的变量, 有预解析
console.log(iNum1);
// 在ES5中 声明变量使用var
var iNum1 = 10;
2.let
查看后会发现报错:iNum1 is not defined, 因为使用let 声明的变量, 没有了预解析
console.log(iNum1);
// 在ES6中 声明变量可以使用let
let iNum1 = 10;
3.const
查看后会发现报错:Assignment to constant variable, 因为使用const声明的变量, 不允许重新赋值
const iNum1 = 10;
iNum1 = 20;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
1.3.ES6对象
1.ES5写法
// ES5的对象写法
var oObj = {
name:'小明',
age:20,
fnGetName: function () {
alert(this.name);
}
}
// 调用
oObj.fnGetName();
// 创建一个空对象
var oObj = { };
// 添加属性
oObj.name = ‘小明’;
oObj.age = 20;
// 添加方法
oObj.fnGetName = function () {
alert(this.name);
}
// 调用
oObj.fnGetName();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2.ES6写法
需要注意的是, 实现简写,有一个前提,必须变量名属性名一致
// 定义两个变量
var name = '小明';
var age = 20;
// 创建对象
var oObj = {
name,
age,
fnGetName: function () {
alert(this.name);
}
};
// 调用
oObj.fnGetName();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
1.4.ES6的箭头函数
1.作用：
- 定义函数新的方式
- 改变this的指向
定义函数新的方式
// 无参数无返回值
var fnTest = ()=> {
alert('无参数无返回值');
}
// 一个参数无返回值
var fnTest = a => {
alert(a + b);
}
// 有参数有返回值
var fnTest = (a,b)=> {
return a + b;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
改变this的指向
如果层级比较深的时候, this的指向就变成了window, 这时候就可以通过箭头函数解决这个指向的问题
// 定义一个对象
var oObj = {
name:'小明',
fnAlert: function () {
setTimeout(()=>{
alert(this.name);
}, 1000);
}
}
// 调用方法
oObj.fnAlert();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
2.生命周期函数(中间件、钩子函数)
各个生命周期函数的作用
| 函数 | 作用 |
|---|---|
| beforeCreate | vm对象实例化之前 |
| createed | vm对象实例化之后 |
| beforeMount | vm作用标签之前 |
| mounted(重要时机初始化数据使用) | vm作用标签之后 |
| beforeUpdate | 数据或者属性更新之前 |
| updated | 数据或者属性更新之后 |
3.扩展(axios请求)
<div class="div1">
<input v-model="inputdata" type="text">
<input v-on:click="Searchdata" type="button" value="搜索">
<ol>
<li v-for="sd in searchdata">
{
{
sd.title}}
</li>
</ol>
</div>
<script>
new Vue({
el: ".div1",
data: {
inputdata: "",
searchdata: ""
},
methods: {
Searchdata: function(){
axios.get("http://ttapi.research.itcast.cn/app/v1_0/search?q=" + this.inputdata)
.then((response)=>{
console.log(typeof(response), response);
this.searchdata = response.data.data.results;
})
.catch((error)