Vue学习篇(一)—初体验

Vue Day 01

概述：

• 认识Vuejs
  • 为什么学习Vuejs
  • 简单认识一下Vuejs
• Vuejs安装方式
• CDN引|入
• 下载和引入
• NPM安装管理
• Vuejs初体验
  • Hello Vuejs
  • Vue列表示
  • 案例:计数器
• Vuejs的MVVM
• Vue中的MVVM

一、Vuejs的起步

1.1. 认识Vuejs

• 为什么学习Vuejs

  作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能

• Vue的渐进式

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

• Vue的特点

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

1.2. 安装Vue

• CDN引入

  <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

• 下载引入

  • 开发环境 https://vuejs.org/js/vue.js
  • 生产环境 https://vuejs.org/js/vue.min.js

• npm安装

  • 后续通过webpack和CLI的使用，我们使用该方式

1.3. Vue的初体验

• Hello Vuejs

  <div id="app">
      <h2>{{message}}</h2>
      <h1>{{name}}</h1>
  </div>
  <script src="../js/vue.js"></script>
  <script>
      let app=new Vue({
          el:'#app',//用于挂载要管理的元素
          data:{//定义数据
              message:'你好啊',
              name:'云澈'
          }
      })
  </script>
  

  

  我们来阅读JavaScript代码，会发现创建了一个Vue对象。
  创建Vue对象的时候，传入了一些options：{}

  • {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
  • {}中包含了data属性：该属性中通常会存储一些数据
    这些数据可以是我们直接定义出来的，比如像上面这样。
    也可能是来自网络，从服务器加载的。

  浏览器执行代码的流程：

  • 执行到1行代码显然出对应的HTML
  • 执行第7行代码创建Vue实例，并且对原HTML进行解析和修改

  并且，目前我们的代码是可以做到响应式的。

  • mustache -> 体验vue响应式

• Vue列表展示

  现在，我们来展示一个更加复杂的数据：数据列表。

  • 比如我们现在从服务器请求过来一个列表
  • 希望展示到HTML中。

  HTML代码中，使用v-for指令

  • 该指令我们后面会详细讲解，这里先学会使用

  <div id="app">
      <ul>
          <li v-for="item in movies">{{item}}</li>
      </ul>
  </div>
  
  <script src="../js/vue.js"></script>
  <script>
      const app=new Vue({
          el:'#app',
          data:{
              message:'你好啊',
              movies:['海王','星际穿越','大话西游','少年派']
          }
      })
  

而且，更重要的是，它还是响应式的。

• 也就是说，当我们数组中的数据发生改变时，界面会自动改变
• 可以打开开发者模式的console，来试一下

小结：后面给数组追加元素的时候, 新的元素也可以在界面中渲染出来

• Vue计数器小案例

  • 事件监听: click -> methods

  现在，我们来实现一个小的计数器

  • 点击 + 计数器+1
  • 点击 - 计数器 -1

  <div id="app">
      <h2>当前计数：{{counter}}</h2>
  <!--    <button v-on:click="counter++">+</button>-->
  <!--    <button v-on:click="counter&#45;&#45;">-</button>-->
  <!--    <button v-on:click="add">+</button>-->
  <!--    <button v-on:click="sub">-</button>-->
      <button @click="add">+</button>
      <button @click="sub">-</button>
  </div>
  
  <script src="../js/vue.js"></script>
  <script>
      const app=new Vue({
          el:'#app',
          data:{
              counter: 0
          },
          methods:{
              add:function () {
                  console.log('add被执行');
                  this.counter++
              },
              sub:function () {
                  console.log('sub被执行');
                  this.counter--
              }
          }
      })
  </script>
  

这里，我们又要使用新的指令和属性了

• 新的属性：methods，该属性用于在Vue对象中定义方法。
• 新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)

你可能会疑惑？

• 这些@click是什么东西？
• Vue对象中又是定义el/data/methods，到底都有哪些东西可以定义，以及它们的作用是什么？
• 这些疑惑在后续学习中都会一一解开。

1.4. Vue中的MVVM

通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)

• 维基百科

• MVVM（Model–view–viewmodel）是一种软件架构模式。

  MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，[1] 这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。[1] 视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问

我们直接来看Vue的MVVM

View层：

• 视图层
• 在我们前端开发中，通常就是DOM层。
• 主要的作用是给用户展示各种信息。

Model层：

• 数据层
• 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
• 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

• 视图模型层
• 视图模型层是View和Model沟通的桥梁。
• 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
• 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

计数器的MVVM

• 我们的计数器中就有严格的MVVM思想
  • View依然是我们的DOM
  • Model就是我们我们抽离出来的obj
  • ViewModel就是我们创建的Vue对象实例
• 它们之间如何工作呢？
  • 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
  • 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。

有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

1.5. 创建Vue时, options可以放那些东西

• el:
  • 类型：string | HTMLElement
  • 作用：决定之后Vue实例会管理哪一个DOM。
• data:
  • 类型：Object | Function （组件当中data必须是一个函数）
  • 作用：Vue实例对应的数据对象。
• methods:
  • 类型：{ [key: string]: Function }
  • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
• 生命周期函数

1.6. vue生命周期

具体详情可vuejis官网查阅

类型：Object | Function （组件当中data必须是一个函数）

• 作用：Vue实例对应的数据对象。

• methods:
  • 类型：{ [key: string]: Function }
  • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
• 生命周期函数

1.6. vue生命周期

具体详情可vuejis官网查阅