1，使用vuejs實現資料繫結超級快的，超級好用

後臺的資料是這樣的： myinfo {"list":[{'name':'daqing','age':18,'sex':0},{'name':'xiaofang','age',28,'sex':0},{'name':'xiaoli','age':30,'sex':1}]}

繫結到html上要這樣寫:

vuelist=new Vue({
        el:'#cmcfgid',
//繫結到一個id叫cmcfgid的html元素上
        data:{
            listinfo:myinfo[list],         
        },
 
//data裡放的是想要綁上去的資料
        methods:{}
//methods中可以定義一些事件：v-on:click 等
    })

而html頁面上可以是這樣的：

<h2>前端配置</h2>
        <div   id="cmcfgid">
        //vuejs繫結的是這個盒子哦

        <div v-for="(item,index) in listinfo">  //vuejs使用for迴圈生成html，而且for迴圈的時候可以自動計數
        <p>性別:<select v-model="item.sex"><option value=1 >男</option><option value=0 >女</option></select></p>
        <p>姓名<input type="text" v-mode="item.name"</p>
        <p>年齡<input type="text" v-mode="item.age"</p>
        <p>序號：{{index}}</p>

        </div>
        </div>

v-model挺好用，可以用在input、select、textarea、checkbox、radio 等表單控制元件元素上建立雙向資料繫結

2,樣式繫結和基礎判斷語法

                <p>性別:<select v-model="item.sex" ><option value="1" >男</option><option value="0" >女</option></select>
//此處如果選擇了男，那麼該item的sex會變成’1‘，然後下面又繫結的樣式就會發生作用，把sex轉成int以後，如果是true，第一個div就不會顯示
 

                    <div v-bind:style="{'display':parseInt(item.sex)?'none':'block'}" style="padding:0px 10px;">
                        <p>我猜你喜歡玩遊戲</p>
                    </div>
                    <div  v-bind:style="{'display':parseInt(item.isUseHKSDK)?'block':'none'}" style="padding:0px 10px;">
                        <p>我猜你喜歡裙子！</p>
                    </div>
                </p>

還是很不錯的，不愧是我，這樣用也可以

3，最後就是事件和綁定了

原生html5一般用onclick，像這樣：

<input id="btn1" type="button" onclick="test(event);" />
function test(event) {
    var obj=event.srcElement.
    //獲取觸發本次事件的元素，
    var jqobj=$(obj);
    //原生js轉成jquery就真麼寫
    alert("我是行間事件");
}

jquery一般用

$("#ID").on(‘click’,function(){}) //on方式
$("#ID").click(function(){}) //on方式

vuejs一般是這樣的：

html
<div id="glbcfgid">
<input class="lnum" type="text" maxlength="15" placeholder="請輸入標準ip地址" v-model="glbcfg.ip" v-on:change="checkitem()">
</div>
js
    vuele=new Vue({
        el:'#glbcfgid',
        data:{
            glbcfg:hehe,
            checkglb:aaa,         
        },
        methods:{
            checkitem:function(){    //用於測試ip是否符合規則
                console.log("check ip");
            }
        }
    });
//

4，最近遇到了一個坑，vuejs沒有主動重新整理頁面

是這樣的，我有個陣列camshow，全域性變數，被我繫結到vuejs中去了，

    winvue=new Vue({
        el:'#winarea',
        data:{
            camshow:camshow, 
        },
        methods:{
        }
    });

#camshow類似這樣：
[[1,"c1",'東一區上','192.168.3.111'],[2,"c2",'東一區上','192.168.3.112']]

頁面上是這樣的：

 <div class="mainarea" id="winarea">
                    <div class="boxone" v-for="item in camshow">
                        <div class="chtitle"><p>{{item[1]}}</p></div>
                        <img class="camone" partid="3" v-bind:id="'img'+item[0]" onclick="checkimg(event)" src="__STATIC__/index/images/starting.jpg"> 
                    </div>
</div>

理想的情況是，我通過修改camshow修改html控制元件，然而，，，並沒有！！！甚至繫結以後我都沒法把camshow清空。。。最終找到了一個解決辦法是這樣的：

主要看兩句話：

winvue.$set(winvue.camshow,i,uplist);
//設定並且應用到頁面上去，把winvue.camshow陣列中的第i項替換為uplist

menuvue.camshow.splice(k, length);
//刪除winvue.camshow陣列中的資料，從第k個開始，一共刪除length個

5,vuejs有關checkbox的語法糖

<div>請選擇你的愛好(vue)</div>
    <input type="checkbox" v-model="hobby2" value="游泳">游泳
    <input type="checkbox" v-model="hobby2" value="健身">健身
    <input type="checkbox" v-model="hobby2" value="旅遊">旅遊
    <div>你已選中：{{hobby2}}</div>
var vm = new Vue({
      el: '#app',
      data:{
        msg:'hello',
        hobby2:[]
      },
      created(){
        console.log('created')
      },
      method:{
        login:function(){
          alert(1)
        }
      }
    })

選中游泳，游泳就會跑到陣列hobby2中去，陣列hobby2中如果有‘健身’，那麼健身在頁面上也會被選中