Vue的用法和es6的語法
一.es6的語法
1.let
基本語法:
ES6 新增了let
命令,用來宣告變數。它的用法類似於var
,但是所宣告的變數,只在let
命令所在的程式碼塊內有效。
{ let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1
特點:
1.區域性作用域
2.不會存在變數提升
3.變數不能重複宣告
2.const
基本用法
const
宣告一個只讀的常量。一旦宣告,常量的值就不能改變。
const PI = 3.1415; PI// 3.1415 PI = 3; // TypeError: Assignment to constant variable.
上面程式碼表明改變常量的值會報錯。
特點:
1.區域性作用域
2.不會存在變數提升
3.不能重複宣告,只宣告常量 不可變得量
let和const3.模版字串
tab鍵上面的反引號 ${變數名}來插值 let name = '未來'; let str = `我是${name}`
4.箭頭函式
function(){} === ()=>{} this的指向發生了改變
2、箭頭函式的this指向它的呼叫者所在的上下文,也就是vm例項所在的上下文(定義vm的父類),即window
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> /* function add(x){ return x } add(5); */ // let add = function (x) { // return x; // } // add(10); // let add2 = (x)=>{ // return x // } // let add2 = x => x; // console.log(add2(30)); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> let person = { methods:{ fav:function(){ } }, name: "日天", age: 30, fav: function () { console.log(this); //this指向 當前的物件 console.log(this.name); } } /* let person2 = { name: "日天2", age: 30, fav: () => { console.log(this); //this指向 發生了改變。this指向 定義person2的父級物件(上下文) console.log(this.name); } } person2.fav() */ // 物件的單體模式 let person3 = { name:'日天', fav(){ console.log(this); //當前this } // fav:function () { // // } } person3.fav(); </script> </body> </html>箭頭函式
5.es6的類
原型 prototype 當前類的父類(繼承性)
class Person{ constructor(name){ this.name = name; } fav(){ } } Vue的基本用法
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> /* function Vue(name,age) { this.name = name; this.age = age; } // 基於原型給物件宣告方法 Vue.prototype.showName = function () { console.log(this.name); } var p1 = new Person('alex','29'); */ class Person{ constructor(name='alex',age=18){ this.name = name; this.age = age; } showname(){ console.log(this.name); } showage(){ } } let V = new Person(); V.showname(); </script> </body> </html>es6的類
二.Vue的介紹
1.前端的三大框架
介紹 | |
---|---|
vue | 尤雨溪,漸進式的JavaScript框架 |
react | Facebook公司,裡面的高階函式非常多,對初學者不用好 |
angular | 谷歌公司,目前更新到6.0,學習angular得需要玩一下typescript |
2.什麼是Vue
它是構建使用者介面的JavaScript框架(讓它自動生成js,css,html等)
3.Vue的基本引入和建立
(1)下載
cdn方式下載
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
(2)引包
<script src='./vue.js'></script>
(3)Vue的模板語法
<!--模板語法--> <h2>{{ msg }}</h2> <h3>{{ 'hhahda' }}</h3> <h3>{{ 1+1 }}</h3> <h4>{{ {'name':'alex'} }}</h4> <h5>{{ person.name }}</h5> <h2>{{ 1>2? '真的': '假的' }}</h2> <p>{{ msg2.split('').reverse().join('') }}</p>
(4)例項化
//2.例項化物件
new Vue({
el:'#app', //繫結那塊地
data:{
//資料屬性 種子
msg:'黃瓜',
person:{
name:'wusir'
},
msg2:'hello Vue'
}
});
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <!--模板語法--> <h2>{{ msg }}</h2> <h3>{{ 'hhahda' }}</h3> <h3>{{ 1+1 }}</h3> <h4>{{ {'name':'alex'} }}</h4> <h5>{{ person.name }}</h5> <h2>{{ 1>2? '真的': '假的' }}</h2> <p>{{ msg2.split('').reverse().join('') }}</p> <div>{{ text }}</div> </div> <!--1.引包--> <script src='./vue.js'></script> <script> //2.例項化物件 new Vue({ el:'#app', //繫結那塊地 data:{ //資料屬性 種子 msg:'黃瓜', person:{ name:'wusir' }, msg2:'hello Vue', text:'<h2>日天</h2>' } }); </script> </body> </html>Vue的基本使用
4.資料繫結
1、插入文字{{ }}。如上例,也可以放表示式
2、插入html:v-html
5.Vue的指令
指令:是帶有v-字首的特殊屬性,通過屬性來操作元素
(1)v-text:在元素當中插入值
v-text相當於innerText
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p>{{msg}}</p> <p>{{ 80+2 }}</p> <p>{{ 20>30 }}</p> <h1 v-text="msg"></h1> <h1 v-html="hd"></h1> <h1 v-html="str"></h1> </div> <script> new Vue({ el:"#app", //表示當前這個元素開始使用vue data:{ msg:"你好啊", hd:"<input type='button' value='啦啦'>", str:"你妹的" } }) </script> </body> </html>
(2)v-html:在元素當中不僅可以插入
v-html相當於innerHTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <h1>問卷調查</h1> <form action="" method="post"> <input type="checkbox">香蕉 <input type="checkbox">蘋果 <input type="checkbox">橘子 <input type="checkbox" @click="qita">其他 <div v-html="htmlstr" v-show="test"></div> </form> </div> <script> new Vue({ el:"#app", //表示當前這個元素開始使用vue data:{ htmlstr:'<textarea></textarea>', test:false //預設是隱藏的 }, methods:{ qita:function () { this.test = !this.test //當一點選其他的時候讓顯示 } } }); </script> </body> </html>
(3)v-if和v-else:根據表示式的真假值
(4)v-show:根據表示式的真假值來顯
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .box { width: 200px; height: 200px; background-color: red; } .box2 { width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div id="content"> {{ add(2,3) }} <button v-on:click='handlerClick'>隱藏</button> <div class="box" v-show='isShow'></div> <div class="box2" v-if="isShow"></div> <div v-if="Math.random() > 0.5"> 有了 </div> <div v-else> 沒了 </div> </div> <!--1.引包--> <script src='./vue.js'></script> <script> //資料驅動檢視 new Vue({ el: '#content', data() { //data中是一個函式 函式中return一個物件,可以是空物件 但不能不return return { msg: "<h2>alex</h2>", num: 1, isShow: true } }, methods: { add(x, y) { console.log(this.num); return x + y }, handlerClick() { //資料驅動 console.log(this); this.isShow = !this.isShow; } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p v-if="pick">我是</p> <p v-show="temp">呼啦啦呼啦啦</p> <p v-show="ok">你喜歡我嗎?</p> </div> <script> var vm = new Vue({ el:"#app", //表示當前這個元素開始使用vue data:{ // pick:true //顯示 pick:false, //移除,用註釋給替換了 // temp :true , //顯示 temp :false, //隱藏 ok:true } }); window.setInterval(function() { vm.ok =! vm.ok; },1000) //1000代表1秒 </script> </body> </html>if-show
v-if和v-show的區別
v-if 是“真正”的條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
v-if 也是惰性的:如果在初始渲染時條件為假,則什麼也不做——直到條件第一次變為真時,才會開始渲染條件塊。
相比之下,v-show 就簡單得多——不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 CSS 進行切換。
一般來說,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在執行時條件很少改變,則使用 v-if 較好。
(5)v-on:監聽元素事件,並執行相應的
(6)v-bind:繫結元素的屬性並執行相應
v-bind可以繫結標籤中任何屬性
v-on 可以監聽 js中所有事件
簡寫:
v-bind:src 等價於 :src
v-on:click 等價於 @click
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .box { width: 200px; height: 200px; background-color: red; } .active{ background-color: green; } </style> </head> <body> <div id="app"> <!--<button v-on:click = 'handlerChange'>切換顏色</button>--> <!--v-bind 標籤中所有的屬性 img標籤src alt,a標籤的href title id class--> <!--<img v-bind:src="imgSrc" v-bind:alt="msg">--> <!--<div class="box" v-bind:class = '{active:isActive}'></div>--> <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切換顏色</button> <!--v-bind 標籤中所有的屬性 img標籤src alt,a標籤的href title id class--> <img :src="imgSrc" :alt="msg"> <div class="box" :class = '{active:isActive}'></div> </div> <!--1.引包--> <script src='./vue.js'></script> <script> //資料驅動檢視 設計模式 MVVM Model View ViewModel //宣告式的JavaScript框架 // v-bind和v-on的簡便寫法 : @ new Vue({ el: '#app', data() { //data中是一個函式 函式中return一個物件,可以是空物件 但不能不return return { imgSrc:'./1.jpg', msg:'美女', isActive:true } }, methods:{ handlerChange(){ // this.isActive = !this.isActive; this.isActive = false; }, handlerLeave(){ this.isActive = true; } } }) </script> </body> </html>
(7)v-for:根據變數的值來迴圈渲染元素
v-for可以遍歷列表,也可以遍歷物件,在使用vue的v-for指令的時候,一定要繫結key,避免vue幫咱們計算DOM
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .box { width: 200px; height: 200px; background-color: red; } .active { background-color: green; } </style> </head> <body> <div id="app"> <ul v-if="data.status === 'ok'"> <!--v-for的優先順序是最高的 diff演算法--> <li v-for = '(item,index) in data.users' :key="item.id" > <h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3> </li> </ul> <div v-for = '(value,key) in person'> {{ key }}-----{{ value }} </div> </div> <!--1.引包--> <script src='./vue.js'></script> <script> new Vue({ el: '#app', data() { return { data: { status: 'ok', users: [ {id: 1, name: 'alex', age: 18}, {id: 2, name: 'wusir', age: 30}, {id: 3, name: 'yuan', age: 48} ] }, person:{ name:'alex' } } }, methods: {} }) </script> </body> </html>
(8)v-model:把input的值和變數繫結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input v-model="msg"> <input v-model="msg" value="this is test"> <p>{{msg}}</p> <input type="button" value="變化" @click="change"> </div> <script> new Vue({ el:"#app", //表示當前這個元素開始使用vue data:{ // msg:"", msg:"aaaaa" }, methods:{ change:function () { this.msg=512 } } }); </script> </body> </html>
6.對陣列的操作
- push #從末尾新增
- pop #從末尾刪除
- shift #從頭新增
- unshift #從頭刪除
- splice #刪除元素。splice(index,1) #刪除這個索引的那一個
- reverse #反轉
7.自定義指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-focus> </div> <script> new Vue({ el:"#app", data:{ }, directives:{ //directives定義指令的 focus:{ //focus指令的名字 inserted:function (els) { //els繫結的這個元素 //inserted當繫結的這個元素 <input type="text" v-focus>顯示的時候, els.focus(); //獲取焦點的一個方法,和以前的時候是一樣的 els.style.backgroundColor="blue"; els.style.color='#fff' } } } }) </script> </body> </html>View Code
8.偵聽器
雖然計算屬性在大多數情況下更合適,但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 watch
選項提供了一個更通用的方法,來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時,這個方式是最有用的。
watch可以監聽單個屬性
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <p>{{ msg }}</p> <button @click = 'clickHandler'>修改</button> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ return { msg:"alex", age:18 } }, methods:{ clickHandler(){ this.msg = "wusir" } }, watch:{ //watch單個屬性,如果想監聽多個屬性 宣告多個屬性的監聽 'msg':function (value) { console.log(value); if (value === 'wusir'){ alert(1); this.msg = '大武sir' } }, 'age' :function (value) { } } }) </script> </body> </html>
9.計算屬性 computed
監聽多個屬性
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <p>{{ myMsg }}</p> <button @click='clickHandler'>修改</button> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data() { return { msg: "alex", age: 18 } }, created() { //定時器 ajax 庫 function(){} setInterval(() => { }) }, methods: { clickHandler() { //this的指向就是當前物件 this.msg = "wusir"; this.age = 20; }, clickHandler: function () { console.log(this); } }, computed: { myMsg: function () { //業務邏輯 // 計算屬性預設只有getter方法 return `我的名字叫${this.msg},年齡是${this.age}`; } } }) console.log(vm); </script> </body> </html>