重拾vue1

vue

1、認識Vue

定義：一個構建數據驅動的 web 界面的漸進式框架

優勢：

一、能夠徹底經過客戶端瀏覽器渲染頁面，服務器端只提供數據

二、方便構建單頁面應用程序（SPA）

2、引入Vue

<div id="app"> <p title="p"></p> <p v-bind:title='title'></p> </div> <script type="text/javascript" src="vue.js"></script> <script> new Vue({ el: '#app', data: { title: 'vue-p' } }) </script> 

3、Vue實例

• 實例：el

<div id='app'> </div> <script> new Vue({ el: '#app' }) </script> 

• 數據：data

<div id='app'> <p v-text='msg1'></p> <p>{{ msg2 }}</p> </div> <script> new Vue({ el: '#app', data: { msg1: '段落1', msg2: '段落2' } }) </script> 

• 方法：methods

<div id='app'> <p v-on:click='func'>{{ msg }}</p> </div> <script> new Vue({ el: '#app', data: { msg: '段落' }, methods: { func: function() { alert(this.msg) } } }) </script> 

• 計算屬性：computed

<div id='app'> <div> 姓：<input type='text' v-model='first_name'> </div> <div> 名：<input type='text' v-model='last_name'> </div> <div> 全名：<input type='text' v-model='full_name'> </div> </div> <script> new Vue({ el: '#app', data: { first_name: '', last_name: '' }, computed: { full_name: function() { return this.first_name + this.last_name } } }) </script> 

• 監聽器：watch

<div id='app'> <div> 姓名：<input type='text' v-model='full_name'> </div> <p>姓：{{ first_name }}</p> <p>名：{{ last_name }}</p> </div> <script> new Vue({ el: '#app', data: { full_name: '', first_name: '', last_name: '' }, watch: { full_name: function() { this.first_name = this.full_name.split(' ')[0]; this.last_name = this.full_name.split(' ')[1]; } } }) </script> 

• 分隔符：delimiters

<div id='app'> ${ msg } </div> <script> new Vue({ el: '#app', data: { msg: 'message' }, delimiters: ['${', '}'] }) </script> 

• 實例對象使用成員屬性與方法

<script> var app = new Vue({ el: '#app', data: { msg: 'message' } }) console.log(app) console.log(app.$el) console.log(app.$data.msg) console.log(app.msg) </script> 

4、實例生命週期鉤子

• 定義

每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。 

• 鉤子方法

beforeCreate：在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。 created：在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。 beforeMount：在掛載開始以前被調用：相關的 render 函數首次被調用。 mounted：el被新建立的vm.$el替換，並掛載到實例上去以後調用該鉤子。 beforeUpdate：數據更新時調用，發生在虛擬 DOM 打補丁以前。 updated：數據更新時調用，發生在虛擬 DOM 打補丁以前。 activated：keep-alive 組件激活時調用。 deactivated：keep-alive 組件停用時調用。 beforeDestroy：實例銷燬以前調用。在這一步，實例仍然徹底可用。 destroyed：Vue實例銷燬後調用。調用後，Vue實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。 errorCaptured：2.5.0+ 新增，當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。 

• 重點鉤子

created：實例徹底建立完畢(屬性與方法都準備就緒)。能夠進行數據操做(請求後臺數據，從新渲染最新數據) mounted：虛擬DOM構建完畢，並完成實例的el掛載。能夠從新操做頁面DOM 

5、視圖常規操做

• v-text：文本變量

<p v-text='msg'></p> <p>{{ msg }}</p> 

• v-once：一次性文本賦值

<p v-once>{{ msg }}</p> 

• v-html：html文本變量

<p v-html='msg'></p> <script> new Vue({ el: '#app', data: { msg: '<b>文本</b>' } }) </script> 

• v-bind：屬性綁定

<div id="app"> <img v-bind:src='imgSrc' /> <!-- 簡寫 --> <img :src='imgSrc' /> </div> <script> new Vue({ el: '#app', data: { imgSrc: 'https://www.baidu.com/favicon.ico' } }) </script> 

• v-model：雙向數據綁定

<div id="app"> <input type="text" v-model='msg'> <p>{{ msg }}</p> </div> <script> new Vue({ el: '#app', data: { msg: '' } }) </script> 

• v-cloak：避免頁面加載閃爍

<style> [v-cloak] { display: none; } </style> <div id="app" v-cloak> </div> 

• 視圖自身運算

<div id="app" v-cloak> <p>{{ 1 + 1 }}</p> <p>{{ [1, 2, 3].join('@') }}</p> </div> 

6、條件渲染

• v-if：值true會被渲染，值false不會被渲染

<div id="app"> <div v-if='isShow'>div div div</div> <button @click='isShow = !isShow'>改變</button> </div> <script> new Vue({ el: '#app', data: { isShow: true } }) </script> 

• v-else：與v-if結合使用造成對立面

<div id="app"> <div v-if='isShow'>div div div</div> <div v-else='isShow'>DIV DIV DIV</div> <button @click='isShow = !isShow'>改變</button> </div> <script> new Vue({ el: '#app', data: { isShow: true } }) </script> 

• v-else-if：變量的多狀況值判斷

<div id="app"> <div v-if='tag == 0'>if if if</div> <div v-else-if='tag == 1'>else if else</div> <div v-else='tag == 2'>else else else</div> <input type='number' min='0' max='2' v-model='tag' /> </div> <script> new Vue({ el: '#app', data: { tag: 0 } }) </script> 

• template：不被渲染的vue結構標籤

<template v-if="isShow"> <p>用template嵌套</p> <p>能夠爲多行文本</p> <p>同時顯隱</p> <p>且template標籤不會被vue渲染到頁面</p> </template> 

• v-show：必定會被渲染到頁面，以display屬性控制顯隱
• key：爲v-if方式的顯隱建立緩存，提升效率

<div id="app"> <div v-if='tag == 0' key='0'>if if if</div> <div v-else-if='tag == 1' key='1'>else if else</div> <div v-else='tag == 2' key='2'>else else else</div> <input type='number' min='0' max='2' v-model='tag' /> </div> <script> new Vue({ el: '#app', data: { tag: 0 } }) </script> 

7、列表渲染

• v-for：循環渲染列表

<div id="app"> <ul> <li v-for='item in items'>{{ item }}</li> </ul> <button @click='click'>改變</button> </div> <script> new Vue({ el: '#app', data: { items: ['張三', '李四', '王五'] }， methods: { click: function () { this.items.splice(1, 1, '李大大'); this.items.pop(); this.items.push('趙六') } } }) </script> 

• 遍歷數組

// items: ['張三', '李四', '王五'] // 值 <ul> <li v-for='item in items'>{{ item }}</li> </ul> // 值, 索引 <ul> <li v-for='(item, index) in items'>{{ index }} - {{ item }}</li> </ul> 

• 遍歷對象

// {'name': '張三', 'age': 18, 'sex': '男'} // 值 <div v-for="value in object"> {{ value }} </div> // 值, 鍵 <div v-for="(value, key) in object"> {{ key }}: {{ value }} </div> // 值, 鍵, 索引 <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> 

• 複雜數據渲染

// items: [{'name': '張三'}, {'age': 18}, {'sex': '男'}] <div> <div>{{ items[0].name }}</div> <div>{{ items[1].age }}</div> <div>{{ items[2].sex }}</div> </div>