H46-从 MVC 到 MVVM

首先来看一段代码

  

    书名：《__name__》
    数量：__number__
    
    

      加1
      减1
      归零
    

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

引入axios

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

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

引入 MVC

代码

引入 Vue

代码

Vue

教程

下面是几个用 vue 写的例子

• 浮层例子

• 轮播例子

  // css
  .window{
    width:100px;
    height: 60px;
    margin: auto;
    border: 1px solid black;
  }
  .slides{
    width: 300px;
    height: 60px;
    background-color: #906;
    transition: 1s;
  }
  // html
    
  
    
    
    
  

• tab切换例子

  // css
  .active{
    color: red;
  }
  // html
  
  
  
  
  

Questions

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

• 单向绑定与双向绑定

  
  
  

API

JavaScript

• Object.assign()
  jQuery
• .html()