前端开发的记录（一）

html中 id=“a” 。当a为数字时，会报错：Failed to excute ‘querySelector’ on ‘Document’ : ‘#a’ is not a valid selector.
解决方法 -在数字面前，随意加个字母。

:id="addtext(a）"

addText: function(parm) {
     return 'b' + parm;
    },

在Vue中，可以使用Watch来监听一些值的变换，实现页面转化需要的一些初始化，控件是否显示。$nextTick作用是保证你的页面先生成，再去执行里面的操作，有效的防止类似这种：Failed to excute ‘querySelector’ on ‘Document’ : ‘#a’ is not a valid selector.（刚用不是是明白，大佬可以指出错误。后续也会更改）

<div v-cloak id="vue_panel">
     <div id="header_panel" >
        <label><input class="aui-radio" type="radio" checked value=0 name="change" v-model="info.page">第一页</label>
        <label><input class="aui-radio" type="radio" value=1 name="change" v-model="info.page">第二页</label>
        <label><input class="aui-radio" type="radio" value=2 name="change" v-model="info.page">第三页</label>
        <div  v-on:click="chage(info.page)" v-if="isshow">
        <span >查询</span>
       </div>
       
      </div>
      <div id="data_panel" >
          <div v-if="info.page  == 0">
             <div v-if = "isshow">
              第一页
             </div>
          </div>
          <div v-if="info.page == 1">
             <div v-if = "isshow">
             第二页
             </div>
           </div>
          <div v-if="info.page  == 2">
             第三页
          </div>
      </div>
</div>

var vueModel = new Vue({
   el: '#vue_panel',
   data: {
    info: {
         isshow：false，
          page：0
            },
           },
           methods:{
           change:function(data){
             if(data == 2)
             {data--;}
             else if(data ==0)
             {data++;}
             else {data++;}
           },
           },
            watch:{
            "info.page":function(val,olVal){
            this.$nextTick(function(){
            if(val == 0) {
            //第一个页面
            vueModel.info.isshow = false;
             }
            if(val == 1) {
            //第二个页面
            vueModel.info.isshow = true;
             }
              if(val == 2) {
             // 第三个页面
             vueModel.info.isshow = true;
              }
              })
               
            }
         }
});