Vue之常用語法
阿新 • • 發佈:2018-11-08
字典 watch odi 交換 問題 bin html 方式 能夠
變量的定義:
var定義的變量:只有全局作用域和函數作用域。有變量提升,先打印後定義變量不會報錯,打印結果為undefined
let定義的變量:沒有變量提升 ——>有局部作用域和函數作用域、塊級作用域
不能重復定義
塊級作用域
const定義的變量:
沒有變量提升
定義了以後不能修改
定義的時候必須賦值
不能重復定義
帶來了塊級作用域
模板字符串:
用反引號來進行字符串的拼接
用${} 來存儲變量
<div id="app"></div> <script> let oDiv = document.getElementById(‘app‘); oDiv.innerHTML = ‘<h1>Hello Vue‘ + ‘</h1>‘; let name1 = ‘wjs‘; let name2 = ‘gxx‘; // 這裏是反引號 oDiv.innerHTML = ` <h1>Hello ${name1}</h1> <h2>Hello ${name2}</h2> ` </script>
數據的解構和賦值:
數組、對象
簡單的用途:數據的交換
<script> let ary = [1, 2, 3]; let [a, b, c] = ary; console.log(a, b, c); let obj = { username: ‘wjs‘, age: 24, }; let {username: user, age: age} = obj; // 默認是這樣所以↓ console.log(user,age); let k = 1; let v = 2; [k, v] = [v, k]; // 等號左右類型必須一樣,要麽都是字典,要麽都是列表 console.log(k, v); </script>
函數的擴展:
1、默認值參數
<script> // 默認值參數 function foo(x, y = 10) { let number = y; return number; } ret = foo(1, 2); ret1 = foo(1); ret2 = foo(1, 0); console.log(ret); console.log(ret1); console.log(ret2); </script>
2、箭頭函數(v => v 參數 箭頭 返回值)
<script> // 箭頭函數 // 一個函數 let foo1 = v => v; ret3 = foo1(10); console.log(ret3); </script>
3、0個或者多個參數
<script> // 0個或者多個參數 let bar = (x, y) => { return x + y; }; ret4 = bar(1, 2); console.log(ret4); </script>
4、箭頭函數和普通函數的區別
<script> // 普通函數(誰調用就指向誰) // 箭頭函數(在哪裏定義的作用域,this就指向定義時的作用域) function foo2() { console.log(this); // 這裏指向windows } let bar1 = () => console.log(this); let obj = { foo2:foo2, bar1:bar1, }; foo2(); // 指向windows obj.foo2(); // 指向object obj.bar1(); // 指向windows </script>
類:
class 關鍵字 定義一個類:
必須要有constructor方式(構造方法),如果沒有,則() {}
必須使用new 來實例化,
類的繼承:
必須在子類的constructor方法裏面寫super()方法
<script> class Wjs { constructor(username, age, hobby = ‘learn‘) { this.username = username; this.age = age; this.account = account; } showInfo() { console.log(this.username, this.age, this.account); } } // extends繼承 class Gxx extends Wjs { constructor(username, age) {
// 繼承父類的username、age,hobby繼承的父類的默認值 super(username, age); // this.username = username; // this.age = age; } } let gxx = new Gxx(‘gxx‘, 22); gxx.showInfo(); </script>
對象的單體模式:
解決了箭頭函數this的指向問題
<script> let obj = { name: ‘wjs‘, foo() { console.log(this.name); } }; obj.foo(); </script>
Vue之為什麽用框架
<div id="app">{{ greeting }}</div> <script> // 數據模板引擎 new Vue({ el: ‘#app‘, // data: { greeting: ‘Hello Vue‘, } }) </script>
Vue之常用指令
v-text
<div id="app" v-text="greeting"></div> <script> // 數據模板引擎 // v-開頭的指令是幫助我們渲染數據用的 new Vue({ el:‘#app‘, data:{ greeting:‘Hello Vue‘, } }) </script>
v-html
<div id="app" v-html="greeting"></div> <script> // 數據模板引擎 // v-開頭的指令是幫助我們渲染數據用的 new Vue({ el:‘#app‘, data:{ greeting:‘<h1>Hello Vue</h1>‘, } }) </script>
v-for 循環
<div id="app"> <ul> <li v-for="hobby in funingbo">{{ hobby }}</li> </ul> <ul> <li v-for="student in students">姓名:{{student.name}},年齡:{{student.age}},愛好:{{student.hobby}}</li> </ul> </div> <script> // 數據模板引擎 // v-開頭的指令是幫助我們渲染數據用的 new Vue({ el: ‘#app‘, data: { funingbo: [‘人‘, ‘生‘, ‘太‘, ‘悲‘, ‘涼‘], students: [ { name: ‘wjs‘, age: 24, hobby: ‘癡心妄想‘, }, { name: ‘gxx‘, age: 22, hobby: ‘有上進心‘, }, { name: ‘zq‘, age: 23, hobby: ‘好學‘, }, ] } }) </script>
v-if、v-else-if
<div id="app"> <div v-for="role in roles"> <div v-if="role == ‘gxx‘"> <h1>v-if {{role}} 你好</h1> </div> <div v-else-if="role == ‘zq‘"> <h1>v-else-if {{role}} 你好</h1> </div> </div> </div> <script> // 數據模板引擎 // v-開頭的指令是幫助我們渲染數據用的 new Vue({ el: ‘#app‘, data: { roles: [‘gxx‘, ‘zq‘] } }) </script>
v-show 是否展示的語法:true 展示,false 不展示
<div id="app"> <div v-for="role in roles"> <div v-if="role == ‘gxx‘" v-show="isShow"> <h1>v-if {{role}} 你好</h1> // 這個標簽不展示 </div> <div v-else-if="role == ‘zq‘"> <h1>v-else-if {{role}} 你好</h1> </div> </div> </div> <script> // 數據模板引擎 // v-開頭的指令是幫助我們渲染數據用的 new Vue({ el: ‘#app‘, data: { roles: [‘gxx‘, ‘zq‘], isShow: false, } }) </script>
註意:--切換性能,v-show的性能更高一些,display:none, v-if 的切換是通過append
--加載性能,v-show慢,v-if快
v-bind 綁定屬性 簡寫為 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="static/vue.min.js"></script> <style> .active { width: 500px; height: 500px; background-color: deepskyblue; } </style> </head> <body> <div id="app"> <a v-bind:href="jd">京東</a> // 這裏 : 為v-bind的簡寫,[]表示可以傳多個值並用逗號隔開,如果是一個值得話可以不寫[]。 <div :class="[isActive]"></div> </div> <script> // 數據模板引擎 // v-開頭的指令是幫助我們渲染數據用的 let vm = new Vue({ el: ‘#app‘, data: { jd: ‘https://www.jd.com‘, isActive: ‘active‘, } }) </script> </body> </html>
v-on 綁定點擊事件 簡寫為 @
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="static/vue.min.js"></script> <style> .active { color: deepskyblue; } </style> </head> <body> <div id="app"> <a v-bind:class="{ active:isActive }">山人</a> <!--<button v-on:click="changeColor">點擊山人變藍</button>--> <!--v-on 的簡寫 @--> <button @click="changeColor">點擊山人變藍</button> </div> <script> // 數據模板引擎 // v-開頭的指令是幫助我們渲染數據用的 let vm = new Vue({ el: ‘#app‘, data: { isActive: false, }, methods: { changeColor: function () { this.isActive = !this.isActive; }, } }) </script> </body> </html>
v-model ----修改後的數據能夠及時(官方稱之為響應式)的渲染到模板層
<div id="app"> <input type="text" v-model="name"> <label for="">男</label> <input type="checkbox" value="男" v-model="genders"> <label for="">女</label> <input type="checkbox" value="女" v-model="genders"> <select v-model="girlfriends"> <option>gxx</option> <option>zq</option> <option>wpp</option> </select> <textarea></textarea> <hr> {{ name }} {{ genders }} {{ girlfriends }} </div> <script> // 數據模板引擎 // v-開頭的指令是幫助我們渲染數據用的 let vm = new Vue({ el: ‘#app‘, data: { name: ‘wjs‘, genders: [], girlfriends: [], }, }) </script>
計算屬性
<div id="app"> <table border="1"> <thead> <tr> <th>學科</th> <th>成績</th> </tr> </thead> <tbody> <tr> <td>Python</td> <!--.number修改input框中的值時,就是以數字來重新計算的,如果沒有.number就會把所有的值當做字符串拼接起來。--> <td><input type="text" v-model.number="python"></td> </tr> <tr> <td>Vue</td> <!--.trim去除兩邊的空格--> <td><input type="text" v-model.trim="vue"></td> </tr> <tr> <td>Go</td> <!--.lazy為當鼠標失去焦點時才會重新計算--> <td><input type="text" v-model.lazy="go"></td> </tr> <tr> <td>總成績</td> <td>{{ sumScore }}</td> </tr> </tbody> </table> <hr> {{ python }} {{ vue }} {{ go }} {{ sumScore }} </div> <script> // 計算屬性放在緩存中,只有數據修改時才重新計算 let vm = new Vue({ el: ‘#app‘, data: { python: 90, vue: 95, go: 85, }, computed: { // 這裏return返回的值會傳給sumScore變量 sumScore: function () { console.log(1); return this.python + this.vue + this.go; }, }, watch: { // 這裏python變量必須是data中存在的,而且watch它不會有值返回給python python: function () { alert(‘python數據改變了‘) } } }) </script>
獲取DOM元素
<div id="app"> <div ref="myRef">山人</div> <button v-on:click="changeColor">點擊山人變藍</button> </div> <script> let vm = new Vue({ el: ‘#app‘, data: { isActive: ‘active‘, }, methods: { changeColor: function () { this.$refs.myRef.className = this.isActive; } } }) </script>
v-pos 自定義指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="static/vue.min.js"></script> <style> .box { width: 100px; height: 100px; background-color: deepskyblue; } </style> </head> <body> <div id="app"> <div v-bind:class="{ box:isShow }" v-pos.right.bottom="leftBottom">山人</div> </div> <script> // pos是固定的寫法 Vue.directive(‘pos‘, function (el, bindding) { console.log(‘el:‘, el); console.log(‘bingding:‘, bindding); // 這裏value獲取的是下面寫的isShow賦給的值也就是所寫的true, if (bindding.value) { el.style[‘position‘] = ‘fixed‘; for (let key in bindding.modifiers) { el.style[key] = 0; // el.style[‘right‘] = 0; // el.style[‘bottom‘] = 0; } } }); let vm = new Vue({ el: ‘#app‘, data: { leftBottom: true, isShow: true, // isShow通過bindding.value }, }) </script> </body> </html>
Vue之常用語法