ES-6常用语法和Vue初识
一、ES6常用语法
1、变量的定义
1. 介绍 ES6以前 var关键字用来声明变量，无论声明在何处都存在变量提升这个事情，会提前创建变量。 作用域也只有全局作用域以及函数作用域，所以变量会提升在函数顶部或全局作用域顶部。 let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块{}内部~ 不会报错： <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方法来找到父类的this 6. 例子
<script> class Animal { // 初始化 constructor(){ // 设置一个属性名为type this.type = "animal" }; // say方法 say(){ console.log("FFFFFUUUU") } }; // 狗类继承动物类 class Dog extends Animal { // 子类没有this constructor(){ // 用super方法拿到父类的this super(); // 修改属性type的值 this.type = "dog" } // 重写say方法 say(){ console.log("wow wow wow") } } let animal = new Animal(); console.log(animal.type); // animal animal.say() // FFFFFUUUU let dog = new Dog(); console.log(dog.type); // dog dog.say() // wow wow wow // 如果Dog类没有重写say方法，那么则会使用父类的say方法 </script>
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> <!--导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <!--使用Vue的数据name--> {{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> <!--循环的索引是位置参数，在第二位，用什么变量名接收都可以--> <!--key为了唯一标识这个循环的每个循环体，避免后续太多循环后可能出现的错乱，一般让key等于index,且key是唯一的--> <li v-for="(course, index) in course_list" :key="index">{{course}}{{index}}</li> </ul> <ul> <!--拿到的每个元素p是一个对象类型(字典)，JS中可以使用点去取值--> <li v-for="(p, index) in people" :key="index">{{p.name}}{{p.age}}</li> </ul> </div> <script> const app = new Vue({ el: "#app", data: { course_list: ["语文", "数学", "英语"], people: [ { name: "小明", age: 18 }, { name: "狗明", age: 38 } ] } }) </script> </body>
6. v-bind 动态绑定属性 简写直接冒号 :
<body> <style> .my_style { width: 200px; height: 200px; border: 1px solid red; } </style> <div id="app"> <!--v-bind动态绑定class样式 my_style,is_show控制样式是否应用上--> <div v-bind:class="{my_style: is_show}"> </div> <!--v-bind的简写--> <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"> <!-- v-on绑定事件 v-on:事件="methods里面的方法名"--> <button v-on:click="my_click">屠龙宝刀点击就送</button> <!-- v-on绑定事件简写 --> <button @click="game('天龙八部')">玩游戏</button> <!-- v-on一次绑定多个事件，v-on="{事件1: 方法名1, 事件2: 方法名2}" --> <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"> <!--lazy失去焦点时才更新，trim去空格--> <input type="text" v-model.lazy.trim="username"> {{username}} <pre>{{username}}</pre> <hr> <!--number：输入数字时，把数据转为数字类型--> <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 指令的所有信息组成的对象 value 指令绑定数据的值 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="rname" 属性
2. 在Vue中通过 $refs.rname 获取到这个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>
