1、引入Vue.js
開始學習使用 Vue.js 之前先要將其引入我們的 Laravel 項目，這里我選擇最簡單的方式，直接下載對應的開放版本JS文件（http://vuejs.org/js/vue.js），然后將下載的vue.js文件放置到public目錄下的js目錄中（如果沒有js目錄則創建之）。
接下來就可以開啟Vue.js學習之旅了。
2、Hello World
和任何其他語言/框架學習一樣，讓我們從打印Hello World開始，與此同時我們將學習Vue的功能特性之一：數據綁定。
我們以Laravel提供的視圖文件welcome.blade.php作為演示文件，開始之前，先在</html>之前引入vue.js：
<script type="text/javascript" src="{{asset('js/vue.js')}}"></script>
然后我們編輯welcome.blade.php文件內容如下：
<div class="container">
<div class="content">
<div class="title">
<p>@{{ message }}</p>
</div>
</div>
</div>
同時編寫js部分代碼：
<script type="text/javascript">
new Vue({
el: '.title',
data: {
message: 'Hello Laravel!'
}
})
</script>
這樣整個代碼看上去應該是這樣：
在瀏覽器中訪問項目首頁，顯示如下：
3、雙向綁定
此外，Vue.js還支持雙向數據綁定，我們編輯HTML部分代碼如下：
<div class="container">
<div class="content">
<div class="title">
<p>@{{ message }}</p>
<input v-model="message">
</div>
</div>
</div>
這樣，保存文件后，刷新瀏覽器頁面，會在Hello Laravel!下面顯示出input輸入框，並且輸入框內容也是Hello Laravel!：
4、渲染列表
數組數據循環渲染列表可以這么做：
HTML代碼：
<div class="content">
<div class="title">
<ul>
<li v-for="todo in todos">
@{{ todo.text }}
</li>
</ul>
</div>
</div>
JS代碼：
<script type="text/javascript">
new Vue({
el: '.title',
data: {
todos: [
{ text: 'Learn Laravel' },
{ text: 'Learn Vue.js' },
{ text: 'At LaravelAcademy.org' }
]
}
})
</script>
刷新頁面數據顯示如下：
5、處理用戶點擊
我們來簡單看一個用戶點擊按鈕事件。
HTML代碼：
<div class="content">
<div class="title">
<p>@{{ message }}</p>
<button v-on:click="reverseMessage">反轉消息</button>
</div>
</div>
JS代碼：
<script type="text/javascript">
new Vue({
el: '.title',
data: {
message: 'Hello Laravel!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
注：
split()用於將字符串轉化為數組，reverse()用於顛倒數組中元素順序，join()用於將數組轉化為字符串。
刷新瀏覽器頁面，頁面顯示如下：
點擊“反轉消息”按鈕，頁面顯示如下：
6、綜合示例
好了，接下來我們通過一個例子來總結下本章節所有知識點。我們通過在輸入框輸入字符串，然后通過回車將輸入的字符串添加到展示列表。
HTML代碼：
<div class="content">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>@{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
JS代碼：
<script type="text/javascript">
new Vue({
el: '.content',
data: {
newTodo: '',
todos: [
{ text: '新增todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
</script>
刷新頁面，頁面顯示如下：
點擊“新增todos”右側的“X”刪除該條目，然后在輸入框輸入字符串回車，新增的字符串會顯示在列表中：
