ES-6常用语法和Vue初识

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、ES6常用语法

1、变量的定义

1. 介绍
ES6以前 var关键字用来声明变量，无论声明在何处都存在变量提升这个事情，会提前创建变量。
作用域也只有全局作用域以及函数作用域，所以变量会提升在函数顶部或全局作用域顶部。
let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块{}内部~不会报错：(但是会显示undefined)
<script>
console.log(age);
var age = 18;
</script><script>
function f() {
console.log(age);
if(1){
var age = 1;
}
}
</script>会报错：
<script>
console.log(age);
</script>2. let：块级作用域,let定义的变量只能作用于一对花括号内{}会报错：
<script>
console.log(age);
let age = 18;
</script><script>
function f() {
console.log(age);
if (1) {
let age = 1;
}
}
f()
</script>不会报错：
<script>
let age = 18;
console.log(age);
</script><script>
function f() {
if (1) {
let age = 1;
console.log(age);
}
}
f()
</script>3. 修改
var:可以重新定义，也可以重新赋值
let:不可以重新定义，但可以重新赋值
const:不可以重新定义，也不可以重新赋值不会报错：
<script>
var age = 18;
var age = 20;
</script><script>
var age = 18;
age = 20;
</script><script>
let age = 18;
age = 20;
</script>会报错：
<script>
let age = 18;
let age = 20;
</script><script>
const age = 18;
const age = 20;
</script><script>
const age = 18;
age = 20;
</script>

2、模板字符串

1. 语法：反引号``
2. 变量：${}
3. 相对于普通字符串：模板字符串可以换行，变量可以使用${}来替换
4. 示例
<body>
<div id="app"></div><script>
// 给div添加HTML代码
let ele = document.getElementById("app");
let hobby1 = "抽烟";
let hobby2 = "打架";
let hobby3 = "看女主播";
ele.innerHTML = `<ul>
<li>${hobby1}</li>
<li>${hobby2}</li>
<li>${hobby3}</li>
</ul>`
</script>
</body>如果使用普通的字符串：不可以换行，变量不能放在引号里面，因为在引号里面会被解析成普通字符而不是变量
ele.innerHTML = "<ul><li>" + hobby1 + "</li></ul>"

3、箭头函数

1. 介绍
类比Python的匿名函数2. this
-- 普通函数的this取决于函数最近的调用者
-- 箭头函数的this取决于当前上下文的环境3. 箭头函数示例
3-1、
ES6中允许使用“箭头”(=>)定义函数
var f = a => a;
相当于
var f = function( a ) {
return a;
}3-2、无参数的箭头函数
var f = () => 10;
相当于
var f = function() {
return 10;
}3-3、有参数的箭头函数
var sum = (a, b) => a + b;
相当于
var sum = function(a, b) {
return a +b;
}4. this是谁
<script>
// 普通函数的this取决于函数最近的调用者
// 箭头函数的this取决于当前上下文的环境 // 普通函数
function aa() {
console.log(this)
} aa(); // aa这个函数最近的调用者是window，this是window let obj1 = {
a: 1,
func: aa
}
obj1.func(); // aa这个函数最近的调用者是obj1，this是obj1 let obj2 = {
obj1: obj1,
a: 2
}
obj2.obj1.func(); // aa这个函数最近的调用者是obj1，this是obj1 // 箭头函数
let fun2 = () => this;
console.log(fun2()) // 这个箭头函数是在window下调用的，this是window
</script>

4、数据的解构(相当于python的*args, **kwargs)

1. 解构对象 let {key， key} = obj
<script>
// 定义对象
let obj = {
a: 1,
b: 2,
x: 3,
y: 4
}; // 解析对象
let {x, y} = obj; console.log(x); // 3
console.log(y); // 4
</script>2. 解构数组 let [x, y, x] = array
<script>
// 定义数组
let hobby = ["吹牛", "泡妞", "打架"]; // 解析数组
let [hobby1, hobby2, hobby3] = hobby; console.log(hobby1); // 吹牛
console.log(hobby2); // 泡妞
console.log(hobby3); // 打架
</script>

5、类的定义：ES6中已经开始支持使用class定义类

