1.var/let/的区别以及const的特点
相同点
- 三个都是用来声明变量的。
不同点
- var声明的变量是全局的。
- let声明的变量是块级的，想当于java中的局部变量。
- const声明的变量为常量，不能改变。
<!--
Vue实例挂载(el)的标签
使用构造函数创建一个vue对象：
这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
id挂载:el:"#id"
class挂载：el:".class"
Vue中的数据(data)详解
Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上
-->
<div id="myDiv1">
{{msg}}
</div>
<div class="myDiv2">
{{msg}}
<hr />
{{user.name}}今年{{user.age}}性别{{user.sex}}
</div>
<script>
new Vue({
el: "#myDiv1",
data: {msg: "我是id挂载方式"}
})
var x = new Vue({
el: ".myDiv2",
data: {
msg: "我是类加载器方式",
user: {
name: "隔壁老王",
age: "20",
sex: "男"
},
},
})
// 通过Vue实例直接修改data对象中的数据,及时同步的页面上
x.user.name="王哈哈";
/*
* let相较于var，他是块级的。
* */
for (var i = 0;i<10;i++){
console.debug(i);
}
console.debug("var" + i);
console.debug("-----------")
for (let i= 0;i<10;i++){
console.debug(i);
}
console.debug("let" + i);
/*
* const声明常量不能修改
* */
const x1 = 10;
/*x = 5;*/
</script>
解构表达式
<script type="text/javascript">
//数组解构：
var arr = [1,2,3];
//在es5中，取值如下
console.debug(arr[0] + arr[1] + arr[2]);
//在es6中，使用解构表达式
var [a1,a2,a3] = arr;
console.debug(a1,a2,a3);
//对象解构：
var obj = {"name":"王哈哈","age":20};
var {name,age} = obj;
console.debug(name,age);
</script>
3、声明函数
定义函数有三种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
* 定义函数有三种写法
* */
var person = {
name:"王哈哈",
age:20,
//方法1：最原始的写法
eat:function(food){
console.log(name+food);
},
//方式2：简洁写法
eat1:(food){
console.log(name+food);
},
//方式3：箭头函数
eat1:(food)=>console.log(name+food),
}
Person.eat("小馒头");
Person.eat1("小小馒头");
Person.eat2("小小小馒头");
</script>
</body>
</html>
4、promise使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*Promise对象--可以发送ajax请求*/
const p = new Promise((a, b) =>{
// 这里我们用定时任务模拟异步
setTimeout(() => {
//得到一个随机数
const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
a("成功！num:" + num)
} else {
b("出错了！num:" + num)
}
}, 300); //模拟延迟
}).then(function (msg) {
console.log("----then----")
console.log(msg);
}).catch(function (msg) {
console.log("----catch----")
console.log(msg);
});
//axios.get(url,params,function())
</script>
</body>
</html>
5.模块化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="b.js"></script>
</head>
<body>
</body>
</html>
5.1 b.js导入
/*(1)import util from 'a.js';
console.log(util.sum(1,2));
console.log("11111111");*/
//打包工具 webpack 转义 编译成浏览器能够执行的代码
//前端 和 后端
//(2)import {a,b} from 'a.js';
//(3)
/*
import xxx from 'a.js';
xxx.sum();*/
5.2 a.js 导出
/*（1）const util = {
sum(a,b){
return a+b;
}
}
//导出
export util;*/
/*（2）var a= 'xx';
var b= 'yyy';
export {a,b};*/
//(3)
export default {
sum(a,b){
return a+b;
}
}
6.vue的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
生命周期:
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。
Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。
每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
-->
<div class="myDiv">
{{mssage}}
</div>
<script>
new Vue({
el:".myDiv",
data:{
mssage:""
},
/*
* created代表在vue实例创建后；
* */
created(){
this.mssage = "王哈哈";
console.debug("我来了1");
},
mounted() {
console.debug("我来了2");
},
})
</script>
</body>
</html>
7.通过Vue对象实例调用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
通过Vue对象实例调用方法
//方法调用①：通过Vue对象实例调用方法
-->
<div class="myDiv">
{{mssage}}
<!--方法的调用②直接在html模板标签中调用：-->
{{say()}}
{{sing()}}
</div>
<script>
var h = new Vue({
el: ".myDiv",
data: {
mssage: "",
user: {
name: "隔壁老王",
age: 20,
}
},
methods: {
say: function () {
//this指向当前对象，当前app对象
return "hello:" + this.user.name + "!";
},
sing() {
console.debug("我唱歌好听。。。");
}
},
})
//方法调用①：通过Vue对象实例调用方法
alert(h.say());
</script>
</body>
</html>
