发表于: 2020-07-29 22:55:12

0 2671


今天完成的事情:今天写了一些vue的模板语法以及处理了一些bug
明天计划的事情:继续后续的学习
遇到的问题:实际操作较少还是需要多实操练习
收获:今天再写模板表格语法的时候页面结构出现了一点小问题

代码

<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<style>
  .base {
    width100px;
    height100px;
  }

  .active {
    backgroundgreen;
  }

  .text-danger {
    backgroundred;
  }
</style>
</head>


<body>

  <div id="app">
    <table>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
    </table>
  </div>
  <script>
    Vue.component('item', {
      template: '<tr><td> {{content}}</td></tr>',
      data: function () {
        return {
          content: "表格"
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

  <script src="./test.js"></script>
</body>

</html>

页面效果

虽然看上去很正常但是结构

tr跑table外面去了,百度之后了解到h5的一个小bug,需要使用is来解决

<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<style>
  .base {
    width100px;
    height100px;
  }

  .active {
    backgroundgreen;
  }

  .text-danger {
    backgroundred;
  }
</style>
</head>


<body>
  
  <div id="app">
    <table>
     <tr is="item"></tr>
     <tr is="item"></tr>
     <tr is="item"></tr>
     <tr is="item"></tr>
    </table>
  </div>
  <script>
    Vue.component('item', {
      template: '<tr><td> {{content}}</td></tr>',
      data: function () {
        return {
          content: "表格"
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

  <script src="./test.js"></script>
</body>

</html>

页面结构

结构正常

table,ul,ol,select这几种的时候,当用tr,li,li,option作为子组件时,需要用is来绑定

另外需注意deta需要时函数,大概跟作用域有关

另外今天写了简单的双向绑定

<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<style>
  .base {
    width100px;
    height100px;
  }

  .active {
    backgroundgreen;
  }

  .text-danger {
    backgroundred;
  }
</style>
</head>


<body>

  <div class="fd-app">
    <h4>{{msg}}</h4>
    <!-- 使用v-model指令,可用实现表单元素和Model中数据的双向数据绑定 -->
    <!-- 注意:v-model只能运用在表单元素中 -->
    <!-- input(radio,text,address,email。。。) select checkbox textarea -->
    <input type="text" v-model="msg" style="width: 100%">


    <select v-model="selected">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>

  <script>
    var vm = new Vue({
      el: ".fd-app",
      data: {
        msg: '你好吗',
        selected: 'A',
        options: [
          { text: 'One'value: 'A' },
          { text: 'Two'value: 'B' },
          { text: 'Three'value: 'C' }
        ]
      },
      methods: {
      }
    })
  </script>

  <script src="./test.js"></script>
</body>

</html>

运行效果

改变数值

可以看到绑定上了

剩下的明天继续


返回列表 返回列表
评论

    分享到