1. 定义类：class
2. 构造方法：constructor(相当于python中__init__)
3. 没有self，只有this，this代表这个类本身
4. 继承使用关键字：extends
5. 继承后的子类没有this，需要用super方法来找到父类的this6. 例子

6、import export

1. 介绍
在ES6中，import 导入模块、export导出模块
一个js文件可以导入另一个js文件的变量，但是目前浏览器并不支持这种语法，
不过在后面会讲到打包，打包后就可以使用，现在演示一下语法(目前没有打包，会报错的，这里只是演示语法)2. aa.js
let name = "xiaoming";
let age = 18;
// export抛出变量，其他js文件就可以导入这些抛出的变量
export {name, age}3. index.js
// import导入aa抛出的变量
import {name, age} from "aa"console.log(name)
console.log(age)4. HTML文件
<script src="index.js"></script>

二、Vue初识

1、Vue框架介绍

Vue是一个构建数据驱动的web界面的渐进式框架。
目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

使用Vue需要引入相应的JS文件，可到官网下载或者直接使用CDN：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js

借鉴后端的MVC架构模式： Model数据 Views模板 Controler数据与模板交互的控制器
Vue是MVVM架构：Model数据 View模板 ViewModel为模板提供处理好的数据
主要思想是数据驱动视图
从获取DOM渲染DOM的操作中解脱出来

2、Vue常用指令

1. 介绍
Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，
它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。两种获取数据方式：
1. {{数据}}
{{name}} 获取数据name 2. v-..="数据"
<h3 v-text="age"></h3>2. demo

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" charset="utf-8">
<title>Title</title>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head><body>
<div id="app">

{{name}}
</div><script>
// 实例化一个Vue对象，其中el必须要有
const app = new Vue({
el: "#app", // el表示这个Vue对象的作用域是id为app的这块，无论app这块嵌套了多少个div，都可以使用这个对象
data: { // data存放数据
name: "小明",
} })
</script></body>
</html>上面代码相当于：
let ele = document.getElementById("app");
ele.innerText = "小明";

3. v-text：相当于innerText

<body>
<div id="app">
<h3 v-text="name"></h3>
<h3 v-text="age"></h3>
</div><script>
const app = new Vue({
el: "#app",
data: {
name: "狗明",
age: 18,
} })
</script>
</body>

4. v-html：相当于innerHtml

<body>
<div id="app">
<h3 v-text="name"></h3>
<h3 v-text="age"></h3>
<div>
<div v-html="hobby">
</div>
</div>
</div><script>
const app = new Vue({
el: "#app",
data: {
name: "狗明",
age: 18,
hobby: `<ul>
<li>泡妞</li>
<li>打架</li>
</ul>
`
}
})
</script>
</body>

5. v-for

<body>
<div id="app">
<ul> 

<li v-for="(course, index) in course_list" :key="index">{{course}}{{index}}</li>
</ul> <ul> 
<li v-for="(p, index) in people" :key="index">{{p.name}}{{p.age}}</li>
</ul> <ul> 
<li v-for="(val, key) in obj" :key="key">{{val}}, {{key}}</li>
</ul>
</div><script>
const app = new Vue({
el: "#app",
data: {
course_list: ["语文", "数学", "英语"],
people: [
{
name: "小明",
age: 18
},
{
name: "狗明",
age: 38
}
],
obj: {
dic: "对象",
tup: "元组"
}
}
})
</script>
</body>

6. v-bind 动态绑定属性简写直接冒号 :

<div id="app">

<a v-bind:href="baidu">百度</a>
<img v-bind:src="imgUrl"/> 
<a :href="baidu">百度</a>
<img :src="imgUrl"/>
</div><script type="text/javascript">
const app= new Vue({
el: '#app',
data: {
baidu: 'http://www.baidu.com',
imgUrl: 'https://xxx.png'
},
})
</script>

v-bind的两种写法

