vue基本使用及腳手架使用
阿新 • • 發佈：2018-11-19
一、基本使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in list">{{item}}</li> </ul> <div ref="box" id="app111">{{message}}</div> <button @click="handleUpdate()">修改資料</button> </div> <buttononClick="destory()">銷燬</button> </body> </html> <!-- 必須匯入的vue檔案 --> <script src="vue.js"></script> <script> var vm = new Vue({ el: "#app", beforeCreate() { console.log("beforeCreate....."); console.log(this.message) }, created() { console.log("created....."); setTimeout(() => { for (var i = 0; i < 10; i++) { this.list.push(i); } this.message = "zhang" }, 3000) }, data: { list: [], message: "" }, computed:{ }, beforeMount() { console.log("beforeMount..."); console.log(this.$refs) console.log(app.innerHTML) }, mounted() { console.log("mounted..."); console.log(this.$refs) console.log(app.innerHTML) }, beforeDestroy() { console.log("beforeDestroy....."); console.log(this.$refs) console.log(app.innerHTML) console.log(this.message) }, destroyed() { console.log("destroyed......") console.log(this.$refs) console.log(app.innerHTML) console.log(this.message) }, methods: { handleUpdate() { this.message = "張三" + new Date().getTime() }, }, beforeUpdate() { console.log("beforeUpdate"); console.log(app.innerHTML) // console.log(app.innerText) }, updated() { console.log("updated") console.log(app.innerHTML) // console.log(app.innerText) } }) function destory() { alert(1) vm.$destroy() } </script>
1、計算屬性與methods
/*
computed:
計算屬性：通過屬性計算得來的屬性
只要屬性發生變化那麼該方法就會被呼叫
computed裡面的方法呼叫的時候是不需要加()
computed計算屬性，如果屬性的值沒有變化的時候會從快取中進行讀取。而不是重新計算
methods:裡面的方法每次呼叫的時候都會重新執行 相比較來說非常耗費效能
v-model.number:將字串轉換為數字
*/
2、methods 與 computed watch三者之間的區別
/*
methods 與 computed watch三者之間的區別
methods:裡面書寫的是方法，呼叫的時候需要加() 每次執行的時候內部所以的引數都會重新執行
computed:計算屬性，當計算完畢以後會將計算的結果儲存在快取中，第二次在進行計算的時候
如果資料沒有發生變化，那麼會從快取中讀取結果。效能要比methods高.計算屬性呼叫的時候是不
需要加()的
watch:監聽屬性的變化。watch是不需要呼叫的，只要屬性發生了變化，那麼就會接受到2個值
一個是新值 一個是舊值。watch是高頻率事件 如果能用computed實現的功能儘量不要用watch
深度監聽：監聽物件的時候，增加deep：true
*/
另：屬性監聽<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <h3>我的名字叫{{fullName}}--------------{{names}}</h3> <hr> <input type="text" v-model="obj.name"> <input type="text" v-model="obj.age"> <button @click="handleDeep()">開始監聽</button> </div> </body> </html> <script src="vue.js"></script> <script> /* 屬性監聽 watch 當屬性發生改變的時候用來監聽屬性的變化 watch裡面的方法名字都是屬性的key值 */ var vm = new Vue({ el:"#app", data:{ firstName:"", lastName:"", fullName:"", obj:{ name:"張三", age:22 } }, methods:{ handleDeep(){ this.$watch("obj",()=>{ console.log("呼叫了") },{ deep:true }) } },
computed:{ names(){ return this.firstName+this.lastName; } },
//能用computed解決的，儘量不用watch watch:{ firstName(newVal,oldVal){ if(!/李/g.test(newVal)){ this.fullName = newVal + this.lastName; } }, lastName(newVal,oldVal){ this.fullName =this.firstName+ newVal; }, obj:{ handler(){ console.log("obj呼叫了") },
//監聽物件時需要深度監聽，需要加deep:true deep:true } }
}) </script>
3、生命週期
/*
建立前
beforeCreate當初始化的時候讀取生命週期函式，但是不能進行呼叫
created:當beforeCreate初始化完畢以後，會執行created。當執行created的時候會讀取當前vm
身上所以的屬性(把所有的屬性都新增一個getter和setter方法)和方法遍歷掛載到vue的例項身上。在created中可以訪問到資料和方法了
(可以做的事情：ajax的請求)
//outerHTML不是w3c的規範
beforeMount當執行beforeMount的讀取到所有的虛擬DOM,和資料進行結合，但是沒有生產真
正的DOm結構但是這裡面是訪問不到虛擬DOM的
mounted：掛載完成，在這裡面虛擬DOM和資料結合完成後生成真正的DOM結構，在這裡可以使用refs
進行dom的操作
使用一些外掛進行例項化的時候我們都可以在這裡面進行操作 例如 swiper better-scroll
beforeDestroy：銷燬前是可以訪問到當前dom的元素，但是銷燬後也就destroyed就不能訪問到
dom元素了.把vm與DOM之間的關聯全部斷開
beforeUpdate:當資料進行修改的時候會執行beforeUpdate，但是資料不會立馬進行更新，而是
資料和模板進行相結合的狀態
updated資料和模板結合完畢生成新的DOM結構
後學新增：(keep-alive 包裹動態元件component 時)
activated： 當元件進入活躍狀態的時候
deactivated: 當元件為快取狀態的時候
*/
4、常用的例項化方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p>年齡：{{age}}</p> <p>姓名：{{message}}</p> </div> <button onClick="add()">新增el</button> <button onClick="destroy()">銷燬</button> <button onClick="forceUpdate()">強制更新</button> </body> </html> <script src="vue.js"></script> <script> var vm = new Vue({ // el:"#app", data:{ message:"李想" } }) vm.age = 19; console.log(vm) function add(){ //外部設定el 設定vue的作用域 vm.$mount("#app"); } function destroy() { //銷燬vm例項與DOM之間的關聯 vm.$destroy() } function forceUpdate() { //如果說屬性沒有getter/setter方法的時候我們可以呼叫以下這個方法進行強制更新 vm.$forceUpdate(); } </script>/* 例項身上的方法 $on：繫結事件
$emit：觸發事件
$off：解綁事件
$once：觸發一次
$mount:手動掛載
$destroy：銷燬
$forecUpdate：強制更新
$nextTick() */
二、腳手架的使用
<!--
全域性安裝：
npm install vue-cli -g 腳手架的安裝：
vue init webpack-simple myapp (myapp 為要新建的檔名字) 後，按照黑視窗指令 cd myapp 切換到當前檔案 npm install 或 cnpm install 安裝依賴 npm run dev 執行 -->
之後，就可以正常使用嘍