一、初识Vuejs开发，vue开发的初体验

1、认识Vue

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript框架。
  • 全称是Vue.js或者Vuejs；
  • 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；
  • 帮助你高效地开发用户界面，无论任务是简单还是复杂；
• 什么是渐进式框架呢？
  • 表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；
    • 就是我们在项目中，可以一部分用Vue来开发；一部分用原生或者其他框架进行开发；
• 目前前端最流行的是三大框架：Vue、React、Angular。
  • angular：入门门槛较高，并且国内市场占率较低；不否认本身非常优秀的框架；
  • react：React在国内外的市场占有率都是非常高的；作为前端工程师也是必须学习的一个框架；
  • vue：Vue在国内市场占有率是最高的；几乎所有的前端岗位都会对Vue有要求；
• 学习vue2还是vue3？
  • 《程序员》：Vue3版本兼容2.x，对于想要学习Vue的开发者而言，时常在纠结是从Vue2开始学基础，还是直接学Vue3，对此，你有什么样的建议？
  • 尤雨溪：直接学Vue3就行了，基础概念是一模一样的；
  • 况且Vue3向下兼容Vue2.x的语法哦
• 目前需要学习Vue3吗？
  • 在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。
    • 更好的性能；
    • 更小的包体积；
    • 更好的TypeScript集成；
    • 更优秀的API设计。
• 那么现在是否是学习vue3的时间呢？
  • 答案是肯定的
  • Vue3目前已经是稳定的版本，并且Vue3在2022年2月7日已经成为默认安装版本；
  • 目前社区也经过一定时间的沉淀，更加的完善了，包括AntDesignVue、Element-Plus都提供了对Vue3的支持，所以很多公司目前新的项目都已经在使用Vue3来进行开发了。
  • 并且在面试的时候，几乎都会问到各种各样Vue3相关的问题；

2、Vue的使用

2.1.如何使用Vue呢？

• Vue的本质，就是一个JavaScript的库：
  • 刚开始我们不需要把它想象的非常复杂；
  • 我们就把它理解成一个已经帮助我们封装好的库；
  • 在项目中可以引入并且使用它即可。
• 那么安装和使用Vue这个JavaScript库有哪些方式呢？
  • 方式一：在页面中通过CDN的方式来引入；
  • 方式二：下载Vue的JavaScript文件，并且自己手动引入；
  • 方式三：通过npm包管理工具安装使用它；
  • 方式四：直接通过Vue CLI创建项目，并且使用它；

2.2.方式一：CDN引入

• Vue的CDN引入：

<script src="https://unpkg.com/vue@next"></script>

• Hello Vue案例的实现：

<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  console.log(Vue)
  const app = Vue.createApp({
    template: '<h2>Hello Vue3</h2>'
  })
  //将app挂载到id为app的div上
  app.mount("#app")
</script>

2.3.方式二：下载和引入

• 下载Vue的源码，可以直接打开CDN的链接：
  • 打开链接，复制其中所有的代码；
  • 创建一个新的文件，比如vue.js，将代码复制到其中；
• 通过script标签，引入刚才的文件：

<script src="../js/vue.js"></script>

• 你好啊，Vue3，案例的实现：

<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    template:"<h2>你好啊,Vue3</h2>"
  })
  app.mount("#app")
</script>

3、Vue初体验

3.1.案例体验一：动态展示Hello World数据

• 当然我们会发现在template中写html很不方便，写的是字符串；那有没有更方便的写法呢？
  • 如果Vue.createApp传入的对象中没有定义template属性，那么挂载时 Vue 会将div#app元素中的内容当成模板进行解析；
• 所以template中的内容；我们可以直接写在挂载元素div#app中；

<div id="app">
  <h2>{{message}}</h2>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message:"Hello World"
      }
    }
  })
  app.mount("#app")
</script>

3.2.案例体验二：展示列表的数据

