第一节：邂逅Vue3和Vue3开发体验

小何何02
160 阅读3分钟

附：「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

最近在学习coderwhy老师的vue3课程，后面的一段时间我都会陆续将我在课堂上所学习到的知识，总结成笔记，发布到掘金平台上。大家完全可以放心看我的文章学习coderwhy老师的vue3，所有的文章通俗易懂有条理。我平常做笔记也都会做一份思维导图方便复习，后续整理好都会放在GitHub上，大家需要可以自行下载。最后欢迎大家阅读点赞Star，留言吐槽，谢谢！！

1. 使用Vue3

Vue的本质，就是一个JavaScript的库，刚开始我们不需要把它想象的非常复杂，我们就把它理解成一个已经帮助我们封装好的库，在项目中可以引入并且使用它即可。

1.1 方式一：CDN引入

在文件中引入这个链接就相当于已经引入Vue3了

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

示例代码：

<body>
  <div id="app"></div>

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

1.2 方式二：下载和引入

打开这个链接：unpkg.com/vue@3.2.28/…，全选复制所有代码，然后在项目根目录自定义命名一个 js 文件，如：vue.js，然后将复制的代码粘贴到该文件内。这样我们要使用vue3，直接在本地引用这个文件就可以了。示例代码如下：

<body>
  <div id="app"></div>

  <script src="../js/vue.js"></script>
  <script>
    // Vue相关的代码
    const app = Vue.createApp({
      template: '<h2>Hello Vue3</h2>'
    })
    
    // 将app挂载到id为app的div上
    app.mount('#app')
  </script>
</body>

1.3 实战：计数器

需求：点击+1，那么内容会显示数字+1。点击-1，那么内容会显示数字-1。

1.3.1 Vue3实现（声明式编程）
<body>
  <div id="app"></div>

  <template id="my-app">
    <div>{{count}}</div>
    <button @click="add">+1</button>
    <button @click="sub">-1</button>
  </template>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      template: '#my-app',
      data(){
        return {
          count: 0
        }
      },
      methods:{
        add(){
          this.count++
        },
        sub(){
          this.count--
        }
      }
    })
    
    app.mount('#app')
  </script>
</body>

代码链接：js.jirengu.com/bixenafine/…

演示效果：

1.3.2 原生JS实现（命名式编程）
<body>
  <div class="count"></div>
  <button class="add">+1</button>
  <button class="sub">-1</button>
  
  <script>
    const count = document.querySelector('.count')
    const add = document.querySelector('.add')
    const sub = document.querySelector('.sub')

    // 默认数字为0
    let number = 0;

    // 将默认值赋值给count
    count.innerHTML = number;

    // 点击按钮+1 / -1

    add.addEventListener('click', () => {
      count.innerHTML = number++;
    })

    sub.addEventListener('click', () => {
      count.innerHTML = number--;
    })
  </script>
</body>

代码链接：js.jirengu.com/rafurupuza/…

演示效果：

2. 编程范式

2.1 命令式编程和声明式编程

（1）原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：

  • 命令式编程和声明式编程****。

  • 命令式编程关注的是 “how to do（怎么做）”。声明式编程关注的是“what to do（怎么办）”，由框架（机器）完成“how”的过程；

（2）在原生的实现过程中，我们是如何操作的呢？

  • 我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令； 这样的编写代码的过程，我们称之为命令式编程； 在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；

（3）在Vue的实现过程中，我们是如何操作的呢？

  • 我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods； 这样的编写代码的过程，我们称之为是声明式编程； 目前Vue、React、Angular的编程模式，我们称之为声明式编程；

3. MVVM模型

我们要记住 MVC 和 MVVM 都是一种软件的体系结构，这个是对两个抽象概念最准确的解释。

4. 选项

4.1 template属性

在使用createApp的时候，我们传入了一个对象，接下来我们详细解析一下之前传入的属性分别代表什么含义。

template属性：

  • 表示的是Vue需要帮助我们渲染的模板信息

  • 目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们挂载到的元素（比如id为app的div）的 innerHTML；

  • 但是这个模板的写法有点过于别扭了，并且IDE很有可能没有任何提示，阻碍我们编程的效率。

Vue提供了两种方式解决：

方式一：使用 script 标签，并且标记它的类型为 x-template，示例代码如下：

<body>
  <div id="app"></div>

  <script type="x-template" id="my-app">
    <div>
      <h2>{{ message }}</h2>
    </div>
  </script>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      template: '#my-app',  // 相当于document.querySelector('#my-app')
      data(){
        return {
          message: 'Hello Vue3'
        }
      },
    })
    
    app.mount('#app')
  </script>
</body>

方式二：使用任意标签（通常使用 template 标签，因为不会被浏览器渲染），设置 id。示例代码如下：

  • template元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使用JavaScript实例化；

代码链接：js.jirengu.com/vepeqigose/…

输出结果：

avatar
文章
阅读
粉丝