【自己的整理】Vue入門使用
為什麼要用vue
寫這篇部落格的時間，2018年4月20日。我們為什麼要用vue
前端框架層出不窮的今天，選擇一個較為主流同時能讓自己事半功倍的框架是必不可少的，同時vue作為三大主流框架之一發展迅速，如果還沒有選擇好用哪個框架，那不如稍微考慮一下，只要選定一個 好好做下去就好了，即便是選angular或者react都是一樣的，他們都是非常不錯的前端框架。
在這想吐槽一下，angular1 用過的人但是不想再用的人站點比例有點多啊，而vue沒用過但是想用的人佔比蠻多的。三大前端框架之王React已經佔據榜首好久了，希望vue這匹黑馬接下來能把angular拉下馬。。。。拉下馬什麼鬼-。-
最基本的使用
vue檔案的遠端引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
上面兩個都能使用，而且速度也不錯
例子1
基本的資料繫結，建立一個vue的模組並在這個模組的顯示元素中繫結資料，當記憶體中該模組資料發生變化的時候，檢視中會“即時” 更新變化
html:
<h4>app1資料繫結</h4 js:
var app = new Vue({
el:"#app",
data:{
message:"Fuck Q vue!"
}
}); 然後視窗就會出現：
鑑於知乎(啊呸劃掉)csdn部落格圖片放多了稽核太慢，下面的例子都不放圖了
例子2繫結元素特性
vue不單單可以繫結元素的內容，也能夠繫結元素的屬性
html:
<h4>app2屬性繫結</h4 js:
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載於 ' + new Date().toLocaleString()
}
})當滑鼠移動到這段文字的時候，會出現“頁面家在於多少多少時間”的資訊
v-bind 特性被稱為指令 bind是捆綁、纏繞（A.A）的意思。而v是vue的縮寫，就是這個屬性被vue能夠認的出來，並且和message捆綁纏繞在一起了。這樣的話 我就想到了既然可以繫結屬性，那麼就能通過改變屬性的方式製作動畫。改變顯示，或者其他複雜的東西
比如我們稍稍改一下 html的app2這個模組的部分
html:
<h4>app2屬性繫結</h4>
<div id="app-2">
<span v-bind:title="message" v-bind:style="style">
滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！
</span>
</div>js部分也增加一個:
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載於 ' + new Date().toLocaleString(),
style:"color:red;"
}
})這樣可以直接更改app2裡面的字的顏色了
例子3顯示隱藏 條件開關
html:
<h4>app3顯示隱藏（條件）</h4>
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>js:
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})這個例子好像，，沒啥變化 因為是控制是否出現的，如果在控制檯輸入：
app3.seen = false;那麼就看不見“現在你看到我了”。
例子4迴圈
用於通過同樣的視窗展現很多資料的時候。可以使用這個方式。減少前端程式碼同時更為簡潔
html:
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>js:
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '我愛兔子' },
{ text: '我愛吃兔子' },
{ text: '吃你的頭啊！' }
]
}
})真正顯示的頁面有3個li
例5繫結事件
html:
<h4>app5新增監聽事件</h4>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉訊息</button>
</div>js:
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})上述例子中，添加了了一個點選事件會觸發函式reverseMessage(一個翻轉字串的函式)點選按鈕之後，顯示的message訊息會翻轉
例6 資料雙向繫結
在預設情況下 vue的資料是單向的，是從控制層到顯示層，但是可以通過設定的方式讓資料雙向繫結，控制同時顯示
html:
<h4>app6表單應用與資料雙向繫結</h4>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>js:
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})上面的模組中。如果輸入欄裡的資料發生了變化，那麼記憶體中相應的資料以及表現層中的資料也會隨之改變
例子7建立元件
html:
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>js:
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '乳酪' },
{ id: 2, text: '隨便其它什麼人吃的東西' }
]
}
})元件要有可複用的性質，並且可以在不同的地方出現，有著同樣的展示效果。這裡的例子還只是一個較為初級的應用（其實是我自己還搞不太懂-。-）
如果您覺得這篇部落格好的話請點贊評論喔，評論自己也能得到分數哦！