认识vue

1.Vuejs安装方式

Vue的安装方式有3种

   第一种、下载和引入
        1.下载好vue.js框架；     官网中下载
            (有开发环境版本和生产环境版本(即未压缩版和压缩版),开发过程中用开发环境版本)
        2.下载好后用 <script> </script>标签引入；    (类似于引入jQuery)

   第二种、CDN引入   (直接引入vue.js框架对应的链接即可； 链接到一个明确的版本号和构建文件)
        1. 开发环境版本：
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        2.生产环境版本：
           <script src="https://cdn.jsdelivr.net/npm/vue"></script>

   第三种、NPM安装管理
        * 后续通过webpack和CLI的使用，我们使用该方式。
        * NPM 能很好地和诸如webpack或Browserify 模块打包器配合使用，
          同时Vue也提供配套工具来开发单文件组件。

2.Vue.js初体验

  <script src="js/vue.js"></script>   
   //引入之后就可以在<script>中写Vue相关代码了
    
  <div id="app">{{message}}</div>    //显示数据，放在{{ }}中；
  
  <script>
      const app=new Vue({
         el:"#app",              //用于挂载要管理的元素；
         data:{                  //用于定义数据
            message:"你好啊！"
           }
       })
  </script>
  //第一个Vue程序，体验一下Vue的响应式
  //代码做了什么事情？
  // (1).创建了一个Vue对象,并在里面传入了一个对象{}
  // (2).{}中的el属性：该属性决定了该Vue对象挂载哪个元素，
  //                  我们这里是挂载到了id为app的元素上。
  //                  挂载哪个元素，就用vue实例中的内容操作哪个元素。
  // (3).{}中的data属性：该属性中通常会存储一些数据。
  //     这些数据可以是我们直接定义出来的，也可以来自网络，从服务器加载的；

  //   Vue中一般不用var，用let(变量)、const(常量,如接收该构造函)
  //   响应式：可以实现数据的实时更新；




     上面代码的实现过程：  (这种编程范式是：声明式编程)
        1.挂载元素后，就会去解析这个元素，然后解析到某个变量message；
        2.看Vue实例在data中有没有定义这个变量，如果定义了就会把该变量的值在元素中显示。
       
        即：先根据el，找元素---》解析元素内容---》对照data；
            声明式编程好处：做到数据与界面完全分离
 

    如果是元素js中的做法： (这种编程范式是：命令式编程)
        1.创建div元素，并设置id属性
        2.定义变量message
        3.将message变量放在div元素中显示

//计数器 
<script src="js/vue.js"></script>

<div id="app">
     <h2>当前计数:{{counter}}</h2>
     <button v-on:click="add">+</button>
     <button v-on:click="sub">-</button>
     //点击执行对应点的方法
     //<button v-on:click="counter++">+</button>
     //<button v-on:click="counter--">-</button>
 </div>

 <script>
     const app=new Vue({
          el:"#app",
          data:{
            counter:0
           },
           methods:{                 //定义管理元素要使用的方法
              add:function () {
                 this.counter++     //this，表示当前对象中的counter变量
                },
              sub:function () {
                 this.counter--
                }
             }
     })
    //响应式：直接修改data内容，响应到显示的内容；
 </script>

3.MVVM模型

 MVVM (Model View View Model)
        ：解决数据和页面显示的问题而出现前端的MVVM框架，
            是一种模块化开发代码分层的思想或者框架。

 MVVM 的优点：
     1.主要目的是分离视图（View）和模型（Model）
     2.降低代码耦合，提高视图或者逻辑的重用性。
     3.提高了模块的可测试性

 我们直接来看Vue的MVVM (Model View View Model)
  (1).View层：
      *视图层
      *在我们前端开发中，通常就是DOM层。
      *主要的作用是给用户展示各种信息。
  (2).Model层：
      *数据层      (data)
      *数据可能是我们固定的死数据，更多是来自我们服务器，从网络上请求下来的数据。
      *在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。。
  (3).VueModel层：
      *视图模型层
      *视图模型层是View和Model沟通的桥梁。
      *一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。
       另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，
      可以监听到，并在需要的情况下改变对应的Data。


  即：1.数据绑定：view上面显示的永远是Model上最新数据，是因为VueModel帮我们实现了；
      2.DOM监听：监听事件，并在需要的情况下改变对应的Data。




1.  Vue初体验-计数器 这个案例中的MVVM：
      View：是展示给用户的部分，   
             所以是<div id="app">  </div>这部分的内容;
     Model：是我们的数据，
             所以是app中data的内容；
   VueModel：将Model展示到View，
             所以是创建的Vue对象实例,new Vue();

2. 我们的计数器中就有严格的MVVM思想:
      View依然是我们的DOM
      Model就是我们我们抽离出来的obj
      ViewModel就是我们创建的Vue对象实例

3.它们之间如何工作呢？
     首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
     其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，改变obj中的数据。

4.对象options

我们在创建Vue实例的时候，传入了一个对象options。

 这个options 可以包含很多的选项，如：
   1.el:
      类型：string | HTMLElement
      作用：决定之后Vue实例会管理哪一个DOM。
   2.data:
     类型：Object | Function （组件当中data必须是一个函数）
     作用：Vue实例对应的数据对象。
   3.methods:
     类型：{ [key: string]: Function }
     作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

5.Vue的生命周期

 Vue生命周期
      :从诞生到消亡的整个过程；
      :创建一个new Vue()，它的源码里面会做一系列的事情。这一系列的事情就是它的生命周期。

 (1).每个 Vue 实例在被创建时，源码中都要经过一系列的初始化过程。
     例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
     (对el的处理，对data的处理、对method的处理、更新DOM...)

 (2).同时在这个过程中也会自调用一些叫做生命周期钩子的函数，
    这给了用户在不同阶段添加自己的代码的机会; (执行自己想执行的内容)

   比如created 钩子可以用来在一个实例被创建之后执行代码，
   也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。