Vue.js入门（一）插值操作&&绑定属性

Vue.js（一）

准备知识

什么是vue？

​ | vue.js是前段主流框架之一（还有Angular.js React.js）

​ |一套构造用户界面的框架，只关注视图层，主要和界面打交道，便于与第三方库或既有的项目整合（vue有配套的第三方库）

框架和库的区别

​ | 框架：完整的解决方案， 只需要使用框架提供的类或函数，即可实现全部功能 ，对项目的入侵性很大，中途不能轻易更换框架否则需要重新架构整个项目

​ | 库：提供某一个小功能， 库为我们提供了很多封装好的函数，我们就取所需的某部分，其他没有用上的我们自己来实现 ，对项目的入侵性小，如果某个库无法完成某些需求，可以切换到其他库

MVVM

​ | MVVM前端的分层开发思想，把每个页面分成了M,V,VM；VM是MVVM核心（VM是M和V之间的调度者）

​ |M： 数据模型 。保存每个页面单独的数据

​ |VM： 修改数据 & 自动渲染 。对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型 （ 包括视图的状态和行为），而 Model 层的数据模型是只包含状态的。比如页面的这一块展示什么，那一块展示什么 => 视图状态(展示)，而页面加载进来时发生什么，点击这一块发生什么 =>视图行为（交互）。

​ |V： 带特殊属性的 html 模板 ，里面可以嵌入一些js模板的代码，比如Mustache

vue和MVVM的例子

<!--Vue 的 View 模板-->
<div id="app">
    <p>{
  {message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

//Vue 的 ViewModel 层（伪代码）
var app = new Vue({
   
    el: '#app',
    data: {
        // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {
   }, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {
     // 用于描述视图行为（完全前端定义）
        showMessage(){
   
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
   
        let vm = this;
        // Ajax 获取 Model 层的数据
        ajax({
   
            url: '/your/server/data/api',
            success(res){
   
                // TODO 对获取到的 Model 数据进行转换处理，做二次封装
                vm.server = res;
            }
        });
    }
})

//服务端的Model层
{
   
    "url": "/your/server/data/api",
    "res": {