Vue(核心思想)
阿新 • • 發佈：2018-11-14
borde 數據 tofixed val 實現 語法 art 嘗試 mouse 
1.Es6語法普及
- let和var的區別:
-
var:定義變量時,在全局範圍內都有效;所以在變量沒有聲明之前就能使用,值為undefined, 稱為變量提升; let:聲明的變量一定要在聲明後使用,而且在for循環時,變量都會被重新定義 -
let不允許在相同的作用域內,重復聲明一個變量; // 報錯 function func() { let a = 10; var a = 1; } // 報錯 function func() { let a = 10; let a = 1; } 所以,在函數內部重新聲明參數也報錯 function func(arg) { let arg;
// 報錯 } function func(arg) { { let arg; // 不報錯 } } - const命令
- const聲明一個只讀的常量,一旦聲明,常量的值不能修改;
- 所以const一旦聲明,就必須立即初始化,不能留著以後賦值,只聲明不賦值也報錯;
2.模板字符串
-
- ``:在輸出模板是,可以在裏面輸出標簽疊加
- ${變量名}:在字符串中嵌入變量時,跟反引號配合著使用,在script中使用,在頁面沒辦法渲染,而{{}}是vue插入值的語法,可以在模板上渲染;
-
// 普通字符串 `In JavaScript ‘\n‘ is a line-feed.` // 多行字符串 `In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`); // 字符串中嵌入變量 let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
3.箭頭函數
-
-
let f = a => a //等價於 let f = function(a){ return a} let f = () => 5 //等價於 let f=function()=>{return 5} let sum = (sum1, sum2) => sum1+sum2; // 等同於 var sum = function(num1, num2) { return num1 + num2; }; - 註意事項:函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象
-
- import和export
-
//導出多個聲明 export let name = ‘gx‘ export function aa(){} export {age,name,aa} //批量導出 import {age,name,aa} from ‘./main‘ console.log(name) console.log(age) console.log(aa()) // 整個模塊導入 把模塊當做一個對象 // 該模塊下所有的導出都會作為對象的屬性存在 import * as obj from "./main" / 一個模塊只能有一個默認導出 // 對於默認導出 導入的時候名字可以不一樣 // main.js var app = new Vue({ }); export default app // test.js // import app from "./main" import my_app from "./main"
2.Vue的基礎語法及命令
<template> <div> <h2>head</h2> <p v-text="msg"></p> <p v-html="html"></p> </div> </template> <script> export default { name: "head", data(){ return { msg: "消息", html: `<h2>插入h2標題</h2>` } } } </script>v-text v-html
//雙向監聽事件(model)頁面上修改,會自動觸發後端修改,後端修改,會被一直嘗試連接的客戶端重新渲染;
<div id="app"> <label> 男 <input type="checkbox" v-model="sex" value="male"> // <input type="radio" v-model="sex" value="male"> </label> <label> 女 <input type="checkbox" v-model="sex" value="female"> </label> {{sex}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js 頁面 var app = new Vue({ el: ‘#app‘, data: { // sex: "male", sex: [], } });v-model=‘sex‘
// HTML 頁面 <div id="app"> <div> <texteare v-model="article"> </texteare> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js 頁面 var app = new Vue({ el: ‘#app‘, data: { // sex: "male", sex: [], article: "這是一段文本。。這是一段文本。。這是一段文本。。這是一段文本。。這是一段文本。。" } });v-model=‘texteare‘
// HTML頁面 <div id="app"> <!--<select v-model="from">--> <!--<option value="1">單選1</option>--> <!--<option value="2">單選2</option>--> <!--</select>--> <!--{{from}}--> <select v-model="where" multiple=""> <option value="1">多選1</option> <option value="2">多選2</option> <option value="3">多選3</option> </select> {{where}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js 頁面 var app = new Vue({ el: ‘#app‘, data: { from: null, where: [], } }); v-model selectv-model=‘select‘
//其他命令
//v-bind:動態綁定屬性 <style> .active { background: red; } </style> <div id="app"> <div> <!--<a v-bind:href="my_link">點我</a>--> <a v-bind:href="my_link" :class="{active: isActive}">點我 </a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js var app = new Vue({ el: ‘#app‘, data: { my_link: "http://baidu.com", isActive: true, } }); //v-show:動態管理是否顯示標簽:本質是給標簽添加了display屬性 <div id="app"> <button @click="on_click()"> 點我 </button> <p v-show="show">提示文本</p> </div> // main.js 頁面 var app = new Vue({ el: ‘#app‘, data: { show: false, }, methods: { on_click: function () { this.show = !this.show } } }); //v-if:跟v-show的結果一樣,但是v-if是通過append child DOM樹和刪除DOM樹實現 <div> <div v-if="role == ‘admin‘ || ‘super_admin‘">管理員你好</div> <div v-else-if="role == ‘hr‘">待查看簡歷列表</div> <div v-else> 沒有權限</div> </div> // main.js 頁面 var app = new Vue({ el: ‘#app‘, data: { role: ‘admin‘, // role: ‘hr‘, }, }); //v-on:綁定事件只能綁定DOM中存在的事件,簡寫為: @click=‘Myclick‘ <div> <span>事件</span> <button v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}" v-on:click="onClick(1)">點我</button> </div> <div> <input type="text" v-on="{keyup: onKeyup}"> </div> // main.js var app = new Vue({ el: ‘#app‘, data: { my_link: "http://baidu.com", isActive: true, }, methods: { onClick: function (a) { alert(a) }, onMouseenter: function () { console.log("mouse enter") }, onMouseleave: function () { console.log("mouse leave") }, onKeyup: function () { console.log("key up") } }, });v-bind v-show v-if v-for v-on
//指令修飾符
// 我們現在要獲取用戶的註冊信息 // 用戶名以及手機號 用指令修飾符能夠讓我們更加便捷 // HTML 頁面 <div> 用戶名: <input type="text" v-model.lazy.trim="username"><br> {{username}} 手機號: <input type="text" v-model.number="phone"><br> {{phone}} </div> // main.js 頁面 var app = new Vue({ el: ‘#app‘, data: { username: "", phone: "", }, }); 指令修飾符 lazy:model是雙端數據顯示,你只要修改,對應值就跟著改變,lazy是把失焦之後觸發model number:前端在 傳輸數據時一直是字符串,而有些地方需要用數字v-model.lazy
//vue的計算屬性
// 現在我們有一個成績的表格 來計算總分和平均分 // HTML頁面 <div id="app"> <table border="1"> <thead> <th>學科</th> <th>分數</th> </thead> <tbody> <tr> <td>數學</td> <td><input type="text" v-model.number="math"></td> </tr> <tr> <td>物理</td> <td><input type="text" v-model.number="physics"></td> </tr> <tr> <td>英語</td> <td><input type="text" v-model.number="english"></td> </tr> <tr> <td>總分</td> <!--<td>{{math+physics+english}}</td>--> <td>{{sum}}</td> </tr> <tr> <td>平均分</td> <!--<td>{{Math.round((math+physics+english)/3)}}</td>--> <td>{{average}}</td> </tr> </tbody> </table> </div> // js 頁面 var app = new Vue({ el: ‘#app‘, data: { math: 90, physics:88, english: 78, }, computed: { sum: function () { var total = this.math + this.physics + this.english return total }, average: function () { var average_num = Math.round(this.sum/3) return average_num } } }); 計算屬性 computed
//vue的過濾器
// 我們兩個需求 一個是價格展示後面自動加“元” // 單位 毫米和米的轉換 // HTML頁面 <div> <p>價格展示</p> <input type="text" v-model="price"> {{price | currency(‘USD‘)}} </div> <div> <p>換算</p> <input type="text" v-model="meters"> {{meters | meter}} </div> // js 代碼 Vue.filter(‘currency‘, function (val, unit) { val = val || 0; var ret = val+ unit return ret }); Vue.filter(‘meter‘, function (val) { val = val || 0; return (val/1000).toFixed(2) + "米" }); new Vue({ el: ‘#app‘, data: { price: 10, meters: 10, } }); 過濾器 filterfilter
3.獲取DOM元素
:vue對象中是一個一個鍵值對,有一個$refs屬性,這裏面有你給標簽自定義的屬性ref <style> .box { width: 200px; height: 200px; border: solid 1px red; } </style> </head> <body> <div id="app"> <div class="box" ref="my_box"> 這是一個盒子 </div> </div> <script> const app = new Vue({ el: "#app", mounted(){ this.$refs.my_box.style.color = "red"; } }) </script> </body>DOM
4.事件監聽
數據被渲染時,字符串會被立即渲染,
但是對象和數組只能監測到長度是否改變,而改變了特定的值時,監聽不到
所以有一個app.$set(this.數組, 索引, ‘值‘)
5.每個組件的template:只能包括一個作用域塊;
Vue(核心思想)