极客开发

Vue速通(1)

简单介绍与常见options api
 前端  1263字

Vue 是什么？

根据Vue.js 官网的定义:

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

创建一个 Vue 应用

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

引用 Vue 的方式有四种：

  1. 在页面中通过 CDN 的方式来引用 Vue；
1
2
3
4
5
6
7
8
9

<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；
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<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 相关的配置，不需要从零来配置。

全局安装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 操作。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<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，是希望一开始的就会立即执行一次。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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)
}

相关文章：