<body>
<style>
.my_style {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style><div id="app">

<div v-bind:class="{my_style: is_show}">
</div>

<img :src="my_src">
</div><script>
const app = new Vue({
el: "#app",
data: {
is_show: true,
my_src: "https://pic.cnblogs.com/avatar/1449477/20180725103023.png"
}
})
</script>
</body>

7. v-on 绑定事件简写直接 @

<body>
<div id="app">

<button v-on:click="my_click">屠龙宝刀点击就送</button>

<button @click="game('天龙八部')">玩游戏</button>

<button v-on="{mouseenter: my_enter, mouseleave: my_leave}">鼠标事件</button>
</div><script>
const app = new Vue({
el: "#app",
data: {
},
methods: {
my_click: function(){
alert("屠龙宝刀");
},
game: function(gg){
alert("玩"+gg);
},
my_enter: function () {
console.log("mouse enter")
},
my_leave: function () {
console.log("mouse leave")
},
}
})
</script>
</body>

8. v-if v-else-if v-else：是使用appendChild实现的，只有符合条件的才会塞到html页面上，不符合条件的不会生成html代码

<body>
<div id="app">
<div v-if="role == 'admin'">管理员</div>
<div v-else-if="role == 'hr'">HR</div>
<div v-else>不是人</div>
</div><script>
const app = new Vue({
el: "#app",
data: {
role: "admin"
}
})
</script>
</body>

9. v-show：是使用display实现的，不显示的html代码只是用display: none隐藏起来了

<body>
<div id="app">
<div v-show="admin">管理员</div>
<div v-show="hr">HR</div>
<div v-show="others">不是人</div>
<button @click="my_click">点击显示或隐藏</button>
<h2 v-show="is_show">嘿嘿</h2>
</div><script>
const app = new Vue({
el: "#app",
data: {
admin: true,
hr: false,
others: false,
is_show: false,
},
methods: {
my_click: function(){
this.is_show = !this.is_show
}
}
})
</script>
</body>

10. v-model 数据的双向绑定
-- input
-- textarea
-- select

<body>
<div id="app">

<input type="text" v-model.lazy.trim="username">
{{username}}
<pre>{{username}}</pre>
<hr>

<input type="text" v-model.lazy.number="phone">
{{phone}}
{{typeof phone}}
<textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>
{{article}} <select name="" id="" v-model="choices" multiple>
<option value="1">小明</option>
<option value="2">狗明</option>
<option value="3">番薯明</option>
</select>
{{choices}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
username: "", // 这里设置默认值
phone: "",
article: "",
choices: ["1"],
}
})
</script>
</body>

11. 指令修饰符
-- .lazy：失去焦点时才获取数据，默认是内容改变就获取
-- .number：当输入的数据是数字时，转为数字类型
-- .trim：去空格12. 自定义的指令
Vue.dirctive("指令名称", function(el, binding){
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
binding.value 指令绑定数据的值
binding.modifires 指令修饰符
})

binding对象的参数：
def: {bind: ƒ, update: ƒ}
expression: "posed" // 绑定的数据名
modifiers: {right: true, top: true} // 修饰符的值
name: "pos" // 指令名称
rawName: "v-pos.right.top" // 指令带修饰符
value: true // 绑定的数据posed的值
__proto__: Object

12-1. 自定义指令控制某个div元素的位置

