Vue.js實戰學習-Vue.js理解及資料繫結
1.Vue.js是什麼？
Vue.js是一個漸進式的javaScript框架，在專案中，可以選擇從不同的維度去使用它。
2.使用的模式：
MVVM模式：Model-View-ViewModel,當View(檢視層)變化時，會自動更新到ViewModel(檢視模型)，反之亦然。View和ViewModel之間通過雙向繫結(data-binding)建立聯絡。
3.el是什麼？
el用於指定一個頁面中已存在的DOM元素來掛載Vue例項，它可以是HTMLElement，也可以是CSS選擇器。
4.Vue的生命週期：
created 例項建立完成後呼叫，此階段完成了資料的觀測等，但尚未掛載，$el還不可用。需要初始化處理一些資料時會比較有用。
mounted el掛載到例項上後呼叫，一般我們的第一個業務邏輯會在這裡開始。
beforeDestroy 例項銷燬之前呼叫。主要解綁一些使用addEventListener監聽的事件等。
這些鉤子與el和data類似，也是作為選項寫入Vue例項內，並且鉤子的this指向的是呼叫它的Vue例項：
var app = new Vue({ el:'#app', data: { name: '' }, created:function (){ console.log(this.name); //name 的值 }, mounted:function () { console.log(this.$el); // <div id="app"></div> }
5. 插值與表示式
使用雙大括號(Mustache語法) “{{ }}” 是最基本的文字插值方法，它會自動將我們雙向繫結的資料實時顯示出來，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值與表示式示例</title>
</head>
<body>
<div id="app">
{{ date }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
date:new Date()
},
mounted:function () {
var _this = this;//宣告一個變數指向Vue例項this，保證作用域一致
this.timer = setInterval(function () {
_this.date = new Date(); //修改資料date
}, 1000);
},
beforeDestory:function () {
if (this.timer) {
clearInterval(this.timer); //在Vue例項銷燬前，清除我們的定時器
}
}
})
</script>
</body>
</html>
在{{ }}中，除了簡單的繫結屬性值外，還可以使用JavaScript表示式進行簡單的運算、三元運算等，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{}}的其他使用</title>
</head>
<body>
<div id="app">
{{ number / 10 }}
{{ isOK ? '確定' : '取消' }}
{{ text.split(',').reverse().join(',') }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 100,
isOK: false,
text: '123,456'
}
})
</script>
</body>
</html>顯示結果依次為: 10、取消、456，123。
Vue.js只支援單個表示式，不支援語句和流控制。
6. 過濾器
Vue.js支援在{{ }}插值的尾部新增一個管道符“(|)”對資料進行過濾，經常用於格式化文字，比如字母全部大寫、貨幣千位使用逗號分隔等。
過濾器也可以串聯，而且可以接收引數，如：
<!-- 串聯 -->
{{ message | filterA | filterB }}
<!-- 接收引數 -->
{{ message | filterA('arg1', 'arg2') }}
7.語法糖
Vue.js的v-bind和v-on指令提供了語法糖，也就是它們的縮寫，如：
v-bind可以直接寫一個冒號":"
<a v-bind:href="url">連結</a>
<img v-bind:src="imgUrl">
<!-- 縮寫為 -->
<a :href="url">連結</a>
<img :src="imgUrl">
v-on可以直接用"@"來縮寫：
<button v-on:click="handleClose">點選隱藏</button>
<!-- 縮寫為 -->
<button @click="handleClose">點選隱藏</button>