H46-从 MVC 到 MVVM

Posted on | In

首先来看一段代码

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
  <div>
    书名：《__name__》
    数量：<span id=number>__number__</span>
    </div>
    <div>
      <button id="addOne">加1</button>
      <button id="minusOne">减1</button>
      <button id="reset">归零</button>
    </div>
</div>

从后台获取数据，这次我们使用一个新的库 axios

引入axios

一个基于 Promise 的 HTTP 客户端，用于浏览器和node.js

  1. 比 jQuery.ajax 功能更多
  2. 除了 ajax功能之外，没有其它功能
    代码

引入 MVC

代码

引入 Vue

代码

Vue

教程

下面是几个用 vue 写的例子

  • 浮层例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div id="app">
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script>
      let view = new Vue({
        el: '#app',
        data: {
          open: false,
        },
        template: `
          <div>
            <button v-on:click="toggle">点击</button>
            <div v-show="open">现在你看见我了</div>
          </div>
        `,
        methods:{
          toggle(){ // es6 语法，等同于 toggle: function(){
            this.open = !this.open // 注意这里必须有 this
          }
        }
      })
    </script>

  • 轮播例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    // css
    .window{
      width:100px;
      height: 60px;
      margin: auto;
      border: 1px solid black;
    }
    .slides{
      width: 300px;
      height: 60px;
      background-color: #906;
      transition: 1s;
    }
    // html
      <div id="app">
      </div>
      <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
      <script>
      let view = new Vue({
        el: '#app',
        data: {
          marginLeftNum: 0,
          url:['/a','/b','/c']
        },
        template: `
          <div>
            <div class='window'>
              <div class="slides"
                v-bind:style="{marginLeft: marginLeftNum+'px'}">
                <img v-for="src in url" />
              </div>
            </div>
            <button v-for="(btn, index) in url"
              v-on:click='go(index)'>{{index+1}}
            </button>
          </div>
          `,
        methods: {
          go(n){
            this.marginLeftNum = `${-n*100}`
          }
        }
      })
      </script>

  • tab切换例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    // css
    .active{
      color: red;
    }
    // html
    <div id="app">
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script>
      let view = new Vue({
        el: '#app',
        data: {
          select: 'a',
          tabs: [
            {name:'a',content:'This is A'},
            {name:'b',content:'This is B'},
            {name:'c',content:'This is C'},
          ]
        },
        template: `
          <div>
            <ol>
              <li v-for="tab in tabs"
                v-on:click="select = tab.name"
                v-bind:class="{active:select === tab.name}">
                {{tab.name}}
              </li>
            </ol>
            <ul>
              <li v-for="tab in tabs"
                v-if="select === tab.name">
                {{tab.content}}
              </li>
            </ul>
          </div>
        `
      })
    </script>

Questions

  • v-if 与 v-show的区别
    使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成。
    v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏

  • 单向绑定与双向绑定

API

JavaScript