1.Vue.js 入門教程html
1.1什麼是 Vue.js?vue
Vue.js 是用於構建交互式的 Web 界面的庫。npm
Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統,具備簡單、靈活的 API。app
1.2Vue.js 特色異步
若是你喜歡下面這些,那你必定會喜歡 Vue.js:組件化
1.3NPM 安裝ui
在用 Vue.js 構建大型應用時推薦使用 NPM 安裝:spa
# 最新穩定版本
$ npm install vue
# 最新穩定 CSP 兼容版本
$ npm install vue@csp
# 開發版本(直接從 GitHub 安裝)
$ npm install vuejs/vue#dev
1.4Bower 安裝code
# 最新穩定版本
$ bower install vue
1.5建立第一個 Vue 應用htm
接下來咱們建立第一個 Vue 應用。
View 層 - HTML 代碼以下:
<div id="app"> {{ message }} </div>
Model 層 - JavaScript 代碼以下(需放在指定的HTML元素以後):
new Vue({ el:'#app', data: { message:'Hello World!' } });
1.6雙向數據綁定
接下來咱們建立一個 view 層 HTML 文件:vueapp.htm,以及 model 層文件:vueapp.js,而後經過 vue.js(使用v-model這個指令)完成中間的底層邏輯,實現綁定的效果。改變其中的任何一層,另一層都會改變。
vueapp.htm 文件代碼:
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>
vueapp.js 文件代碼:
new Vue({ el: '#app', data: { message: 'hello!' } })
1.6列表輸出
列表輸出使用 v-for(v-for取代了1.0之前版本中的v-repeat) 這個指令就能完成:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awesome' } ] } }) </script> </body> </html>
1.7條件判斷
在字符串模板中,如 Handlebars,咱們得像這樣寫一個條件塊:
<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}
在 Vue.js,咱們使用 v-if 指令實現一樣的功能:
<h1 v-if="ok">Yes</h1>
也能夠用 v-else 添加一個 "else" 塊:
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
由於 v-if 是一個指令,須要將它添加到一個元素上。可是若是咱們想切換多個元素呢?此時咱們能夠把一個 <template> 元素當作包裝元素,並在上面使用 v-if,最終的渲染結果不會包含它。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
1.7v-show
v-show做用與v-if相似,不一樣的是v-show的元素會始終渲染並保持在 DOM 中,且v-show不支持<template>標籤。
<h1 v-show="ok">Hello!</h1>
1.8過濾器
與Linux中的管道相似,vue.js也使用的是|:
{{message | uppercase}}
這樣就能輸出message的大寫了,過濾器也能串聯在一塊兒使用:
{{message | reverse | uppercase}}
這裏reverse並非內建的過濾器,咱們能夠用Vue.filter自定義:
Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })