Vue.js簡單的使用
說明
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。
Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。 當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery。
MVVM模式
ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是作用於某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。
當創建了ViewModel后，雙向綁定是如何達成的呢？
首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現雙向綁定的關鍵。
從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的數據；
從Model側看，當我們更新Model中的數據時，Data Bindings工具會幫我們更新頁面中的DOM元素。
Hello World示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--這是我們的View-->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 這是我們的Model
var exampleData = {
message: 'Hello World!'
}
// 創建一個 Vue 實例或 "ViewModel"
// 它連接 View 與 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
1. 在html中使用 {{ message }}，這樣的話，在后面script中修改message的時候，就可以實時跟新這個變量了
2. 在 script 中new一個Vue對象，該對象有且應該只有一個，該對象中需要一個 el，里面寫上最外層的ID， 下面的操作應該都在這個ID的標簽之內
data中的變量在 上面 el 中ID內使用，
雙向綁定示例：v-model指令
MVVM模式本身是實現了雙向綁定的，在Vue.js中可以使用v-model指令在表單元素上創建雙向數據綁定。
<!--這是我們的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
將message綁定到文本框，當更改文本框的值時，<p>{{ message }}</p> 中的內容也會被更新。
反過來，如果改變message值，文本框的值也會被更新，我們可以在Chrome控制台進行嘗試。
Vue.js的常用指令
上面用到的v-model是Vue.js常用的一個指令，那么指令是什么呢？
Vue.js提供了一些常用的內置指令，接下來我們將介紹以下幾個內置指令：
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
Vue.js具有良好的擴展性，我們也可以開發一些自定義的指令，后面的文章會介紹自定義指令。
v-if指令
v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素，它可以和 v-else 連用，如果判斷的條件是正確的，顯示if后面的內容，如果false，執行else后面的diamagnetic。它的基本語法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="yes">
你好嗎
</p>
<p v-else>
我很好
</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
yes: true,
}
});
</script>
</html>
v-else元素是否渲染在HTML中，取決於前面使用的是v-if還是v-show指令。
這段代碼中v-if為true，后面的v-else不會渲染到HTML；v-show為tue，但是后面的v-else仍然渲染到HTML了。
v-show指令
v-show也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地為元素設置CSS的style屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
v-for指令
v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法相似：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in temp">
{{ index }} : {{ item.name }}/{{ item.sex }}/{{ item.age }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
temp: [
{"name": "always", "age":18, "sex": "female"},
{"name": "bubble", "age":20, "sex": "female"}
]
}
})
</script>
</html>
v-bind指令
動態的生成屬性可以所縮寫成 ：href='' '
v-on指令
綁定事件，可以縮寫成@click=“ ”
所有的事件函數，都應該統一卸載 methods 中
axios指令
類似於ajax，
--> get請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="myapp">
<input type="button" value="click me" @click="showlist">
<ul>
<li v-for="item in stulist">
代碼：{{item.cityCode}}
城市：{{item.cityName}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#myapp",
data: {
stulist: []
},
methods: {
showlist: function () {
url = "./hotcity.json";
var self = this;
axios.get(url,{
params:{
username: "劉德華"
}
})
.then(fun2)
.catch(function(err){
})
}
}
})
function fun2(response)
{
//alter(this);
vm.stulist = response.data.data.hotCity;
console.log(response)
}
</script>
</body>
</html>
params： 數據，也可以寫在路徑后面
.then： 成功執行的代碼
.catch: 失敗后執行的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="myapp">
用戶名：<input type="text" v-model="username">
密碼： <input type="password" v-model="pass">
<input type="button" value="登錄" v-on:click="login" />
</div>
<script>
new Vue({
el: "#myapp",
data:{
username: '',
pass: ''
},
methods:{
login: function () {
url = "hotcity.json";
axios.post(url,{
name: this.username,
password: this.pass
},{
"headers":{"Content-Type": "application/x-www-form-urlencoded"}
}).then(function(response){
console.log(response)
if(response.code == 1){
window.location.href = "http://www.baidu.com"
}
//console.log()
}).catch(function(error){
})
}
}
})
// {code:"1",msg:"success"}
// {code:"0",msg:"fail"}
</script>
</body>
</html>
注意在headers中寫上"Content-Type": "application/x-www-form-urlencoded"