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

个人渣记录仅为自己搜索用

已于 2023-04-23 15:02:53 修改

阅读量862

点赞数

分类专栏： javascript 文章标签： javascript vue.js java

于 2017-02-13 16:44:03 首次发布

本文链接：https://blog.csdn.net/fei33423/article/details/54944984

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

父文章人人都是前端专家

vue 就是一个模板语言,而且是可根据变量再次变动的模板.
另外具有 将模板变量和输入变量绑定的功能. 极大的简化了开发.
是传统 js 编程上的2.0js 编程.

1.要学会看console的log
2.学会在代码中加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>