17.Vue

简化JavaScript书写
https://cn.vuejs.org/

基于MVVM思想，实现数据绑定，将重点放在数据上

MVC只能通过控制器提取数据，
MVVM可以在视图直接访问数据

快速使用

1. 导入Vue核心文件

开发环境：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产环境：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

1. JS区域创建和新对象进行数据绑定

2. 编写视图

   步骤

3. 写出控制对象

4. 创建对象
5. 绑定对象

   <div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
   </div>
   <script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
   </script>