<div id="app">
  <h2>{{message}}</h2>
  <ul>
    <li v-for="item in books">{{item}}</li>
  </ul>
</div>
<script src="../lib/vue.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message:"Hello World",
        books:["Javascript高级程序设计","你不知道的Javascript","追风筝的人"]
      }
    }
  })
  app.mount("#app")
</script>

3.3.案例体验三：计数器功能实现

• 如果我们希望实现一个计数器的案例：

  • 点击+1，那么内容会显示数字+1；
  • 点击-1，那么内容会显示数字-1；

• 我们可以选择很多种方式来实现：

  • 在这里我们就对比原生和Vue的实现方式的不同。

• vue实现计数器功能（声明式编程）

<div id="app">
  <h2>计数器:{{counter}}</h2>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        counter:0
      }
    },
    methods:{
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })
  app.mount("#app")
</script>

• JS原生实现计数器功能（命令式编程）

<div class="content">
  <h2>
    计数器:<span class="title"></span>
  </h2>
  <button class="increment">+1</button>
  <button class="decrement">-1</button>
</div>
<script>
  //1.获取DOM元素
  const titleEl = document.querySelector(".title")
  const incrementEl = document.querySelector(".increment")
  const decrementEl = document.querySelector(".decrement")
  //2.初始化计数值
  let counter = 0
  //3.设置titleEl的内容（默认值）
  titleEl.textContent = counter

  //4.监听按钮的点击
  incrementEl.addEventListener("click", function () {
    counter += 1
    titleEl.textContent = counter

  })
  decrementEl.addEventListener("click", function () {
    counter -= 1
    titleEl.textContent = counter

  })
</script>

4、声明式和命令式

• 原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：
• 命令式编程和声明式编程；
• 命令式编程关注的是 “how to do”(怎么做)自己完成整个how的过程；
• 声明式编程关注的是 “what to do”(做什么)，由框架(机器)完成 “how”的过程；
• 在原生的实现过程中，我们是如何操作的呢？
  • 我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；
  • 这样的编写代码的过程，我们称之为命令式编程；
  • 在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；
• 在Vue的实现过程中，我们是如何操作的呢？
  • 我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；
  • 这样的编写代码的过程，我们称之为是声明式编程；
  • 目前Vue、React、Angular、小程序的编程模式，我们称之为声明式编程；

5、MVVM模型

• MVC和MVVM都是一种软件的体系结构
  • MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；
  • MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；
• 通常情况下，我们也经常称Vue是一个MVVM的框架。
  • Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

6、data属性

• data属性是传入一个函数，并且该函数需要返回一个对象：
  • 在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；
  • 在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；
• data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
  • 所以我们在template或者app中通过 访问counter，可以从对象中获取到数据；
  • 所以我们修改counter的值时，app中的 也会发生改变；
• 具体这种响应式的原理，我们后面会有专门的篇幅来进行深入学习

7、methods属性

• methods属性是一个对象，通常我们会在这个对象中定义很多的方法：
  • 这些方法可以被绑定到 模板中；
  • 在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；
• 对于有经验的同学，在这里我提一个问题，官方文档有这么一段描述：
  • 问题一：为什么不能使用箭头函数（官方文档有给出解释）？
  • 问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）

8、问题一：不能使用箭头函数？

• 我们在methods中要使用data返回对象中的数据：
  • 那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据。
• 那么我们这个this能不能是window呢？
  • 不可以是window，因为window中我们无法获取到data返回对象中的数据；
  • 但是如果我们使用箭头函数，那么这个this就会是window了；
• 为什么是window呢？
  • 这里涉及到箭头函数使用this的查找规则，它会在自己的上层作用于中来查找this；
  • 最终刚好找到的是script作用于中的this，所以就是window；

9、问题二：this到底指向什么？

• 事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this：

10、其他属性

• 当然，这里还可以定义很多其他的属性，我们会在后续进行学习：
  • 比如props、computed、watch、emits、setup等等；
  • 也包括很多的生命周期函数；