VUE
Vue.js是前端三大新架構：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和關注程度在三大架構中稍微勝出，并且它的熱度還在遞增
Vue的核心庫隻關注視圖層，Vue的目标是通過盡可能簡單的API實作響應的資料綁定，在這一點上Vue.js類似于背景的模闆語言
Vue也可以将界面拆分成一個個的元件，通過元件來建構界面，然後用自動化工具來生成單頁面(SPA - single page application)系統
- Vue.js官方文檔： https://cn.vuejs.org/v2/guide/
- vue.js下載下傳位址： https://cn.vuejs.org/v2/guide/installation.html
- npm配置cnpm
- windows下配置cnmp環境：
- 預設的使用NPM可能會因為網絡問題而導緻無法使用或延遲居高，可以使npm更新為cnpm，從國内淘寶鏡像中加載所需的npm軟體源
npm install -g cnpm --registry=https://registry.npm.taobao.org
設定安裝包緩存路徑
cnpm config set cache “C:\nodejs\node_cache”
設定安裝包位置
cnpm config set prefix “C:\nodejs\node_global”
之後使用指令安裝的子產品存儲在C:\nodejs\node_global\node_modules裡
- 請按照個人需求設定你的檔案位置
npm config set cache "C:\nodejs\node_cache"
Vue部署
安裝Vue
cnpm install vue -g
安裝vue腳手架
cnpm install vue-cli -g
-g參數代表全局位置安裝，這樣可以在環境變量生效的情況下直接在指令行等工具下使用vue指令行進行項目的開啟
vue-devtools調試工具
vue-devtools可以友善開發者進行Vue中變量等資訊的調試跟蹤
下載下傳vue-devtools
git clone https://github.com/vuejs/vue-devtools
進入到vue-devtools目錄下安裝依賴包
cd vue-devtools-dev
cnpm install
cnpm run build
注意：在進行調試工具安裝時，首先需要修改shells>chrome檔案夾下的mainifest.json中的persistent為true
将插件目錄下的chrome檔案夾拖入到chrome浏覽器的擴充程式下，記得打開調試模式
擴充程式可以通過浏覽器通路
1561789924
chrome://extensions/
Vue-CDN
除去通過npm安裝的方式來使用vue，還可以直接使用cdn中的vue.js檔案
vue.js：開發版本，包含了有幫助的指令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
vue.min.js：生産環境版本，優化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue文法
每個vue應用都是通過執行個體化一個新的vue對象開始的
建立第一個模闆文法：
<div id="content">
{{ message }}
<!-- 這個也叫做插值表達式 -->
</div>
var vm = new Vue({ // vm這個變量不允許使用連字元，可以使用下劃線，比如vm-data是不允許的
el: "#content",
// 對應document中的一個标簽，當vue對象建立後，這個标簽内的區域就被接管
data: {
message: "這是vue裡的變量"
}
})
當一個vue執行個體被建立時，vue的響應式系統中加入了對其data對象中能找到的所有屬性
當這些屬性值被改變時，視圖也會發生相應，并将對應屬性更新為新的值
也可以通過定義函數來改變執行個體中data對象中的資料，資料改變，視圖中的資料也将改變
<div id="app">
<p>{{ message }}</p>
<button @click="ChangeMsg">改變</button>
<!-- 綁定點選事件為定義好的vue函數 -->
</div>
window.onload = function(){
var vm = new Vue({
el: "#app",
data: {
message: "我對應的是message的變量"
},
methods:{ // 定義一個函數 并綁定在按鈕的點選事件上
ChangeMsg:function(){
this.message = "我被改變了";
// 修改目前執行個體中的message變量
}
}
})
}
這裡的代碼，将在點選按鈕時，使目前的message變量發生變化
這樣的文法有點類似一些Web架構，比如django的模闆語言中的模闆變量
傳回值
除了直接定義某個變量的固定值進行頁面渲染，模闆變量還支援通過函數的傳回值進行指派
<div id="app">
<h1>{{ classType }}學習</h1>
<p>{{ content }}</p>
<span>{{ describe() }}</span>
</div>
window.onload = function(){
var vm = new Vue({
el: "#app", // getElementById('app')
data: {
classType: "vue",
content: "這是vue的一個測試",
},
methods:{
describe:function(){
return "這是一個函數的傳回值"
},
}
})
}
Vue模闆指令
模闆文法指的是如何将資料放入html中
Vue.js使用了基于HTML的模闆文法，允許開發者聲明式地将DOM綁定至底層 Vue 執行個體的資料
所有 Vue.js的模闆都是合法的 HTML ，是以能被遵循規範的浏覽器和HTML 解析器解析
插入值，模闆變量
資料綁定最常見的形式就是使用Mustache文法(雙大括号) 的文本插值，也就是上面示例中的
内容綁定
v-html
将内容按照html格式進行插入
<div id="app">
<p v-html="contetn"></p>
</div>
var vm = new Vue({
el: "#app",
data: {
content: "<b>段落标簽</b>文本内容"
},
})
在網站上動态渲染任意HTML是非常危險的，因為容易導緻XSS攻擊
v-html一般隻用在可信内容中，永不用在使用者送出的内容上
v-text
将内容按照文本格式進行插入，但會覆寫原有标簽内的内容，不會有加載的閃爍問題
<div id="app">
<p v-text="contetn"></p>
<p>
{{ gender ? '男' : '女' }}
<!-- ok? true:false -->
</p>
</div>
var vm = new Vue({
el: "#app",
data: {
gender: true, // 變量值為true時，顯示模闆變量中左邊的值
content: "<b>段落标簽</b>文本内容"
},
})
v-cloak
解決使用內插補點表達式時頁面渲染過程，由于變量沒有初始化而導緻的閃爍問題
通俗的來說，比如變量的實際内容沒有被建立，那麼此時頁面隻會展示出這樣的效果，之後當變量初始化之後，将變化為實際的值，此時變化的過程我們稱作閃爍
這個指令可以隐藏未編譯的标簽直到執行個體準備完畢
<div id="app">
{{ message }}
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data:{
message: "測試",
}
})
</script>
在上面的代碼中，如果網速夠慢的清空下，頁面首先加載顯示出的内容是
解決辦法：通過v-clock指令，在使用到模闆變量的标簽上寫入，并設定一個v-clock的類樣式
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<div v-cloak id="app">
<p v-cloak>{{ message }}</p>
</div>
屬性綁定
v-bind
如果我們需要設定的模闆變量是一個屬性，比如a标簽的href屬性
<div id="app">
<a v-bind:href="message">連接配接</a>
<a :href="message +'abc'">連接配接</a>
<!-- 屬性内的模闆變量寫法已被移除，使用v-bind:attr 或 :attr -->
</div>
var vm = new Vue({
el: "#app",
data: {
message: "https://www.baidu.com"
}
})
可以通過v-bind指令或者:的簡寫對某個dom元素的屬性進行綁定
在下面還有更加詳細的屬性綁定示例
事件綁定
v-on
給元素綁定對應事件，以下是對于點選事件的綁定
<div id="app">
<button v-on:click="show">按鈕</button>
<button @click="show">按鈕</button>
</div>
new Vue({
el: "#app",
method: {
show: function(){
alert("彈一下")
}
}
})
跑馬燈效果
這裡有一個跑馬燈效果可以玩耍
<div id="app">
<h3 v-html="message"></h3>
<button @click="start">開始</button>
<button @click="stop">停止</button>
</div>
new Vue({
el: "#app",
data: {
message: "這是一個跑馬燈",
sT: null, // 定時器執行個體
},
methods:{
work(){
this.message = this.message.substring(1) + this.message[0]
// 循環定時器所作的事情
},
start(){
if (this.sT==null) { // 判斷此時是否已有定時器開啟
console.log("開啟定時器")
this.sT = setInterval(this.work,400)
} else {
console.log("已經開啟 不在開啟")
}
},
stop(){ // 關閉定時器 設定定時器變量為null
console.log("關閉定時器")
clearInterval(this.sT)
this.sT = null
}
}
綁定事件修飾符
阻止冒泡
比如一個按鈕在一個div中，并且按鈕和div均有自己的事件，那麼此時點選按鈕，事件會像冒泡一樣從按鈕開始一直到div進行觸發，.stop修飾符用來阻止預設的事件觸發行為
<div id="fDiv" @click="divClick">
<button id="fBtn" @click="btnClick">按鈕</button>
</div>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el: "#fDiv", // 控制區域
data: {},
methods: {
divClick(){
console.log("div被點選了")
},
btnClick(){
console.log("按鈕被點選了")
}
},
})
}
</script>
通過.stop修飾阻止冒泡
<div id="fDiv" @click="divClick">
<button id="fBtn" @click.stop="btnClick">按鈕</button>
</div>
阻止預設行為
比如像a标簽這樣的，在點選時他有預設的跳轉動作，可以通過.prevent阻止該預設行為
<div id="fDiv">
<a href="https://www.baidu.com" @click.prevent="aLink">去百度</a>
</div>
var vm = new Vue(){
el: "#fDiv",
methods:{
aLink(){
console.log("連接配接被點選")
}
}
}
捕獲事件
預設的事件觸發處理機制是冒泡機制，capture代表具有該修飾的事件，會優先觸發，脫離冒泡順序；
也可了解為誰有該修飾符，先觸發誰的事件
<div id="fDiv" @click.capture="divClick">
<button id="fBtn" @click="btnClick">按鈕</button>
</div>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el: "#fDiv", // 控制區域
data: {},
methods: {
divClick(){
console.log("div被點選了")
},
btnClick(){
console.log("按鈕被點選了")
}
},
})
}
</script>
自身事件
與capture和冒泡不同，.self隻有是自身觸發的目前的事件才真正執行處理的回調函數
并且.self隻會阻止目前元素的事件觸發行為
<div id="fDiv" @click.self="divClick">
<button id="fBtn" @click.self="btnClick">按鈕</button>
</div>
// 與上同
單次事件
使用.once隻觸發一次事件函數
<div id="fDiv">
<a href="https://www.baidu.com" @click.prevent.once="aLink">去百度</a>
<!-- 連接配接無法跳轉的阻止事件 隻會出現一次 -->
</div>
var vm = new Vue(){
el: "#fDiv",
methods:{
aLink(){
console.log("連接配接被點選")
}
}
}
表單雙向綁定
v-model
使用v-model指令可以在表單input、textarea以及select元素上建立雙向資料綁定
根據表單上的值，自動更新模闆變量中的值
v-model會忽略表單的初始值，比如：checked、value、selected，如果需要的話，應該在javascript中首先聲明初始值
text
<div id="container">
<h3 v-html="message"></h3>
<input type="text" v-model="message">
</div>
<script>
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
message: "這是個表單内容",
},
})
}
</script>
textarea
<div id="container">
<h3 v-html="message"></h3>
<textarea v-model="message"></textarea>
</div>
// 同上
checkbox
單個複選框：資料為綁定為true和false的布爾值
<div id="container">
<h3 v-html="checked"></h3>
<input type="checkbox" v-model="checked">
</div>
<script>
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
checked: true,
},
})
}
</script>
多個複選框：選中的結果會綁定到同一個數組，将儲存的v-model變量建立為數組
<div id="container">
<h3 v-html="checked"></h3>
<input name="fruit" type="checkbox" value="apple" v-model="checked">蘋果
<input name="fruit" type="checkbox" value="banana" v-model="checked">香蕉
<input name="fruit" type="checkbox" value="orange" v-model="checked">橘子
</div>
<script>
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
checked: new Array,
},
})
}
</script>
radio
<div id="container">
<h3 v-html="picked"></h3>
<input type="radio" name="gender" value="junior" v-model="picked">男
<input type="radio" name="gender" value="girl" v-model="picked">女
</div>
<script>
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
picked: "哈哈哈哈",
},
})
}
</script>
select
<div id="container">
<h3 v-html="selected"></h3>
<select v-model="selected">
<option disabled value="">你想去哪</option>
<option value="山西">山西</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
</div>
<script>
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
selected: "",
},
})
}
</script>
selects
設定select标簽的multiple屬性即可設定為多選下拉菜單，按着ctrl鍵可以多選
<div id="container">
<h3 v-html="selecteds"></h3>
<select multiple v-model="selecteds">
<option value="上衣">上衣</option>
<option value="褲子">褲子</option>
<option value="鞋">鞋</option>
</select>
</div>
<script>
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
selecteds: new Array, // 多重資料一般都要儲存成數組
},
})
}
</script>
修飾符
.lazy
預設情況下，v-model在input和textarea表單中進行同步輸入框的改動
添加了.lazy修飾符之後，對應的v-model綁定事件觸發機制将變為change事件，隻有在光标失去焦點時會觸發
<div id="container">
<h3 v-html="message"></h3>
<input type="text" v-model.lazy="message">
</div>
<script>
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
message: "這是個表單内容",
},
})
}
</script>
.number
如果使用者希望将輸入表單的内容處理為Number類型，可以使用.number給v-model進行修飾；如果表單字元串無法被處理為數字，則傳回原始的值
<div id="container">
<h3 v-html="typeof message"></h3>
<input type="text" v-model.number="message">
</div>
.trim
使用.trim可以自動過濾輸入框的首尾空格
<div id="container">
<input type="text" v-model.trim="message">
<br>
<input type="text" v-model="message">
<!-- 通過檢視另一個表單中同步的縮進 -->
</div>
動态綁定
當某些情況下，無法确定表單中所代表的屬性值，可以使用v-bind進行動态綁定，v-model擷取到的表單輸入此時則是我們定義的v-bind屬性值
<div id="container">
<h3 v-html="message"></h3>
<input type="radio" v-model="message" :value="choiceA"> A
<input type="radio" v-model="message" :value="choiceB"> B
</div>
<script>
window.onload = function () {
var vm = new Vue({
el: "#container",
data: {
message: "", // 表單綁定變量
choiceA: "Yes!", // 屬性綁定變量，未來不需要修改标簽中的value值即可動态修改
choiceB: "No!",
},
})
}
</script>
計算屬性
關鍵詞：computed
模闆内的表達式非常便利，但是設計它們的初衷是用于簡單運算的
在模闆中放入太多的邏輯會讓模闆過重且難以維護
也就是說，某些時候頁面中的模闆變量如果需要複雜的運算處理，應該使用計算屬性，而不是直接在模闆位置進行計算。
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: "#container",
data: {
String1:"這是一個字元串",
},
methods: {
MreverseString(){
return this.String1.split("").reverse().join("")
} // 定義一個函數進行字元串逆置
},
computed: {
CreverseString(){
return this.String1.split("").reverse().join("")
} // 定義一個計算屬性進行字元串逆置
}
})
}
</script>
<div v-cloak id="container">
<p>這是一個字元串:{{ String1 }} </p>
<p>他的逆置:{{ String1.split("").reverse().join("") }} </p>
<p>他的逆置:{{ CreverseString }} </p>
<!-- 計算屬性直接寫入函數名 -->
<p>他的逆置:{{ MreverseString() }} </p>
<!-- 普通methods函數調用需加括号 -->
</div>
注意：雖然計算屬性和函數都可以達成同樣的目的，但是computed會緩存結果，計算屬性如果發現依賴的屬性message未發生改變，再次通路計算屬性不會重複運算函數，而是直接利用已有結果；如果依賴資料發生改動，計算屬性函數才會重新運算。
在函數及計算屬性中添加日志輸出即可看到這個效果：
methods: {
MreverseString() {
console.log("MreverseString被運算了")
return this.String1.split("").reverse().join("")
}
},
computed: {
CreverseString() {
console.log("CreverseString被運算了")
return this.String1.split("").reverse().join("")
}
}
在終端下進行計算屬性以及函數的通路即可看到效果。
計算屬性SetAttr
預設的計算屬性隻有擷取getattr的方式，我們可以手動為他添加一個setter
computed:{
CreverseString: {
get: function(){
return this.String1.split("").reverse().join("")
}
set: function(val){
this.String1 = val.split("").reverse().join("")
// 如果目前的逆置之後字元串為val，那麼原本的字元串需要再颠倒一次
}
}
}
偵聽屬性
偵聽屬性的作用是偵聽某些屬性的變化，進而做相應的操作，進行對資料變化的相應，
偵聽屬性是一個對象（字典），key值是要監聽的元素，值是當監聽的元素發生改變時要執行的函數；
監聽函數有兩個參數，一個是目前值，另一個是變化後的值
比如監聽一個變量的變化
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el: "#container",
data:{
content: "", // 表單内容
count: 0, // 記錄表單内使用者敲了多少次
},
watch:{
content:function (oldVal,newVal){
// 隻要在文本框輸入内容影響到了age資料發生改變，就會觸發
this.count += 1
}，
}，
})
}
</script>
<div id="container">
<p><label>你敲了:{{ count }}次</label></p>
<input type="text" placeholder="請輸入你的年紀" v-model="content">
</div>
屬性綁定
使用v-bind:class指令來設定元素的class屬性；
屬性表達式的類型可以是字元串、對象或數組
數組屬性
可以通過為元素綁定一個數組，用來為元素設定單個或多個樣式，類名在數組中用單引号
<style type="text/css">
.fontBold {
font-weight: bold;
}
.fontRed {
color: red;
}
</style>
<div id="container">
<p :class="['fontBold','fontRed']">這是一個段落</p>
</div>
動态屬性
可以通過為元素綁定一個對象，對象的key是樣式類，對象的value是true或false來動态切換class
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: "#container",
data: {
flag: true,
},
methods: {
toggle() {
if (this.flag){ // 判斷目前toggle變量的屬性，對稱變換
this.flag = false
}else{
this.flag = true
}
}
}
})
}
</script>
<div id="container">
<p :class="{fontBold: flag}" @click="toggle">這是一個段落</p>
<p :class="{flag? fontBold:''}" @click="toggle">這是一個段落</p>
<!-- 三元表達式 -->
</div>
樣式綁定
使用v-bind:style文法，為元素綁定樣式
<p :style="{color:'red','font-weight':'bold'}">
一段文字
</p>
也可以在vue的data中定義一個對象，用來描述樣式，其中帶有連字元的樣式屬性要加引号
<div id="container">
<p :style="styleObj">一段文字</p>
</div>
data: {
styleObj: {
color:'red',
'font-weight':'bold',
}
},
data中的對象也可以通過數組類型綁定到元素上
<div id="container">
<p :style="[styleObj1,styleObj2]">一段文字</p>
<!-- 對于js的樣式綁定不需要加引号，因為就是一個變量 -->
</div>
styleObj1: {
border: '1px solid gray',
width: '100px',
},
styleObj2:{
background: 'black',
color: 'blue',
}
條件渲染
通過條件指令可以控制元素的顯示及隐藏，或者說叫做建立和銷毀
v-if
v-if指令用于條件性的渲染一塊内容。這塊内容隻會在指令的表達式傳回truthy值的時候渲染
<div v-cloak id="container">
<h3 v-if="oh3">h3标題</h3>
<p v-if="gender === 'girl'">你是女的</p>
<p v-else-if="gender === 'boy'">你是男的</p>
<p v-else>不男不女</p>
</div>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el: "#container",
data:{
oh3:"a",
gender: 'other'
},
})
}
</script>
truthy和ture的差別：
隐含有true屬性的變量不可以認為它是true，它不是boolean類型
v-show
與v-if不同的是，v-show 的元素始終會被渲染并保留在DOM中
v-show 隻是簡單地切換元素的CSS屬性 display
<div v-cloak id="container">
<h3 v-if="oh3">h3标題</h3>
<h4 v-show="oh4">h4标題</h4>
</div>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el: "#container",
data:{
oh3:"1", // v-if 在該變量不為真時直接消失在document中
oh4:"1", // v-show 處理不為真的變量條件 綁定元素不會消失
},
})
}
</script>
清單渲染
v-for
把一個數組對應為一組元素
用 v-for 指令根據一組數組的選項清單進行渲染
v-for 指令需要使用 item in items 形式的特殊文法，items 是源資料數組并且 item 是數組元素疊代的别名
<ol id="container">
<li v-for="user in users">
<span>{{ user.name }}</span>
</li>
</ol>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el: "#container",
data:{
users: [
{name:"張三",age:18},
{name:"李四",age:20},
{name:"王五",age:19},
]
},
})
}
</script>
v-for還可以支援将目前循環索引作為渲染時的第二個參數，第二個參數為通路索引位置
<p v-for="(user,index) in users">
{{ index }}:{{ user.age }}
</p>
data:{
users: [
{name:"張三",age:18},
{name:"李四",age:20},
{name:"王五",age:19},
]
},
使用v-for疊代通路一個對象
<p v-for="key in myself">
{{ key }}
<!-- 當v-for渲染時隻有一個參數，此時參數為value值 -->
</p>
myself : {
name:"趙六",
age:"17",
}
v-for支援最多三個參數，同時擷取周遊對象的key和value值，以及index索引位置
要注意的是，此時的key和value和python中的順序是颠倒的，key在後，value在前
<p v-for="(value,key,index) in myself">
{{ index }}: {{ key }} - {{ value }}
</p>
myself : {
name:"孫七",
age:"17",
}
v-for進行一段取值
<div>
<p v-for="n in 8">
{{ n }}
</p>
<!-- 1 2 3 4 5 6 7 8 -->
</div>
頁籤練習
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
choicId: null,
}
})
}
</script>
<style>
li{
list-style-type: none;
border: 3px outset lightgreen;
width: 100px;
background:lightblue;
margin:5px;
}
li:hover{
border: 3px inset gray;
cursor: pointer;
}
[v-cloak]{
display: none;
}
</style>
<div v-cloak id="container">
<ol list>
<li @click="choicId = 1">A</li>
<li @click="choicId = 2">B</li>
<li @click="choicId = 3">C</li>
<li @click="choicId = 4">D</li>
</ol>
<p v-show="choicId == 1">aaaaaaaaaa</p>
<p v-show="choicId == 2">bbbbbbbbbb</p>
<p v-show="choicId == 3">cccccccccc</p>
<p v-show="choicId == 4">dddddddddd</p>
</div>
js中兩個等号和三個等号的差別：
==表示： 如果兩邊值的類型不同的時候，是要先先進行類型轉換後，才能做比較；equality等同
==表示：不需要做類型轉換，如果兩邊值的類型不同，就表示一定是不等的identity恒等
注意
Vue無法檢測到對于數組的索引設定及長度修改以及對于對象屬性的删除或添加
但是可以通過以下方式進行屬性添加觸發狀态更新
Vue.set($vm.Object,"key","val") // 對于對象 這樣的添加方式可以觸發狀态更新
Vue.set($vm.Array, index, newVal) // 對于數組 添加元素 觸發狀态更新
// vm.items.splice(newLength) // 設定數組長度
javascript.splice(where, num, [additem1,additem2...] )：删除或添加元素
此外，當v-for與v-if同時使用時，v-for有更高的優先級，這會造成重複周遊得到的元素都要在做一次v-if的判斷，如果我們是為了有目的判斷目前是否需要渲染這個元素，或是跳過這個循環，可以将v-if放在外層元素，比如template标簽中，(template标簽無實際意義，預設不展示，但是可以起到包裹作用)
過濾器
Vue.js允許你自定義過濾器，可被用于一些常見的文本，對它們進行格式化
過濾器可以用在兩個地方：雙花括号插值和 v-bind 表達式 (後者從 2.1.0+ 開始支援)
過濾器應該被添加在JavaScript表達式的尾部，由管道符号訓示
文法
<p>
{{ message | filter }}
</p>
<p v-bind:type="message | filter"> </p>
過濾器本質上是一個函數，比如我們定義一個将表單輸入的内容中所有的字母變大寫的過濾器
<body>
<div v-cloak id="container">
<input type="text" v-model="message">
<p>展示: {{ message | toUpper }}</p>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: "#container",
data: {
message: "",
},
filters: {
toUpper: function (value) {
if (!value) return '' // 字元串内容為空 直接傳回
console.log("正在變大小")
return String(value).toUpperCase()
}
}
})
}
</script>
過濾器函數也可以有多個參數
{{ message | filter(arg1, arg2) }}
// message 第一個參數
// arg1 第二個參數
// arg2 第三個參數
<div v-cloak id="container">
<input type="text" v-model="message">
<p>展示: {{ message | toLong("| "," |") }}</p>
</div>
filters: {
toLong(value,arg1,arg2){
if (!value) return ''
return arg1 + value + arg2
}
}
Vue執行個體生命周期
每個Vue執行個體在被建立時都要經過一系列的初始化過程
例如：需要設定資料監聽、編譯模闆、将執行個體挂載到DOM并在資料變化時更新DOM等
同時在這個過程中會自動運作一些叫做生命周期鈎子的函數，我們可以使用這些函數，在執行個體的不同階段加上我們需要的代碼，實作特定的功能
beforeCreate：資料還沒有監聽，沒有綁定到vue對象執行個體，同時也沒有挂載對象
created：資料已經綁定到了對象執行個體，但是還沒有挂載對象
beforeMount：模闆已經編譯好了，根據資料和模闆已經生成了對應的元素對象，将資料對象關聯到了對象的$el屬性
$el屬性是一個HTMLElement對象，也就是這個階段，vue執行個體通過原生的createElement等方法來建立這個html片段，準備注入到我們vue執行個體指明的el屬性所對應的挂載點
mounted： 将$el的内容挂載到了el，相當于我們在jQuery執行了$(el).html($el)，生成頁面上真正的dom
上面我們就會發現頁面的元素和我們$el的元素是一緻的；在此之後，我們能夠用方法來擷取到el元素下的dom對象，并進行各種操作
beforeUpdate：資料發生變化時調用
updated：由于資料更改導緻的虛拟DOM重新渲染和打更新檔，在這之後會調用該鈎子
beforeDestroy：Vue執行個體銷毀前
destroyed：Vue執行個體銷毀後
window.$vm.$destroy()
一大段代碼進行鈎子函數的調用過程監控
<script type="text/javascript">
window.onload = function () {
function showData(process, vm) {
console.log(process)
console.log("vue資料:", vm.message) // 目前Vue中的資料
console.log("Vue挂載el:") // Vue接管的元素
console.log(vm.$el)
console.log("真實Dom:")
console.log(document.getElementById("container").innerHTML)
console.log('-----------------')
} // 這個函數用來輸出相關資訊的
new Vue({
el: "#container",
data: {
message: "aaaaa",
},
beforeCreate: function () {
showData("建立Vue執行個體前", this)
},
created: function () {
showData("建立Vue執行個體後", this)
},
beforeMount: function () {
showData("挂載到Dom前", this)
},
mounted: function () {
showData("挂載到Dom後", this)
},
beforeUpdate: function () {
showData("資料發生變化時", this)
},
updated: function () {
showData("資料發生變化後", this)
},
beforeDestroy: function () {
showData("Vue執行個體銷毀前", this)
},
destroyed: function () {
showData("Vue執行個體銷毀後", this)
}
})
}
</script>
<div id="container">
<p v-html="message"></p>
</div>
元件
ES6文法
ES6是JavaScript語言的新版本，它也可以叫做ES2015，之前學習的JavaScript屬于ES5，ES6在它的基礎上增加了一些文法
ES6是未來JavaScript的趨勢，而且vue元件開發中會使用很多的ES6的文法，是以掌握這些常用的ES6文法是必須的
變量聲明
let：定義封閉作用域的變量，并且變量隻能聲明一次
const：定義封閉作用域的常量，并且變量隻能聲明一次
let和const是新增的聲明變量的開頭的關鍵字，在這之前，變量聲明是用var關鍵字
這兩個關鍵字和var的差別是，它們聲明的變量沒有預解析，無法脫離定義空間使用
let和const的差別是，let聲明的是一般變量，const申明的常量，不可修改
console.log(a) // undefined
console.log(b) // b is not defined
console.log(c) // c is not defined
var a = 1
var a = 2
let b = 2
// let b = 3 // Identifier 'b' has already been declared
const c = 3
// const c = 4 // Identifier 'c' has already been declared
c = 4 // Assignment to constant variable
箭頭函數
可以把箭頭函數了解成匿名函數的第二種寫法，箭頭函數的作用是可以在對象中綁定this
解決了JavaScript中this指定混亂的問題
定義函數的一般方式
function func(){
...
}
匿名指派建立函數
var func = function(){
...
}
箭頭函數的寫法
var func = (a, b) => {
// 這樣的函數在嵌套時，會自動綁定外部作用域下的this
}
var func = a => {
// 一個參數時，可以省略參數
}
window.onload = function () {
var vm = new Vue({
el: "#container",
data: { message: "abcdef", },
methods: {
show() {
console.log("這是show函數:", this.message),
func = () => {
console.log("我是内部函數:", this.message)
},
func(), // 調用一下這個内部函數
}
}
})
}
<div id="container">
<button @click="show">按鈕</button>
</div>
Vue元件
元件Component是Vue.js最強大的功能之一
元件可以擴充HTML元素，封裝可重用的代碼
所有的Vue元件同時也都是Vue的執行個體，是以可接受相同的選項對象（除了一些根級特有的選項）并提供相同的生命周期鈎子
注冊全局元件
注冊一個全局元件文法格式如下
Vue.component(tagName, options)
// tagName：元件名
// options：配置選項
比如這樣一個全局元件
Vue.component('button_show', {
data: function () {
return {
count: 0
}
}, // 目前元件會需要的資料，定義為函數的傳回值
template: '<button @click="count++">按鈕:{{ count }}</button>'
// 元件的标簽模闆
})
接下來可以在任何Vue接管的元素中使用該元件，
<div id="container">
<button_show></button_show>
</div>
window.onload = function () {
var vm = new Vue({
el: "#container",
})
}
data必須是函數
元件就是vue的執行個體，所有vue執行個體中屬性和方法，元件中也可以用
其中data屬性必須是一個函數，因為元件會重複使用在多個地方，為了使用在多個地方的元件資料相對獨立，data屬性需要用一個函數的傳回值來将資料處理為不同的每個個體
Prop傳遞資料
Prop是你可以在元件上注冊的一些自定義特性
當一個值傳遞給一個prop特性的時候，它就變成了那個元件執行個體的一個屬性
為了給元件傳遞資料，我們可以用一個 props 選項将一些特性值列舉在其中
<script type="text/javascript">
Vue.component("myp",{
props: ["content","like"], // 需要兩個外界傳入的值
template: "<p :class='like'>{{ content }}</p>"
// 元件綁定未來要接受的變量，要用到v:bind
})
window.onload = function(){
var vm = new Vue({
el: "#container",
data: {
content: '這是p段落的文本',
like: 'beauty', // 要傳遞的變量
}
})
}
</script>
.beauty{
width: 100px;
color: red;
background: green;
}
<div id="container">
<myp :like="like" :content="content"></myp>
<!-- 傳遞到元件中 -->
</div>
VUE的安裝指令
vue 安裝腳手架
安裝 npm
檢視npm版本号
npm -v
安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
将cnpm和npm添加到環境變量中，供全局使用
檢視版本
cnpm -v
安裝vue
cnpm install vue
初始化項目
vue init webpack 項目名稱
切入項目 cd 項目名稱
cnpm install
完成安裝
![Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)