<body>
<style>
.my_box {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style><div id="app">
<div class="my_box" v-pos.right.top="posed"> </div>
</div><script>
// 第一个参数：指令名称
// 第二个参数绑定一个回调函数
// 函数中el是我们绑定指令的标签元素
// binding是绑定这个指令的一些数据
// modifiers(对象):指令修饰符组成的对象的布尔值right top
// value:绑定的数据posed
Vue.directive("pos", function(el, binding) {
console.log(el);
console.log(binding);
let gps = binding.modifiers;
if (binding.value){
el.style.position = "fixed";
// el.style.right = 0;
// el.style.bottom = 0;
for(let posi in gps){
el.style[posi] = 0;
} }
});
const app = new Vue({
el: "#app",
data: {
posed: true
}
})
</script>
</body>

12-2. 自定义模仿v-text原理

<body>
</style><div id="app">
<h2 v-my_text="name"></h2>
</div><script>
Vue.directive("my_text", function(el, binding){
el.innerText = binding.value;
}) const app = new Vue({
el: "#app",
data: {
name: "小明"
}
})
</script>
</body>

三、Vue常用指令补充

1、在Vue中获取DOM

1、在Vue中获取DOM
1. 给要获取的HTML标签设置一个 ref="name" 属性
2. 在Vue中通过 $refs.name 获取到这个DOM元素

3. 示例

<body>
<div id="app">
<div ref="my_div"></div>
<button v-on:click="my_click">点击显示文本</button>
</div><script>
const app = new Vue({
el: "#app",
methods: {
my_click: function() {
// 找到这个DOM对象(vue实例里面的this都是代表这个实例，这里是app)
let ele = this.$refs.my_div;
// 给这个div添加文本
ele.innerText = "嘿嘿嘿！惊喜吧！"
}
}
})
</script>
</body>

2、计算属性

1. computed存放需要计算的数据，键对应函数，通过return把计算结果赋值给键，在HTML页面上就可以使用{{键}}获取结果
2. computed计算出来的数据会放入缓存，同时会一直监听用于计算的各个数据，当数据变化时，会重新计算并得出结果。

3. 示例

<body>
<div id="app">
<table>
<thead>
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td><input type="text" v-model.number="Chinese"></td>
</tr>
<tr>
<td>数学</td>
<td><input type="text" v-model.number="meths"></td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model.number="English"></td>
</tr>
<tr>
<td>总分</td>
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{avg}}</td>
</tr>
</tbody>
</table>
</div><script>
const app = new Vue({
el: "#app",
data: {
Chinese: "",
meths: "",
English: ""
},
computed: {
sum: function() {
return this.Chinese + this.meths + this.English
},
avg: function() {
return this.sum/3
}
}
})
</script>
</body>

3、数据的监听

1. 监听数据用watch
2. watch里面的每个键就是要监听的数据，handler对应一个函数,参数val是新的值，oldVal是原本的值
3. 在可变数据类型中，val和oldVal都是修改后的数据，因为可变数据类型修改的是原本的值，而不是生成新的值。

4. watch能直接监听到数组长度的变化
5. 但是监听不到数组的某个值发生改变，也就是说，数组只是改变了某个值是不会触发watch的，深度监听也监听不到
6. 想要在数组不改变长度，只改变某个值的时候监听就需要用： Vue实例.$set(某个数组, 索引, "新值");

7. 对象(字典)的某个值发生改变，使用深度监听可以监听得到
8. 对象(字典)增加一些键值对，使用深度监听也监听不到，但是使用：Vue实例.$set(某个对象, 键, "新值"); 可以监听到

9. 示例

<body>
<div id="app">
{{name}}
<br>
{{hobby}}
<br>
{{girl}}
<br>
<button @click="my_click">点我改变数据</button>
</div><script>
const app = new Vue({
el: "#app",
data: {
name: "小明",
hobby: ["泡吧", "打劫", "碰瓷"],
girl: {
name: "小凤姐",
age: 48
}
},
methods: {
my_click: function() {
// 修改数据
// this.name = "狗明"; // 数组长度发生了变化，触发watch
//this.hobby.push("狗屎"); // 数组长度不变，某个值改变了，不会触发watch
//this.hobby[0] = "狗子"; // 全局的$set，相当于修改完后会去告诉Vue实例一声，可以触发watch
// app.$set(this.hobby, 0, "狗子"); // 修改对象某个值，深度监听就能触发watch
// this.girl.age = 58; // 增加对象内容，需要全局的$set
// this.girl['sex'] = 'boy'; // 监听不到
app.$set(this.girl, "sex", "boy");
}
},
watch: {
name: {
handler: function(val, oldVal) {
console.log(val);
console.log(oldVal);
}
},
hobby: {
handler: function(val, oldVal) {
// 改变数组长度的时候，新旧值相同
console.log(val);
console.log(oldVal);
},
// 深度监听
deep: true
},
girl: {
handler: function(val, oldVal) {
// 改变数组长度的时候，新旧值相同
console.log(val);
console.log(oldVal);
},
// 深度监听
deep: true
}
}
})
</script>
</body>