《零基础入门Vue》 Chapter01 Vue介绍

《零基础入门Vue》 Chapter01 Vue介绍

记录零基础Vue学习过程。
官方文档 Vue中文文档

---

简介

先看官方的简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

其中官网特别将渐进式加粗标注了出来，这是Vue区别于其他框架的特点之一，也是容易上手的原因之一。

渐进式框架的含义就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。[1]

想要详细了解的可以阅读下面的文章，原文中有非常生动的例子，此处不再展开。
《什么是渐进式前端开发框架？向您介绍vue，看了就懂了》

---

Vue安装

官方安装手册
偷个懒不写了…

---

声明式渲染

先看官网给的应用案例

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!-- HTML部分 -->
<!-- 此处我们创建了一个 div 并给它一个 id 为 counter -->
<div id="counter"> 
  <!-- 这里使用了vue 的Mustache语法{{}}来获取js代码中定义的数据 -->
  Counter: {{ counter }} 
</div>

// JS部分
const Counter = { // 我们定义了一个对象作为我们的 Vue 对象
  data() {  // data 方法将保存我们在这个 Vue 对象中定义的所有变量
    return {
      counter: 0    // 定义一个变量 counter
    }
  }
}
// 初始化 Vue 对象并通过 mount 方法根据id 绑定到我们创建的 DOM 元素上
Vue.createApp(Counter).mount('#counter') 

这样我们就创建了一个Vue应用，通过文本插值的方式在HTML文档中插入了js中定义的变量，现在数据和 DOM 已经被建立了关联，所有东西都是响应式的

响应式就是当我们在js文件中改变了数据时，HTML（视图）中的数据也会随之改变，具体原理暂时不做分析。（因为我也不知道…）

除了文本插值，我们还可以绑定 DOM 元素的属性 ( attribute ) :

<!-- HTML部分 -->
<div id="bind-attribute">
  <!-- 通过 v-bind 指令绑定 DOM 的 attribute -->
  <span v-bind:title="message"> 
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

// JS部分
const AttributeBinding = {
  data() {
    return {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  }
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')

这个案例整体结构和第一个案例基本一样，我们依旧是创建了一个 Vue 通过 id 对象绑定(挂载)在了一个 DOM 元素上，不同的是此处是使用 v-bind 将活跃实例的 property(既Vue对象的数据) 和 DOM 元素的 attribute 进行了绑定

v-bind 被称作指令。指令带有前缀 v-，以表示他们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。这个案例中指令的意思是：“将这个 DOM 元素的 title attribute 和当前活跃实例的 messageproperty 保持一致。"

---

处理用户输入

使用 v-on 指令可以在 DOM 元素上添加事件监听器，通过它可以调用实例中的定义的方法：

<!-- HTML部分 -->
<div id="event-handling">
  <p>{{ message }}</p>
  <!-- 通过 v-on 监听按钮的 click 事件，触发时调用实例的reverseMessage方法 -->
  <button v-on:click="reverseMessage">反转 Message</button>
</div>

// JS部分
const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {    // Vue对象的所有方法都需要写在methods对象中
    reverseMessage() {
      this.message = this.message
        .split('')  // 字符串转数组
        .reverse()  // 翻转数组
        .join('')   // 数组拼接字符串
    }
  }
}

Vue.createApp(EventHandling).mount('#event-handling')

在这个案例中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都交给了 Vue 处理，这样我们在编写代码时只需要关注逻辑层面即可，大大节省了程序员的精力。

Vue 还提供了 v-model 指令，他能轻松实现表单输入和应用状态之间的双向绑定。

<!-- HTML部分 -->
<div id="two-way-binding">
  <p>{{ message }}</p>
  <!-- 通过 v-model 进行表单输入的双向绑定 -->
  <input v-model="message" />
</div>

// JS部分
const TwoWayBinding = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

Vue.createApp(TwoWayBinding).mount('#two-way-binding')

通过 v-model 指令可以将表单和Vue对象实例的 property 进行双向绑定，无论修改哪一个另一个都会同步进行改变。

---

参考资料

1. 什么是渐进式前端开发框架？向您介绍vue，看了就懂了