前言
Vuejs相關教程，可參閱網站，先熟悉vue.js的基本語法。本文件講述，以CDN的方式（在頁面上，引入相關的js和css檔案），來實現。
本文件適用於vuejs初學者，之前給公司實習生學習準備的，很多相關知識暫不全，敬請諒解。
[color=#ff0000]1 頁面結構[/color]
Vue.js 使用了基於 HTML 的模版語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。簡單來說,最基本結構如下就是:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{mes}}
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
mes:`hello`
}
})
</script>
</html>這裡邊body的最外層的div，需要在下邊進行例項化。當然最外層用的是id=`app`，例項化的時候，el:`#app`。跟css類似，如果最外層用class來標識的時候，裡邊#換成“點”。但是為了避免重複，統一用“id”來標識。
[color=#ff0000]2 基本模組[/color]
上半邊省略，直接上js程式碼
<script>
new Vue({
el:`#app`,
data:{
初始化頁面上繫結的模型，資料
},
filters:{
過濾器，簡單資料處理。
},
mounted:function(){
頁面載入時呼叫的方法，
},
methods:{
事件方法
},
watch：{
資料監聽。
}
})
</script>data: 頁面初始化時，定義的元素模組，也是資料的容器，每一個欄位都會用到，類似於之前的普通寫法裡邊的name，id等，但是比那個強大。
filters:這一塊是過濾器，一般是處理資料用的。
mounted：頁面載入是呼叫的方法，這便涉及到Vuejs的生命週期，大家可以去了解。根據不同情況呼叫，我自己遇到過關於圖表方面，家在先後順序的問題。
watch: 用於頁面模組的資料監聽。資料發生改變的時候，頁面展示進行切換。
methods:事件方法都寫在這個裡邊。例如點選事件。
正常情況下，頁面結構就是上邊的屬性，當然順序調換也未嘗不可，看個人習慣。除了data外，其他模組用不到的，可以去掉。
[color=#ff0000]3.vue.js常用的指令[/color]
[color=#ff0000]文字指令[/color]
常用的資料繫結，雙大括號的形式。{{ ··· }}
v-text 純文字的方式展示出來
v-html 會解析你資料裡邊帶的標籤，以及樣式，事件等等
v-model 功能最全，你把v-model放到input裡邊的時候，你會發現，你的input這個欄位，跟其他幾個，message變成了雙向繫結，你改變input裡邊的值，其他的值會跟著一起變動
<body>
<div id="app">
{{message}}
<div v-text="message"></div>
<div v-html="message"></div>
<input v-model="message" />
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
message:"<h1>Hello World</h1>"
}
})
</script>執行上邊的結果你會發現，{{···}}和“v-text”這種方式，會把message所有的東西輸出,v-html會解析message裡邊的html標籤，而v-model會繫結，message裡邊的資料，當你改變input裡邊的資料，頁面上其他的資料也會相應改動。
[color=#ff0000]v-bind指令[/color]
html中的屬性值，通常會用到這個指令，例如以下的class。v-bind:class=[class1,{‘class2’:A},{‘class3’:B}] 其中，class1為一直生效，class2和class3必須根據A，B對應的布林值來展示，true的時候生效，反之不生效。 指令簡寫可以直接是”：class”，省去前邊的v-bind.
<style>
.class1{color:red;}
.class2{font-size:16px;}
</style>
<body>
<div id="app">
<div :class="[class1,{‘class2’:A}]">
{{message}}
</div>
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
message:"<h1>Hello World</h1>",
class1:`class1`,
A: true
}
})
</script>(這種情況，可用於，按鈕點選，更換狀態，樣式等)
[color=#ff0000]v-if(v-else-if,v-else)指令[/color]
主要是在頁面上給出相應的條件，例如
<style>
p{font-size:30px;}
</style>
<body>
<div id="app">
<input v-model="message">
<p v-if="message<12" style="color:red;"></p>
<p v-else-if="message>20" style="color:green;"></p>
<p v-else style="color:yellow;"></p>
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
message:"<h1>Hello World</h1>",
A: true
}
})
</script>跟普通的if..else..語句的寫法基本類似，也可以進行巢狀。
v-for指令,資料迴圈，基本寫法
<body>
<div id="app">
<div v-for="item in message">
{{item.name}}
</div>
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
message:[
{name:"張三"},
{name:"李四"}
]
}
})
</script>也可以加巢狀，二維陣列使用，限定結構一致
<body>
<div id="app">
<div v-for="item in message">
{{item.name}}
{{item.age}}
<div v-for="it in item.study">
{{it.yuwen}}
{{it.shuxue}}
</div>
</div>
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
message:[
{
name:"張三",
age:"24",
study:[
{
yuwen:"95",
shuxue:"80"
}
]
},
]
}
})
</script>vuejs,2.0中，v-for迴圈也可以加鍵名和索引，例如：
<body>
<div id="app">
<div v-for="(item,key,index) in message">
{{index}}{{key}}{{item.name}}
</div>
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
message:[
{name:"張三"},
{name:"李四"}
]
}
})
</script>value為對應欄位行。key為鍵名，index為索引。這三個只是順序，不帶表真實引數，你寫ABC下邊雙括號也寫ABC也可以
。
迴圈的時候，我們可以寫在v-model,或者有圖片的時候，我們可以寫在:src上
例如：<input v-model=”item.name”>
<img :src=”item.name”>
標籤中不允許帶雙括號。例如，以下這種寫法
<img :src=”{{item.name}}”>
[color=#ff0000]4.vue.js常用事件[/color]
[color=#ff0000]點選事件[/color]
常用事件宣告為v-on:click=”hello()”，無引數，可以不帶括號，有引數寫括號中。簡寫方式@click=”hello()”，事件寫在methods：{ ~~~ }裡邊。格式如下
<body>
<div id="app">
<input type="button" @click="demo()">
<input type="button" @change="hello(`aaa`)">
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
},
methods:{
demo:function(){
},
hello:function(a){
}
}
})
</script>事件是可以繼承的，簡單來說，比如一個事件，我們需要在頁面上呼叫多次，我們可以直接進行事件繼承。
<body>
<div id="app">
<input type="button" @click="demo()">
</div>
</body>
<script>
new Vue({
el:`#app`,
data:{
},
mounted:function(){
this.hello();
頁面載入時呼叫hello方法，
},
methods:{
demo:function(){
this.hello();
點選時呼叫到了hello方法
},
hello:function(a){ }
}
})</script>
[color=#ff0000]監聽事件[/color]
監聽事件，當欄位值發生改變的時候，使用。，原來的js採用的是change事件，vuejs也可以用@change=””的方式來寫，這樣的話寫在，跟點選事件一樣，寫在methods：{ ~~~ }裡邊。
但是部分框架，@change這種方式不相容，所以我們一般直接用v-model進行繫結，寫在watch:{ }裡邊，例如：
<body>
<div id="app">
<input type="text" v-model="message">
</div></body>
<script>
new Vue({
el:`#app`,
data:{
message:`20`
},
watch:{
message:function(val,oldval){
自帶兩個引數,其中val為當前值，oldval為改變後的值
}
},
methods:{
}
})</script>
[color=#ff0000]過濾器[/color]
過濾器寫在filters:{}裡邊，一般對資料進行處理的時候會用得到。直接在文字後邊加上“|”，然後跟這寫，事件名。例如
<body>
<div id="app">
{{message | demo}}
</div></body>
<script>
new Vue({
el:`#app`,
data:{
message:`20`
},
filters:{
demo:function(val){
return "$"+val+".00";
}
}
})</script>