1. 认识Vuejs

1.1. 为什么要学习Vuejs

前后端分离是当前开发趋势。

Vue（读音/vju:/，类似于 view），不要读错。

Vue渐进式的框架：

  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验；
  • 或者你希望将更多的业务逻辑使用Vue实现，使用Vue的核心库及其生态系统。
  • Core + vue-router + Vuex 可以满足你各种各样的需求

Vue高级功能：

  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

1.2 Vuejs的安装方式

1.2.1 CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

1.2.2 下载引入

<!-- 开发环境 -->
https://vuejs.org/js/vue.js
<!-- 生产环境 -->
https://vuejs.org/js/vue.min.js

1.2.3 NPM安装

使用webpack及CLI来安装，后面会详细介绍。

npm install vue -g

1.3 Vuejs初体验

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本语法学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
  <div id="app">
    <!-- 插值表达式 -->
   <p>{{message}}</p>
   <p>{{job}}</p>
  </div>


</body>
<script type="text/javascript" src="./js/app.js"></script>
</html>

app.js

new Vue({
    el:'#app', //元素绑定
    data:{
        message:'helloworld!', //变量声明
        job:'Software Enginer'
    }
});

style.css

*{padding:0}

上面三段代码是一个最简单的入门示例，采用CDN模式的资源引入；以方便我们学习VUE。

1.4 Vuejs的MVVM

MVC是后端的分层开发概念；

MVVM是前端视图层的概念；数据驱动

image-20210518085046961

1.4.1 VUE和MVVM的对应关系

实例：

<html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Vue First Demo</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  </head>
  <body>
    <!--
      Vue实例会控制这个元素中的所有内容；el:"#app"
      Vue所控制的这个元素区域，就是我们的 V
   -->
    <div id="app">
      {{msg}}
    </div>
    <script>
      /**
       创建一个VUE实例，当我们导入VUE的资源后，浏览器的内存中就多了一个VUE的构造函数；
       我们创建的这个 vm 对象就是MVVM中的vm调度者。
      **/
      var vm = new Vue({
        el:'#app',
        // data中的属性，存放的就是el当中需要用到的属性，
        // 这个data 也就是MVVM中的M，Model层用来保存数据
        data:{
          msg:'hello vue'
        }
      });
    </script>
  </body>
</html>

在vue中 如果是组件 data 只接收函数！后面在学习Vue脚手架是会发现！

1.5 Vue生命周期

Vue 实例生命周期