vuejs 实战双向数据绑定

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>

还是很不错的，不愧是我，这样用也可以

v-bind:style="{'color':checkglb?'green':'red'}"

意思是，本盒子style属性中的color一项和变量checkglb息息相关，如果变量为true，那盒子的字体颜色就是绿的，如果是false，那就是红的

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中如果有‘健身’，那么健身在页面上也会被选中