對vue的初步學習
vue:
vue:一個mvvm框架(庫),和angular類似
比較容易上手
指令以v=xxx
一片html程式碼配合接送,在new一個vue例項
適合:移動端,小巧
vue基本雛形
v-model 一般表單元素(input) 雙向資料繫結
迴圈 v-for="name in arr"
{{$index}} 陣列編號
v-for="name in arr"
{{$index}} 陣列編號 {{$key}}
v-for="(k,v) in json"
事件:
v-on:click="函式"
v-on:click/mouseout/mouseover/dblclick/mousedown.....
顯示隱藏:v-show="true/false"
簡寫:@click=""
事件物件:
@click="show($event)"
事件冒泡:
阻止冒泡: ev.cancelBubble=true;
預設事件:
阻止預設事件:
ev.preventDefault();
@contextmenu.prevent 推薦
鍵盤類事件:
@keydown $event.keyCode
@keyup
常用鍵簡寫:@keyup.13 = "show()" 回車
上下左右
案例,簡易留言板(todolist)
屬性:
v-bind:src=url"" 簡寫: :src=url"":
class和style:
:class=""
:style=""
:class="[red]" red是資料
:class="[red,b,c,d]"
:class="{red:a,blue:false}"
:class="json"
data:{
json:{red:a,blue:false}
}
注意:複合樣式,採用駝峰命名法
模板:
{{msg}} 資料更新模板更新 {{*msg}}資料值繫結一次
{{{msg}}} 轉義標籤
過濾器: 過濾模板的資料
{{msg|filterA}} uppercase(大寫) lowercase(小寫) capitalize (首字母大寫)
currency (錢) {{12|currency $}}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 <script> 8 window.onload=function(){ 9 var c = new Vue({ 10 el:"#box", 11 data: { 12 a:true 13 14 }, 15 methods:{ 16 } 17 }); 18 19 } 20 </script> 21 </head> 22 <body> 23 <div id="box"> 24 <input type="button" value="按鈕" v-on:click="a=false"> 25 <br> 26 <div style="background: red ;width: 100px;height: 100px" v-show="a"></div> 27 28 </div> 29 30 </body> 31 </html>
互動:
如果vue想做互動 必須引入包
get:
獲取;this.$http.get(a.txt).then(function(res){
alert(res.date);
),function(res){
alert(res.status);
});
給伺服器傳送資料:
post:
jsonp: