前言

⭐️ 本专栏主要内容为「 Vue3官方文档 」的学习过程 ✍🏼

⭐️ 本专栏适合人群：Vue小白、学完一遍Vue的掘友 👨🏼‍💻

⭐️ 本专栏的阅读顺序和官方文档顺序相同 📖

⭐️ 英雄不问出处，这个专栏一定让你收获满满 🥳！

⭐️ 静心，思考，实操，坚持，巩固，满载而归 🥰！

⭐️ 欢迎各位掘友在评论区交流 🤡

本节内容

• 什么是Vue
• 声明式渲染
• 指令
• 组件化应用

第一节 什么是Vue

Vue是一套构建用户界面的渐进式框架，自底向上逐层应用。

MVVM架构，只关注视图层，为单页应用提供驱动。

* 图片来源：www.pianshen.com/article/665…

第二节 声明式渲染

采用简单的模板语法来声明式地将数据渲染进DOM

在data中声明我们要使用的变量，vue会为他做响应式，当数据变化后，视图变化。

使用{{ data }}直接引入响应数据值

demo：introduction/声明式渲染/counter.html

第三节 指令

• v-bind

为绑定元素的属性attribute的值做数据响应式

demo：introduction/指令/v-bind.html

• v-on

可以添加一个事件监听器，比如click

demo：introduction/指令/v-on.html 反转字符

• v-model

它能轻松实现表单输入和应用状态之间的双向绑定

demo：introduction/指令/v-model.html

• v-if

可以用它控制一个元素是否显示

demo：introduction/指令/v-if.html

• v-for

可以绑定数组数据来渲染一个项目列表

demo：introduction/指令/v-for.html

第四节 组件化应用

我们可以将不同的业务块作为组件按需引入

<div id="todo-list-app">
    <ol>
      <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
      />
    </ol>
  </div>

  <script>
    const TodoItem = {
      props: ['todo'],
      template: `<li>{{ todo.text }}</li>`
    }
    const TodoList = {
      data() {
        return {
          groceryList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are supposed to eat' }
          ]
        }
      },
      components: {
        TodoItem
      }
    }

    const app = Vue.createApp(TodoList)
    app.mount('#todo-list-app')
  </script>

我们来看下这个组件化应用的方法

我们定义了一个模板 TodoItem，他的html是<li>{{ todo.text }}</li>，也就是说todo.text是可以响应式变化的，给他添加了一个属性值props：todo

在Vue实例中注册一个新的组件，在html中以标签的形式使用这个组件，用v-for指令生成多个模版，并且每个模板对应的todo不同，也就达到了有多个li的效果。

结语

专栏同步代码：Github ⎋

掘金社区：跟我一起学Vue3

作者简介：

一个满脑子奇怪知识的小商同学，在校ing，懂点设计，懂点排版，为成为一名优秀的前端工程师而努力。