1、Vue 快速入门

1.1、Vue的介绍

Vue是一套构建用户界面的渐进式前端框架。

“渐进式框架”简单的来说, 就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。

MVC:

model, 模型层

view, 视图层

controller 控制层
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
特点易用：在有HTML,CSS, JavaScript的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kb运行大小、超快虚拟DOM、最省心的优化。

1.2、Vue的快速入门

开发步骤

下载和引入vue.js文件。
编写入门程序。视图：负责页面渲染，主要由HTML+CSS构成。脚本：负责业务数据模型（Model）以及数据的处理逻辑。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<!--

    1. 下载和引入vue.js文件。
    2. 编写入门程序。
        视图：负责页面渲染，主要由HTML+CSS构成。
        脚本：负责业务数据模型（Model）以及数据的处理逻辑。
-->
<body>

      <!-- 视图 -->
    <div id="div">
        {{msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
       /* 脚本 */
        /*
            1. 创建Vue的核心对象

                a. new Vue(js对象)

                b. js对象 = {name : value,name : value}
                     let jsObj = {
                        name : "张三",
                        age : 18,
                        speak : function () {
                            console.log(this.name);
                        }
                    }

            2. vue对象的属性说明
                a. el (element) : 选择器
                    指定视图区域 ,此区域下的所有表达式,事件等内容都会受到vue的控制

                b. data : 数据
                    这里设置的数据是初始化数据, 可以被引用
                      这里的数据改变,引用的地方也会改变

            3. 视图使用的一个表达式: 插值表达式
                {{表达式}}

                目前,表达式写的是data中的变量名,效果是引用此变量

          */

    let v = new Vue({
        el:"#div",
        data:{
            msg : "大三学生"
        }
    })

</script>
</html>

1.3、Vue快速入门详解

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。
```
let vm = new Vue({
 选项列表;
});
```

选项列表

1. el选项：指定的vue控制区域。(根据选择器获取)
2. data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
3. methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。

数据绑定

在视图部分获取脚本部分的数据: (插值表达式)
    {{变量名}}

1.4、Vue快速入门的升级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
  /*
  *  脚本
  * */
  let vm = new Vue({
      el:"#div",
      data:{
          name:"张三",
          classRoom:"大三学生"
      },
      methods:{
         method01:function () {
             console.log(this.name + "在" + this.classRoom + "学习2")
         },
         method02(){
              console.log(this.name + "在" + this.classRoom + "学习3")
          }
      }
  })

   function hi() {
       // console.log(vm.name + "在" + vm.classRoom + "学习");
       // vm.method01()
       vm.method02()
   }
   function update() {
      //data中的数据更新了,引用此数据的视图也会更新
       vm.classRoom = "是一个程序员"
   }

</script>
</html>

1.5、Vue小结

Vue是一套构建用户界面的渐进式前端框架。
Vue的程序包含视图和脚本两个核心部分。
脚本部分
- Vue核心对象。
- 选项列表
  - el：接收获取的元素。
  - data：保存数据。
  - methods：定义方法。
视图部分
- 数据绑定：{{变量名}} 插值表达式