一、vue對象創建
<html>
<head>
<!-- 導入vue.js -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<p v-cloak>{{ msg }}</p>
<h4 v-text="msg"></h4>
</div>
<script>
//通過構造函數創建Vue對象
var vm = new Vue({
el:'#app', //表示控制 id爲App的div
data:{
msg:'123',
msg2:'<h1>haha</h1>',
mytitle:'自定義的title'
}
});
</script>
</body>
</html>
vue中常用屬性
在Vue對象中有一些常用的屬性以及function，下面對其總結：
var vm = new Vue({
el:'#app',
template: , //模板定義
router： , //註冊router對象
data:{
'firstname':'',
'lastname':'',
'fullname':''
},
methods: {
show() {
alter('hello')
}
},
與下面等價
/*
methods: {
show:function() {
alter('hello')
}
},
*/
//私有過濾器
filters : {
filter_name:function(data, param1) {
}
},
//指令
directives: {
'fontweight': {
bind:function(el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize':function(el,binding) {//縮寫形式 等同與將函數註冊到bind和updated中
el.style.fontSize = binding.value
}
},
render: function(createElements) {
//形參是一個函數對象 render用於渲染組件 注意app容器中內容會被清空
return createElements(templateObject);
//templateObject是組件對象 例如 var templateObject = {template:"<h1>登錄組件</h1>"}
}
components: {//私有組件 爲當前vue實例創建組件
},
watch : {//監聽器 監聽數據改變 可以監聽dom元素(例如文本框改變)以及非dom元素改變(例如路由路徑改變)
'firstname':function(newValue, oldValue) {//表示監聽data中firstname字段，如果firstname字段有變化則執行該函數
console.log("firstname新值："+newValue+" firstname舊值："+oldValue)
},
'$route.path':function(newValue, odlValue) {//表示監聽 路由路徑改變 其中$route爲路經對象
console.log("route.path新值："+newValue+" route.path舊值："+oldValue)
}
},
computed: {
//使用方法：自定義屬性以及處理函數
//注意事項：
// 在使用時直接使用屬性名稱即可，不需要(),就能調用對應的方法
// 屬性處理函數中，一般會依賴一些data中數據，只要依賴的數據有變化就會出發 屬性函數的執行，
// 例如：firstname改變了，這個fullname屬性函數就會執行
// 屬性函數結果會被緩存起來，如果屬性函數中依賴的數據沒有變化，即使屬性被多次使用，
// 屬性函數也不會被調用，而是直接使用緩存下來的結果
// 屬性函數必須return一個值而watch中的函數可以沒有return
'fullname':function() {
return this.firstname + '-' + this.lastname;
}
},
//生命週期分爲：創建時期、運行週期、銷燬時期
//創建時期：生命週期函數
beforeCreate() {
//vue中data methods沒有被初始化
},
created() {
//vue中data、methods已經初始化
},
beforeMount() {//執行此函數時 模板已經編譯好了，但尚未掛載到html頁面中
},
mounted() {//mounted表示實例已經創建完畢
}
//運行時期：生命週期函數
beforeUpdate() {//表示vue實例的data有更新執行，但還沒有渲染頁面
},
updated() {//渲染頁面完成之後
}
//銷燬期間
beforeDestroy() {//vue實例 從運行階段進入銷燬階段
}
destroyed() {
}
})
二、vue常用指令
1、v-cloak 用於解決插值表達式閃爍問題（網頁加載慢）
<html>
<head>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<p v-cloak>{{ msg }}</p> <!-- msg爲vue實例中data下面的屬性 -->
</body>
</html>
2、v-text 用於代替插值表達式 ,沒有閃爍問題
<body>
<h4 v-text="msg"></h4> <!-- msg爲vue實例中data下面的屬性 -->
</body>
3、v-html可以解析html標籤， v-text和插值表達式 是原樣輸出並不會解析html標籤
<body>
<!-- msg2爲vue實例中data下面的屬性 例如msg2='<h3>h3的標題</h3>'-->
`<div v-html="msg2"></div>`
</body>
4、v-bind是vue中用於綁定屬性的指令，縮寫形式爲:（冒號）,例如：
<body>
<!-- 按鈕的title值爲 vue實例中data下面mytitle屬性值拼接上123 -->
<input type="button" value="按鈕" v-bind:title="mytitle + '123'">
<!-- 和上面等價
<input type="button" value="按鈕" :title="mytitle + '123'">
-->
</body>
5、v-on 用於事件綁定, 縮寫形式是@
<body>
<!-- 其中show是vue實例中method下面一個方法 -->
<input type="button" value="按鈕" v-bind:title="mytitle" v-on:click="show">
<!-- 和上面等價
<input type="button" value="按鈕" v-bind:title="mytitle" @click="show">
-->
</body>
v-on包含一些子屬性：
| 屬性名 | 說明 | 使用 |
|---|---|---|
| stop | @click.stop=“function-name” | 阻止冒泡事件 |
| prevent | @click.prevent=“function-name” | 阻止默認行爲，例如<a>標籤默認行爲是跳轉，表單有submit行爲 |
| self | @click.self=“function-name” | 表示只觸發自己的事件 |
| once | @click.prevent.once=“function-name” | 只觸發一次 |
| capture | @click.capture=“function-name” | 捕獲事件 |
舉例說明：
once：表示超鏈接默認行爲只阻止一次
<a href="www.baidu.com" @click.prevent.once="function-name"></a>
capture：
默認(冒泡方式)：點擊btn按鈕出發的事件， 先btn click 然後在div click事件
加了capture屬性：先發生div click 再觸發btn click
<div id="app">
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
6、v-mode 唯一個雙向數據綁定,只能用於表單元素
通過修改文本框txt2的內容會同步修改文本框txt1中的內容，反之則不行
<h4>{{ msg }}</h4>
<!-- v-bind只能實現單向數據綁定 從 M 到 V -->
<input type="text" name="txt1" id="txt" v-bind:value="msg" style="width: 100%;">
<!-- v-model指令可以實現 表單元素和Model中數據 雙向數據綁定 -->
<input type="text" name="txt2" id="txt" v-model="msg" style="width: 100%;">
7、v-for 就是for循環，用於迭代數組、對象、數字
<p v-for="(value, index) in list"> {{index}} --- {{value}} </p>
注意事項：
- v-for 循環的時候 key屬性只能使用 number或string
- key在使用的時候 必須使用v-bind指令進行屬性綁定，指定key的值
- 在組件中使用v-for循環的時候，可能會出現一些問題，因此需要指定key屬性
- v-for的時候可以in 函數，例如： v-for="(value, index) in function_name()" ，但是函數必須返回return list對象
8、v-if 和 v-show
v-if：每次重新刪除/創建dom操作
v-show：不會操作dom操作，只是切換display:none樣式
<!-- 通過vue中變量 flag來控制元素是否顯示 -->
<h1 v-if="flag">v-if控制元素</h1>
<h1 v-show="flag">v-show控制元素</h1>
9、v-if 和 v-else 邏輯控制操作
10、自定義Vue指令–directive
Vue支持用戶自定義指令，通過directive實現。指令按照作用域劃分爲：全局指令和私有指令。
directive內部支持的屬性：
| 屬性名 | 說明 | 備註 |
|---|---|---|
| bind | 每當指令綁定到元素上時會執行一次function 只執行一次 | 常用 |
| inserted | 當元素插入到DOM中的時候 會執行function，可觸發多次 | 常用 |
| update | 當dom 節點更新的時候 會執行，可觸發多次 | |
| unbind | 解綁 |
- 全局指令
<div id="app">
<input type="text" name="txt" id="txt" v-model="mypmsg" style="width: 100%;" v-focus>
</div>
<script>
Vue.directive('focus', {
bind:function(el) {//每當指令綁定到元素上時會執行一次function 只執行一次
//el表示當前綁定元素，el是原生的DOM對象
//樣式相關放到 bind中
},
inserted:function(el) {//當元素插入到DOM中的時候 會執行function，可觸發多次
//行爲相關的 放到 inserted中
el.focus();
},
update:function() {//當dom 節點更新的時候 會執行，可觸發多次
},
unbind:function() {
}
});
var vm=new Vue({
});
</script>
- 私有指定
私有指令實際是在Vue實例對象中directives中定義相關屬性
三、vue過濾器
Vue允許自定義過濾器，過濾器常用於文本格式之類，例如時間字符串格式化。按照作用域分爲全局過濾器和私有過濾器
全局過濾器
<!-- 過濾器 通過 管道符號| 進行處理 -->
<p> {{ dateTimeString | formatTime }} </p>
<script>
Vue.filter('formatTime', function(now) {
var dt = new Date(now)
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var day = dt.getDate();
return `${year}-${month}-${day}`;//模板字符串
})
</script>
私有過濾器
在vm實例中定義filters，並且增加函數
過濾器注意事項：
- 過濾器只能用於
插值表達式和v-bind中。 - 私有過濾器優先級高於全局過濾器，即私有過濾器與全局過濾器重名，則使用私有過濾器
四、Vue的生命週期
一個Vue實例從創建到銷燬整個過程會經過多個階段，我們可以通過相應的生命週期函數(鉤子函數)在實例化過程中做一些事情，例如：我們可以在created階段調用vue實例中methods下面某些方法。Vue提供的生命週期函數有：
- 創建時期
beforeCreate() {
//vue中data methods沒有被初始化
},
created() {
//vue中data、methods已經初始化
},
beforeMount() {//執行此函數時 模板已經編譯好了，但尚未掛載到html頁面中
},
mounted() {//mounted表示實例已經創建完畢
}
- 運行時期
//運行時期：生命週期函數
beforeUpdate() {//表示vue實例的data有更新執行，但還沒有渲染頁面
},
updated() {//渲染頁面完成之後
}
- 銷燬時期
//銷燬期間
beforeDestroy() {//vue實例 從運行階段進入銷燬階段
}
destroyed() {
}