首先来看一段代码

<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

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

引入 MVC

代码

引入 Vue

代码

Vue

教程

下面是几个用 vue 写的例子

浮层例子

<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>

轮播例子

// 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切换例子

// 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>