Vue.js快速入門
阿新 • • 發佈：2018-04-23
Vue.js Vue.js快速入門 Vue.js簡介
了解Vue.js
Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件，它不僅易於上手，還便於與第三方庫或既有項目整合.Vue.js安裝
- 下載Vue.js:https://github.com/vuejs/vue
（我們現在使用的版本是2.5.16）
快速入門
聲明式渲染
我們現在做個最簡單的小例子，演示如何使用Vue.js實現聲明式渲染。
創建Vue_1.html，將Vue.js資料包下的dist目錄的vue.min.js拷貝到工程中，並在html頁面中引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js的聲明式渲染</title> <script type="text/javascript" src="js/vue.min.js"></script> </head> <body> <div id="myVue"> {{message}} </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:"#myVue", data:{ message:"Hello World" } }); </script> </html>
分析：
{{message}} : 表示view。
new Vue()：表示創建Vue對象，用於連接view和model。
el:表示指向view。
data：表示指向model。
通過Vue對象連接view和model，{{message}}就可以獲取到Vue對象中data定義的message的內容。運行結果如下：
綁定元素特性
Vue.js除了聲明式渲染之外，還可以進行綁定元素的特性：
創建Vue_2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js綁定元素特性</title> <script type="text/javascript" src="js/vue.min.js"></script> </head> <body> <div id="myVue"> <span v-bind:title="message"> 傳智播客 </span> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:"#myVue", data:{ message:"http://www.itcast.cn" } }); </script> </html>
分析：
v-bind:稱為指令,將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致運行結果如下：
雙向綁定示例
我們剛才的例子非常簡單，咱們再來看一下Vue.js雙向數據綁定的使用：
創建Vue_3.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js雙向數據綁定</title> <script type="text/javascript" src="js/vue.min.js"></script> </head> <body> <div id="myVue"> <p>Message is:{{message}}</p> <input type="text" v-model="message" /> </div> <script type="text/javascript"> var myVue = new Vue({ el:"#myVue", data:{ message:"" } }); </script> </body> </html>
分析：
v-model:指令，監聽用戶的輸入事件以更新數據。
運行結果如下：
按鈕事件綁定
Vue.js可以用 v-on 指令監聽標簽的事件，並在觸發時運行JavaScript 代碼。
創建Vue_4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js按鈕事件綁定</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="myVue">
<input v-on:click="show" type="button" value="點擊">
</div>
<script type="text/javascript">
var myVue = new Vue({
el:"#myVue",
data:{
message:"歡迎來到傳智播客！"
},
methods:{
show:function(event){
alert(this.message);
}
}
});
</script>
</body>
</html>分析：
v-on:指令。
v-on:click:設置監聽input的點擊事件的事件。
methods:定義v-on:click的方法。
event：表示標簽的原生事件
this.message:表示指向Vue對象中定義的message。運行結果如下：
遍歷集合數據
我們可以使用Vue.js的v-for指令對數組或者集合的數據進行遍歷展示。
創建Vue_5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js遍歷集合</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<table id="myVue" width="30%" border="1">
<tr>
<th>序列</th>
<th>商品編號</th>
<th>商品名稱</th>
<th>價格</th>
</tr>
<tr v-for="(product,index) in products">
<td>{{index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#myVue",
data:{
products:[
{
id:1001,
name:"數碼相機",
price:3000
},
{
id:1002,
name:"蘋果手機",
price:7000
}
]
}
});
</script>
</html>分析：
v-for="(product,index) in products" ： v-for為Vue指令，用於遍歷集合，其基本語法為“item in items”。products為要遍歷的集合。(product,index)中的product用於存放遍歷集合的元素，index用於存放集合元素的角標，從0開始。
在Vue對象的data屬性中，通過products[{}]的形式設置集合的數據。運行結果如下：
路由操作
vue-router下載
Vue.js想要實現路由效果，需要和vue-router進行組合實現，在Vue.js中並沒有關於vue-router的js文件，所以vue-router需要單獨去下載，另外需要註意的是Vue.js+vue-router實現的路由操作是但頁面的路由操作。
下載vue-router:https://github.com/vuejs/vue-router
路由實現
創建Vue_6.html,引入vue.min.js和vue-router.min.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Vue.js路由操作</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/vue-router.min.js"></script>
</head>
<body>
<div id="myVue">
<div>
<h1>HEAD</h1>
<router-link to="/JAVAEE">JAVAEE</router-link>
<router-link to="/IOS">IOS</router-link>
<router-link to="/Android">Android</router-link>
</div>
<router-view></router-view>
<div>
<h1>FOOT</h1>
</div>
</div>
</body>
<script type="text/javascript">
var java = ‘<div style="width:100%;height:100%;overflow:hidden;">‘
+ ‘<iframe src="JAVAEE.html" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>‘;
var ios = ‘<div style="width:100%;height:100%;overflow:hidden;">‘
+ ‘<iframe src="IOS.html" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>‘;
var android = ‘<div style="width:100%;height:100%;overflow:hidden;">‘
+ ‘<iframe src="Android.html" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>‘;
var JAVAEE = { template: java }
var IOS = { template: ios }
var Android = { template: android }
var routes = [
{ path: ‘/‘, component: JAVAEE },
{ path: ‘/JAVAEE‘, component: JAVAEE },
{ path: ‘/IOS‘, component: IOS },
{ path: ‘/Android‘, component: Android }
]
var router = new VueRouter({
routes : routes
})
var app = new Vue({
router : router
}).$mount(‘#myVue‘)
</script>
</html>分析：
router-link：默認會被渲染成一個a標簽，用來設置導航操作，其中的to屬性用來指定鏈接路徑。
router-view：用來顯示路由頁面。
const JAVAEE = {template:java}：定義跳轉的頁面組件，因為Vue.js+vue-router是單頁面的路由操作，所以如果想要實現頁面跳轉，需要借助iframe等標簽顯示頁面。
{path:‘/‘, component:JAVAEE}：設置相應的路由跳轉到相應的頁面。
var router = new VueRouter({routes:routes}):是創建路由對象。
var app = new Vue({router:router}).$mount(‘#myVue‘) ： 將路由的對象設置到Vue對象上，並通過$mount手動的掛載到相應的組件中。運行結果如下：
Vue.js快速入門