java程序员无javascript,基础入门vuejs中遇到问题和解决

来源：互联网发布：淘宝宝贝被同行举报编辑：程序博客网时间：2024/05/30 23:32
vue 就是一个模板语言,而且是可根据变量再次变动的模板.另外具有 将模板变量和输入变量绑定的功能. 极大的简化了开发.是传统 js 编程上的2.0js 编程.1.要学会看console的log2.学会在代码中加debugger, 和在f12中源代码中加断点<!DOCTYPE html><html><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入）  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> --><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><head>    <meta charset="utf-8">    <title>testCheck</title></head><body><form id="testCheck" class="form-horizontal" role="form" action="javascript:;">    <div class="form-group">        <label for="inputEmail3" class="col-sm-2 control-label">基准数据查询sql <br> 1.left 2. </label>        <div class="col-sm-10">            <textarea class="form-control" id="inputEmail3" name="dsl1" rows="10" v-model="dsl1Str">            </textarea>        </div>    </div>    <div class="form-group">        <label for="sourceId" class="col-sm-2 control-label">源数据id2</label>        <div class="col-sm-10">            <input class="form-control" id="sourceId" name="dataSourceId1" value="1">        </div>    </div>    <div id="datasource">        <select2 :options="options" v-model="selected">            <option disabled value="0">Select one</option>        </select2>    </div>    <div class="form-group">        <label for="startTime" class="col-sm-2 control-label">开始时间</label>        <div class="col-sm-10">            <input class="form-control" id="startTime" name="lastCheckTime" value="2015-06-08 10:49:32">        </div>    </div>    <div class="form-group" style="display:none;">        <div class="col-sm-offset-2 col-sm-10">            <div class="checkbox">                <label>                    <input type="checkbox"> Remember me                </label>            </div>        </div>    </div>    <div class="form-group" id="checkTest">        <div class="col-sm-offset-2 col-sm-10">            <button type="submit" v-on:click="callTestCheck" class="btn btn-default">test</button>        </div>    </div>    <div class="form-group" id="addCommand" v-if="checkSuccess">        <div class="col-sm-offset-2 col-sm-10">            <button type="submit" v-on:click="addCommand" class="btn btn-default">add</button>        </div>    </div>    <pre id="result" class="col-sm-offset-2 col-sm-10" v-text="result"></pre></form><script type="text/x-template" id="demo-template">    <div>        <p>源数据id: {{ selected }}</p>        <select2 :options="options" v-model="selected">            <option disabled value="0">Select one</option>        </select2>    </div></script><script type="text/x-template" id="select2-template">    <select>        <slot></slot>    </select></script><!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/><!--<script src="http://unpkg.com/select2@4.0.3"></script>--><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><script src="https://unpkg.com/vue/dist/vue.js"></script><!--<script src="js/check/settings.js"></script>--><script src="select2/js/select2.js"></script><script type="text/javascript"> Vue.component('select2', {   props: ['options', 'value'],   template: '#select2-template',   mounted: function() {    var vm = this    $(this.$el)      .val(this.value)      .select2({ data: this.options })      .on('change', function () {        vm.$emit('input', this.value)      })  },  watch: {    value: function (value) {      $(this.$el).val(value)    },    options: function (options) {      $(this.$el).select2({ data: options })    }  },  destroyed: function () {    $(this.$el).off().select2('destroy')  }})/*var vm = new Vue({  el: '#datasource',  template: '#demo-template',  data: {    selected: 0,    options: [      { id: 1, text: 'Hello' },      { id: 2, text: 'World' }    ]  }});*/   new Vue({     el:'#testCheck',     data: {        selected: 0,        options: [          { id: 1, text: 'Hello' },          { id: 2, text: 'World' }        ],          dsl1Str:'select *  from ( select t.id id ,t.status tstatus ,sum( case when p.status in (1,2) then 1 else 0 end) succ_count from trade t left join pay p on t.id=p.tid  where t.status in (3,4,5,7) and t.gmt_modify >= :startTime and t.gmt_modify < :endTime group by t.id,t.status  )  rt where rt.succ_count !=1 limit 10',          checkSuccess:false,          result:'Hello World loufei1!'        },     methods:{           callTestCheck: function(){              var self=this;              var params = $("#testCheck").serialize();              $.post(host+"/check/test/",params,function(d){                var jsonD= $.parseJSON(d)                if(jsonD.code==200){                   self.checkSuccess=true;                   self.result = jsonD.data;                }else{                   self.result = jsonD.msg;                }              });              return false;           },           addCommand:function(){            return false;           }        }});</script></body></html>
0 0