Vue速通(1)

简单介绍与常见options api

2023/2/15·2161 字·约 6 分钟阅读
思辨・通用
#笔记#基础#Vue
目录 (5)

Vue 是什么？#

根据 Vue.js 官网 1 的定义:

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

创建一个 Vue 应用#

简单来说，Vue 可以理解为一个封装好的 js 库，可以直接在项目中引用。

引用 Vue 的方式有四种：

  1. 在页面中通过 CDN 的方式来引用 Vue；
html
<div id="app"></div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    template: `Hello Vue!`,
  })
  app.mount('#app')
</script>
  1. 下载 Vue 的 JavaScript 文件，并在项目中手动引用 Vue；
html
<div id="app"></div>

// 假设将vue源码写入project/js/vue.js之中
<script src="../lib/vue.js"></script>
<script>
  const app = Vue.createApp({
    template: `Hello Vue!`,
  })
  app.mount('#app')
</script>
  1. 通过 npm 包管理工具安装引用 Vue； npm init vue@latest
  2. 直接通过 Vue CLI 创建项目，并且引用 Vue；

CLI 是 Command-Line Interface, 意为命令行界面。通过 CLI 选择项目的配置和创建项目，Vue CLI 已经内置了 webpack 相关的配置，不需要从零来配置。

text
全局安装Vue CLI： npm install @vue/cli -g
升级Vue CLI： npm update @vue/cli -g
创建项目： Vue create 项目的名称

体验 Vue 核心功能#

Vue 最显著的特点就是响应式数据驱动，即 View 和 Model 可以双向绑定。当用户更新 View(Model)时，Model(View)也可以随之自动更新，而无需进行额外的 Dom 操作。

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    template: `<input v-model="count">
                <button v-on:click="addCount">
                框内数字是{{count}}，点击增加
               </button>`,
    data: function () {
      return {
        count: 0,
      }
    },
    methods: {
      addCount: function () {
        this.count++
      },
    },
  })
  app.mount('#app')
</script>

template 属性是一段字符串，可以被解析成 html 文本，并挂载到对应的选择器上。为了方便，也可以直接将 html 文本写在对应选择器内。

Vue 常用 options api#

data#

data 属性是一个函数，该函数需要返回一个对象。该对象会被 Vue 的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理。

methods#

methods 属性是一个对象，该对象中可以定义很多方法并绑定到模板中。method 属性内定义的方法可以使用 this 关键字访问 data 函数中返回的对象的属性。

computed#

在开发中，时常遇到处理复杂数据的场景，较为直观的处理办法时利用插值语法和表达式直接处理或者在 method 中进行处理。但实际上，在 Vue 中任何包含响应式数据的复杂逻辑，都应该使用计算属性。

computed 属性是一个对象，它的使用方法和 methods 属性很像，但又不尽相同。method 多次使用方法的时没有缓存，需要多次计算，而计算属性是有缓存，且调用方法时不需要加()。

watch#

watch 属性是一个对象，可以用来侦听 data 属性里的数据变化。watch 属性内的方法默认有两个参数，newValue 和 oldValue。默认情况下，watch 只是在侦听对象的引用变化，对于内部属性的变化是不会做出响应的。侦听对象内部属性需要用选项 deep 进行更深层的侦听或者直接侦听对应属性变化。另外一个属性 immediate，是希望一开始的就会立即执行一次。

js
Object: {
  handler(newValue, oldValue) {
    console.log("侦听到Object改变:", newValue, oldValue)
    console.log(newValue === oldValue)
  },
  // 监听器选项:
  // info进行深度监听
  deep: true,
    // 第一次渲染直接执行一次监听器
    immediate: true
},
"Object.value": function(newValue, oldValue) {
  console.log("Object.value发生改变:", newValue, oldValue)
}

Footnotes#

  1. Vue.js ↩