vue展示一條基本數據
阿新 • • 發佈：2017-06-18
tle 基本用法 cti xxx rep set 事件 兼容ie meta
現在vue非常火爆所以今天來小小介紹一下
vue到底是什麽呢？
它是以mvvm的框架和angular類似，比較小巧容易上手。
vue官網：http://cn.vuejs.org/
vue手冊網址：http://cnvuejs.org/api/
如果你會angular那就很好學習vue了。因為說了他們基本類似
vue指令以 v-xxx vue由一片html代碼配合上json，new出來一個vue實例 vue是個人開發由個人來維護
vue由於小巧所以他比較適用於移動端，同樣他和angular一樣不兼容IE低版本
使用的話一樣你得先去vue官網下載他的庫文件。
vue基本用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box"> //上面說了我們需要一片html代碼來展示數據
{{msg}} //這樣我們就完成了一條數據的基本展示
</div>
<script src="vue.js"></script>
<script>
new Vue({ //new 一個實例來展示一條基本數據
el:"#box", //el意思是element這個是固定的後邊的是頁面中你要展示數據到那個元素，就類似於anguar的控制器。 只是angular是寫在html
頁面中這個是獲取到了元素然後再展示。它裏面是選擇器class id 標簽名都是可以的。
data:{ //data也是定死的
msg:"這是一條數據" //這其中就是數據當然他是個對象你可以寫多條數據,還有這裏面只可以放數據不可以是函數
}
})
</script>
</body>
</html>
常用指令：
angular有 ng-model 獲取表單元素數據 vue獲取表單元素數據為 v-model 和angular他也是可以進行雙向數據綁定的。
angular中有 ng-repeat 來循環數組json對象 vue就不太一樣了它是通過 v-for=‘ val in arr‘ 當然只是換了個名稱用法還是相同的。
vue 循環同樣自帶{{$index}}每個的下標 他還帶了一個{{$key}} 它可以顯示 json的key名
vue事件：
angular擁有事件 當然vue也有的這裏就有區別了 angular 是 ng-click vue是v-on:click=" fn()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box"> //上面說了我們需要一片html代碼來展示數據
<button v-on:click="fn()"></button> //v-on: 後面可以跟你任何想跟的事件。
{{msg}} //這樣我們就完成了一條數據的基本展示
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
msg:"這是一條數據" //這裏只可以是數據
}，
methods:{ //這裏寫方法
fn:function(){ //如果你要使用上邊的數據也不太一樣angular是 $scope.a
alert(1);
alert(this.msg); //這個this代表new的實例對象所以 this.msg 就調用到上邊的數據了
}
}
})
</script>
</body>
</html>
v-show：
angular 中有ng-show="true/false" vue 相同 v-show=“true/false” 同樣true顯示 false隱藏
//前邊說了需要一片html代碼來實現這就是我們那一片代碼
vue展示一條基本數據