前端_Vue_1.初识Vue

已于 2023-05-03 22:10:33 修改
阅读量799 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-12-05 21:42:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BadAyase/article/details/128175958
版权

文章目录

一、前言

自动化行业一般桌面程序比较多，最近发现现场有许多网页版的系统，客户说网页系统比较方便，输个IP就能访问了。

确实，这是B/S相对于C/S一个很大的优势。
既然客户喜欢，为了增加自身竞争力，我也得做起来。

但我已经很久没接触网页了，上次写还是用最原始的HTML、CSS和JS。
于是，第一步我决定进行技术选型，了解一下现有的新型网页技术（指前端）。通过一些招聘网、技术群，我发现 Vue 和 React ，这两种技术出现的比较多。所以我决定从这两者中进行选择。稍微了解了下这两者，发现许多人认为两者是差不多的，学了其中一个后，再学另一个会很快。但相对来讲， Vue 可能更适合小白。既然如此，我就选择了从 Vue 开始。

二、开始

1 简介

关于Vue是什么，特性、语法怎样，官方文档有详细介绍。
它的网址是https://cn.vuejs.org/

本文主要摘取其中几个重点，记录学习。由于笔者是个Web开发小白，许多基本语法都不清楚，所以有时遇到一些基础知识也会从头去学。

1.1 什么是Vue？

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

下面是一个最基本的示例：

// js
import { createApp } from 'vue'
createApp({
	data() {
		return {
			count: 0
		}
	}
}).mount('#app')

<!-- html -->
<div id="app">
	<button @click="count++">
		Count is: {{ count }}
	</button>
</div>

该示例展示了 Vue 的两个核心功能：

  • 声明式渲染： Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。
  • 响应式：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。

你可能已经有了许多疑问——先别急，后续我们会详细介绍每一个细节。现在，请先继续看下去，确保对Vue框架有一个宏观的了解。

声明式，
声明式这个词在其他语言中也会遇到，通俗的解释网上有一大堆，一般会和命令式做比较，声明式就是“告诉机器你要做什么，机器会自己去做”；命令式就是“告诉机器每一步应该怎么做”。可见，声明式代码更加内聚，高度抽象，屏蔽了许多细节。
声明式交代的是一整件事情；命令式是交代每一步怎么行动。

1.2 渐进式框架

Vue是一个框架，也是一个生态。Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。
根据你的需求场景，你可以用不同的方式使用 Vue：

  • 无需构建步骤，渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

为什么将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。

我的理解是非常适合边学边用的框架。

1.3 单文件组件

在大多数使用了构建工具的Vue项目中，我们可以使用一种类似HTML格式的文件来书写Vue组件，它被称为单文件组件（也被称为 .vue ，英文Single-File Components，缩写为SFC）。顾名思义，Vue的单文件组件会将一个组件的逻辑（JavaScript），模板（HTML）和样式（CSS）封装在同一个文件里。

<script>
export default {
	data() {
		return {
			count : 0
		}
	}
}
</script>

<template>
	<button @click="count++">Count is: {{ count }} </button>
</template>

<style scoped>
button {
	font-weight: bold;
}
</style>

单文件组件是Vue的标志性功能。如果你的用例需要进行构建，官方推荐用它来编写Vue组件。

这个功能我挺感兴趣的，有点类似自定义控件的感觉，且控件相关的一切都放在一个文件中，
可复用。

1.4. API风格

Vue的组件可以按两种不同的风格书写：选项式API和组合式API。

1.4.1. 选项式API（Options API）

使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data、methods和mounted。选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

<script>
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件监听器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

作为新手，我感觉这种选项式特别整洁清晰。
就像在代码中定义了各种下拉选项框，要添加属性，就往选项框中加项；要用某个属性或者方法，只需要选择对应的项即可。

1.4.2. 组合式API（Composition API）

通过组合式API，我们可以使用导入的API函数来描述组件逻辑。在单文件组件中，组合式API通常会与<script setup>搭配使用。这个 setup attribute（attribute通常指标签中的属性）是一个标识，告诉Vue需要在编译时进行一些处理，让我们可以更简洁地使用组合式API。比如，<script setup>中的导入（import）和顶层变量/函数都能够在模板中直接使用。

下面是组合式API与<script setup> 改造后和上面的模板完全一样的组件：

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

虽然写法上也不复杂，但作为新手看起来，感觉比选项式的写法更"乱"一些。
 

import命令
JavaScript是一门编程语言，语言就要遵循一定标准。 而JavaScript遵循的标准叫ECMAScript，简称ES。
就像经常听到的“某某语言标准更新啦，它增加了xxx特性”一样。JavaScript的语言标准（即ES）也会更新，它也会使JS新增功能和特性。而这边的import就是ES6新增的命令。
该命令接受一对大括号，里面指定要从其它模块导入的变量名。
import { ref, onMounted } from 'vue' // import from vue.js
注意，不需要在文件名中添加.js扩展名，因为默认情况下会考虑该扩展名。导入的变量名必须与被导入模块对外接口的名称相同。
上面提到了对外接口，其实import是和export命令配合使用的。export命令用于规定模块的对外接口。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果外部能够读取模块内部的某个变量、函数或类，就必须使用export关键字输出。export输出的变量就是变量的原名，但可以用as关键字重命名。（有点C语言中extern那味）
有一种比较推荐的写法是，在脚本尾部一次性导出所有变量。
1.4.3. 该选哪个？

两种API风格都能覆盖大部分应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式API是在组合式API的基础上实现的！（关于Vue的基础概念和知识在它们之间是通用的）

选项式API以"组件实例"的概念为中心（即上述例子中的this），对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，对初学者而言更为友好。

组合式API的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要您对Vue的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

感觉组合式更接近原生JS。
选项式给你加了一层约束，但写起来更整洁。
组合式需要你自己有一定的组织能力，不然写出来的代码很乱。

不过，官方给出了大致建议：

  • 由于大部分核心概念在两种风格之间是通用的，熟悉了一种风格后，能很快地理解另一种风格。所以推荐采用您最初更易接受的风格。
  • 在生产项目中使用：
    • 当不需要构建工具，或打算在低复杂度的场景中使用Vue，例如渐进增强的应用场景，推荐采用选项式API。
    • 当打算用Vue构建完整的单页应用，推荐采用组合式API + 单文件组件。

在学习阶段，不必固守一种风格。

2. 快速上手（学前准备）

这节其实已经具备一些开发元素了，但还没正式开始系统学习编程，只是按流程创建一个应用体验一下。
而且需要安装环境，所以其实还是一个学前准备的过程，我们需要对前置环境、配置项等都要有一定了解。

2.1. 创建一个Vue应用

⭐⭐⭐
💡前提条件

  • 熟悉命令行
  • 已安装16.0 或 更高版本的Node.js

那么第一个问题就来了，命令行的话，开发者肯定不陌生，不用多讲。所以重点是Node.js是什么？
先摘取百度百科的话：

Node.js发布于2009年5月，是一个基于Chrome V8引擎的JavaScript运行环境（runtime），使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

V8是Google开源的JavaScript和WebAssembly引擎，用C++编写。
简单谈谈引擎（engine），
生活中接触的引擎，有汽车引擎——发动机的核心部分，是为汽车提供动力的；游戏引擎，指软件套件、集成工具集，为游戏开发提供动力/便捷性。
在这里插入图片描述
可见引擎这个东西，很难说它是啥，但可以知道，它是一个复杂的集成体，并且有一定输入与输出。没错，这个概念放在软件中，那就是封装好的API——屏蔽了内部细节，只留下了输入输出接口。
这里的V8引擎是一个JavaScript引擎，它不是机器，而是执行 JavaScript 代码并使计算机能够在硬件级别执行特定任务的程序或解释器。
简化一下，JS引擎就是一段可以"读懂"JavaScript代码,并且给出代码运行结果的程序。
接下来通过几个问题，来进一步了解。
 
①既然有V8引擎，那肯定还有许多其它JS引擎吧？
确实，JS 最初就是被设计成在浏览器中运行，所有浏览器都配备了运行 JS的 JS引擎。如，Firefox 是由 Spidermonkey 提供动力，这里的Spidermonkey就是一个引擎，是C语言写的，而 Chrome 使用的是 V8 引擎，是C++写的。可以看到，尽管都是JS引擎，但它们底层语言不一定相同。
 
②为什么需要JS引擎呢？
计算机只能解释机器码，而 JS 是高级语言，计算机无法直接识别，所以我们需要一个解释器把 JS 翻译成机器码。而JS引擎就是充当这个解释器的。所以此时的JS引擎就是解释器。
 
③说了这么多引擎相关的，并且JS引擎可以将JS翻译成机器码，那node.js又是什么，要它又有何用？
在回答这个问题之前，得先知道什么是运行时（runtime）环境。
运行时环境，从名字中也可以知道，是在代码运行时的环境，它会提供给代码一个环境（提供解释/编译、自动内存管理（GC）、对象模型、核心库等功能），以保证代码安全执行或掌管代码某些重要方面。
所以，node.js是JS运行时环境，意味着它提供给了JS各种功能。原来的JS只能游荡在浏览器代码中。而node.js的JS可以访问数据库、读写文件等等。
 
④node.js和V8的关系？
首先node.js使用了JS的语法（ECMAScript）。Ok，那很明显了，node.js自己无法在计算机上执行，需要JS引擎去翻译。这就是百科上说的node.js是基于V8引擎的，没有V8（或类似的JS引擎），node.js是无法执行的（即V8是JS的执行引擎）。

⭐有关V8和node.js的详细关系，可以看看这篇文，node.js 和 V8 是什么关系？
⭐有关JS引擎的详细信息，可以看看这个问题下的回答，JavaScript引擎、虚拟机、运行时环境是一回事儿吗？
 
Ok，看到这，相信您对node.js已经有一个大致了解了。它基于V8，并使JS更强大。

本节中，将介绍如何在本地搭建Vue单页应用。创建的项目将使用基于Vite的构建设置，并允许我们使用Vue的单文件组件（SFC）。

现在确保你安装了最新版本的Node.js，然后在命令行中运行以下命令：

npm init vue@latest

这一指令会安装并执行create-vue，它是Vue官方的项目脚手架工具。

脚手架（scaffold）：
在这里插入图片描述
脚手架本是建筑领域为了保证各施工过程顺利进行而搭设的工作平台。
而对应到软件工程领域，脚手架可以解释为帮助开发人员在开发过程中使用的开发工具、开发框架，使用脚手架你无须从头开始搭建或者编写底层软件。
简单讲，就是指开发中的前期工作环境。
如果你用过VS之类的IDE，选中里面的新建工程，然后一堆选项，选完之后点创建，就会生成一堆项目基本文件，就有点像这玩意儿，它会为你生成一个开发需要用到的基本环境。这个用于创建基本环境的工具就是脚手架。

你会看到一些诸如TypeScript和测试支持之类的可选功能提示：
在这里插入图片描述
若不确定是否要开启某个功能，直接按回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name> ## 这边是vue-project
npm install
npm run dev

npm ，
全称是Node Package Manager，是一个node.js包管理和分发工具。
包管理工具就是一个轮子工厂，每个人可以上传轮子和下载轮子。
随着用的人增多，如今，npm已经是node.js的内置能力，下载安装node时默认会安装npm，并且会在你电脑的环境变量中添加它。
在这里插入图片描述
所以你在安装node.js后，可以直接在命令行中使用npm相关的命令。
再来看一下上面的两条npm命令，
npm install 和 npm run dev
在这之前，介绍一下npm的实现思路：

  1. 买个服务器作为代码仓库，上面存放共享的代码。
  2. 让开源库作者使用npm命令将代码提交到仓库。
  3. 想使用这些代码的人，就把依赖包的名称写到package.json 里（package.json 用来描述项目及项目所依赖的模块信息），当运行 npm install ，npm 就会帮忙下载代码。
  4. 下载完的代码出现在 node_modules 目录里，可以在项目中随意使用。
     

所以 npm install就是下载package.json中描述的依赖包。
用npm来管理项目时，在项目的根目录下会生成一个package.json文件。
在这里插入图片描述
这个文件里的script字段就是用于适配npm run XXX命令的。
在这里插入图片描述
当我们运行npm run dev命令时，就会去scripts字段里找到dev对应的vite命令去执行。
那么问题来了，这package.json里的配置项，是哪里来的呢？
在上面的命令行截图开始处，还有一句 npm init vue@latest，然后让你选许多选项。
npm init 命令就是帮助我们快速初始化 package.json 文件，执行之后会有一个交互式的命令行让你输入需要的字段值。

Vite
这是一个法语单词"quick"，发音为/vit/，是一种构建工具，旨在为现代Web项目提供更快、更精简的开发体验。

在这里插入图片描述

你现在应该已经运行起来了你的第一个Vue项目！
在这里插入图片描述

请注意，生成的项目中的示例组件使用的是组合式API和<script setup>，而非选项式API。下面是一些补充提示：

  • 推荐的IDE配置是Visual Studio Code + Volar扩展。
  • 关于与后端框架的整合、构建工具Vite背后细节、TypeScript选择，查看官方文档对应章节。

当你准备将应用发布到生产环境时，请运行：

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本，一般包含index.html文件及asserts目录。

2.2. 通过CDN使用Vue

你可以借助script标签直接通过CDN来使用Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

CDN的全称是Content Delivery Network，即内容分发网络，为加快网络访问速度而建立在现有网络之上的分布式网络。
讲人话就是为了能让你快速访问，而在你周围设置了节点，并放上你想要的资源，供你需要时快速访问。
CDN内容分发网络 与如今电商 仓储一样（生鲜、优鲜） 前置仓库 :先将货物从发货地发到生鲜超市，然后再统一派送，CDN也是如此的方式，在你访问资源时，让距离你最近的服务器给你发送你想要的的数据。

这里我们使用了unpkg，但你也可以使用任何提供npm包服务的CDN，例如jsdelivr或cdnjs。当然，也可以下载此文件并自行提供服务。

unpkg 是一个内容源自 npm 的全球快速 CDN。
它部署在 cloudflare上，在大陆地区访问到的是香港节点。 它支持 h/2 和很多新特性，如果不考虑网络延迟的原因，性能优化较为出色。
它能通过URL以快速而简单的方式提供任意包、任意文件 。

通过CDN使用Vue时，不涉及“构建步骤”（相当于你可以从远程引入Vue，<script src=“cdn”>这步相当于把Vue从远程引入了）。这使得设置更加简单，并且可以用于增强静态的HTML或与后端框架集成。但是，无法使用单文件组件（SFC）语法。

2.2.1. 使用全局构建版本

上面的例子使用了 全局构建版本 的Vue，该版本的所有顶层API都以属性的形式暴露在了全局 Vue 对象上。这里有一个使用全局构建版本的例子：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
2.2.2. 使用ES模块构建版本

在本文其余部分，我们使用的主要是ES模块语法。现代浏览器大多都已原生支持ES模块。因此我们可以像这样通过CDN以及原生ES模块使用Vue：

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

注意我们使用了<script type=“module”>，且导入的 CDN URL 指向的是 Vue 的 ES 模块构建版本。

JS的模块化&ES模块

其实这节主要讲ES模块（ES module，简称ESM），但在这之前我们得先了解JS模块化的历史。

在上面1.4.2小节中的import命令处，已经简单介绍了ES标准。这边的ES模块是ES6标准的一部部分。

JavaScript 程序本来很小——在早期，它们大多被用来执行独立的脚本任务，在你的 web 页面需要的地方提供一定交互，所以一般不需要多大的脚本。但经过了一段时间的发展，有了运行大量 JavaScript 脚本的复杂程序，还有一些被用在其他环境（例如 Node.js）。
此时的JS代码膨胀到了需要耗费精力去管理的地步。一个文件，甚至一个函数就有成百上千行的代码，这是程序员不想看到的。于是，需要将它们模块化。模块化是将复杂代码按照功能不同拆分成不同模块单独维护从而提升效率降低维护成本。模块化是一种思想。
根据模块化思想，诞生了多种模块化规范，CommonJS、AMD、CMD等。而这边提到的ES，也是一种规范，它在语言层面上实现了模块功能（即可以在JS语言中通过它提供的语法来进行模块化），且实现简单，可以替代CommonJS和AMD规范，成为在浏览器和服务器通用的解决方案。

在给script标签加上type=module后，可以以ES Module的规范运行其中的代码，它有几个特性：
  1. 给script标签添加type=module之后默认启用严格模式
    <script type="module">
    console.log(this); //undefined
    </script>
  2. 每个ES Module都有自己独立的作用域，与外界互不干扰
    <script type="module">
    var foo = 100
    console.log(foo)
    </script>
  3. ES Module的外部JS通过CORS方式请求的，需外部文件支持CORS请求
    外部文件支持CORS，则请求成功；否则，报跨域错误
  4. ES Module引用的文件会延迟执行
    <script type="module" src="./index.js"> 等价于 <script defer src="./index.js">
  5. 除了这些之外，它还有许多特性，后面遇到时再介绍。
2.2.3. 启用Import maps

在上面的示例中，我们使用了完整的CDN URL来导入，但在文档的其余部分中，你讲看到如下代码：

import { createApp } from 'vue'

我们可以使用导入映射表（Import Maps）来告诉浏览器如何定位到导入的 vue：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
ℹ导入映射表的浏览器支持情况
目前只有基于Chromium的浏览器支持导入映射表，所以推荐在学习过程中使用Chrome或Edge。
2.2.4. 拆分模块

随着对这份指南的逐步深入，我们可能需要将代码分割成单独的JavaScript文件，以便更容易管理。例如：

<!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>


// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}
export default

前面说过，使用export导出模块内的成员时，需要指定具体的成员名称；同样，加载时需要根据导出的具体名称进行加载。

这里的export default是一种快捷的导出方式，它为模块指定默认导出，且每个模块只能使用一次export default。因为默认导出很常见，这边逐一介绍它的特性。

  1. 导出匿名成员时，使用任意变量接受成员
    // module.js
    export default function(a, b) {
    return a + b;
    }
    // app.js
    import add from "./module.js";
    console.log(add(1, 2));
     因为使用export导出成员时是匿名的，所以在导入时并不知道成员名称是什么，这时可以随意写变量去接收这个匿名成员，案例中使用add接收的匿名函数，也可以使用其他名称接收。
    总结：export default也可以导出具体名称成员，但效果和导出匿名成员是一样的。使用export default导出成员，在外部加载时都视为匿名成员加载，可以随意起变量名接受。
  2. 同时导入其他模块的默认成员和具体名称成员时
    // module.js
    var name = 'jack';
    var age = 19;
    export { name, age }
    // 导出默认成员
    export default 'default export'
    // app.js
    import str, {name, age} from "./module.js";
    或
    import {name, age, default as str} from "./module.js"
    console.log(str); // default export
    console.log(name); // jack
    console.log(age); // 19
  3. 另类的默认导出
    // module.js
    var number = 1;
    export { number as default } 等同于 export default number;
    // app.js
    import { default as number } from "./module.js"
    console.log(number); // 1
     总结：可见export default的本质就是导出一个名称为default的成员，当导出的成员叫default时，接收这个成员可随意命名
  4. 使用export default来导出类
    // Person.js
    export default class Person(){
    ...
    }
    // main.js
    import Person from "./Person.js";
    const person = new Person();
  5. 比较默认输出和正常输出
    // 1. 默认输出
    export default function add(a, b) {
    return a + b;
    }
    // 接收默认输出
    import temp fron "./module.js"
    // 2. 具名输出
    function add (a, b) {
    return a + b;
    }
    export {add}
    // 接收具名输出
    import {add} from "./module.js"
     总结：使用默认导出，在接收成员时，不需要使用大括号；使用具名输出，在接收成员时，import后需要使用大括号

若直接在浏览器中打开上面的index.html，你会发现它抛出了一个错误，因为ES模块不能通过file://协议工作。
在这里插入图片描述
为了使其工作，你需要使用本地HTTP服务器通过http://协议提供 index.html。

要启动一个本地的HTTP服务器，请先安装 Node.js，然后从命令行在HTML文件所在文件夹下运行 npx serve。你也可以使用其他任何可以基于正确的MIME类型服务静态文件的HTTP服务器。

可能你注意到了，这里导入的组件模板是内联的JS字符串。如果你正在使用VSCode，你可以安装es6-string-html扩展，然后在字符串前打上一个前缀注释 /*html*/以高亮语法。

2.2.5. 无需构建的组合式API用法

组合式API的许多示例将使用<script setup>语法。如果你想在无需构建的情况下使用组合式API，参阅 setup()选项。

三、临时结尾

到这里，对Vue的环境、大致语法、风格应该有一个简单认识的了。
但肯定还会存在很多疑问，尤其是本文的后半部分，Vue的构建工具、开发环境、模块等。但没关系，一开始纠结太多，反而不好深入下去。现在是时候开始学习Vue的基础内容了。这些未知的点，在基础学习过程中遇到，再进行研究。

JS中的括号

文章的最后来对JS中的括号做一个简单学习，作为一个JS小白，在看到JS中各种括号的各种用法后，觉得非常乱。一一介绍也没必要，就针对本文中出现的几种大中小括号使用场景，进行分析吧。

结论：{}是对象；[]是数组。
{}
  1. 选项中的大括号 
    					data() {
						return {
						count: 0
						}
					}
    Vue中所有数据源都放在data中（所有的方法、其它选项和页面上可以获取到的data中的数据）
MelonSuika
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
10-16
主要介绍了vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue组件库
08-10
vue组件库
vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应
银鞍照白马的博客
10-22 9728
如图所示，这是一个大屏项目的3d轮播图效果，下面跟着我来详细实现这个轮播效果。官网地址：https://wlada.github.io/vue-carousel-3d/ 如图所示，这是轮子工厂里面的vue-carousel-3d插件中的一些参数，文档。可以参考。地址：轮子工厂 安装 npm install -S vue-carousel-3d 调用 1、全局注册，main.js import Vue from 'vue' import Carousel3d from 'vue-carousel-3d.
vue 大量图片展示_Vue的手风琴组件--优雅的展示图片以及文字的方式
weixin_39581318的博客
12-21 351
这是今天看到的一个不错的vue组件。感觉用来做首页图片和文字的展示，或者是宣传网站对产品的不同特性的展示都是一个很生动的展现方法。vue-accordion的设计风格和轮播图类似。它可以支持用户自定义样式类。安装通过NPM安装npm install vue-accordion将它引入到你的应用中import Vue from 'vue'import {vueAccordion} from 'vue...
Vue学习-安装Vue环境
云上道人的博客
09-27 966
Vue环境搭建
Vue基础—模板语法
白衣羽扇的博客
01-29 86
vue模板语法
vue 插件 你可能需要的轮子 集合
南思琼海
01-16 1308
第一波连接 轮子工厂 vue http://www.wheelsfactory.cn/#/home?filter=vue 移动端 -- 控制台 vConsole https://github.com/Tencent/vConsole/tree/1eef3bee16ead445cec0264a1111e0912bf1265b
推荐一个vue的组件分享网站--轮子工厂
wjswangjinsheng的博客
06-17 1767
推荐一个优秀轮子的网站—轮子工厂，一直在持续更新的组件分享网站。这里提供vue和angular的组件，同时还分享一些优秀的组件库。这里的每个组件都有比较详细的安装，使用说明，实例和参数列表等。可以很方便的引入组件到你的应用中使用。 网站:轮子工厂 ...
前端轮子厂
weixin_43837268的博客
04-28 2155
1. Element Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。 中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/elem...
推荐一个vue, angular的组件分享网站--轮子工厂
Ashley的猫
07-08 7433
造轮子还是找轮子，似乎一直是开发过程中总会碰到的问题。以学习为目的的造轮子还是好的，不仅是一个不错的学习过程，而且也可以和已有的组件比较一下，对技术理解也会提高。但是在实际的项目，还是建议尽量寻找优秀的轮子，这样不仅可以提高开发效率，而且优秀的轮子也可以降低出现bug的风险。可是好轮子去哪里找呢，尤其是对于新出现的前端框架，比如vue, angular这些流行的前端框架，如果要去github上翻找大
vue百度分享组件-移动版
02-25
vue百度分享组件-移动版，有详细说迷宫文档，方便操作，拿来即用
VUE 3D轮播图封装实现方法
08-27
主要为大家详细介绍了VUE 3D轮播图封装实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端开发Vue基础篇：Day01 初识Vue.pdf
11-08
前端开发Vue基础篇Day01资料文档
Vue.js 实战.pdf
06-21
第1章 初识Vue.js 第2章 数据绑定和第一个Vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置指令 第6章 表单与v-model 第7章 组件详解 第8章 自定义指令 第9章 Render函数 第10章 使用webpack 第...
初识 Vue.js 中的 *.Vue文件
11-27
什么是Vue.js？ vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过...
Web前端框架应用：第1章 Vue基础入门-概述.pptx
06-06
第1章 Vue基础入门;学习目标;目录;知识架构;知识架构;知识架构;知识架构;... CSS：CSS样式包括颜色、大小、字体等，布局合理的页面效果。...JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，...1.1 初识Vue
Web前端框架应用：第5章 Vue路由-编程导航.pptx
06-06
第5章 Vue路由 初识路由 用户登录注册案例 嵌套路由 命名视图 vue-router 动态路由 命名路由 编程式导航 学习目标 目录 目录 知识架构 5.1 初识路由 知识架构 5.2 vue-router 知识架构 5.3 用户登录注册案例 知识...
Vue轮子-Lottie-动画实现
U R My Sunshine
07-01 482
挖坑。先工作。有空写。airbnb出品的动画实现方式。https://airbnb.design/lottie/
用vue写轮子的一些心得（一）——button组件、input组件、栅格布局组件
阿嚏乱码的地方
12-30 610
组件传值校验 通过validator属性检查器检测父组件向子组件传值，可进行初步初步筛选，只允许规定的值传入，倘若传错则提示报错。 props:{ icon:{}, iconPosition:{ type: String, default: 'left', ...
document.getElementById("app").__vue__.$QctcHttp
最新发布
01-31
根据提供的引用内容，`document.getElementById("app").__vue__.$QctcHttp` 是一个 JavaScript 表达式，它通过 `document.getElementById("app")` 获取到 id 为 "app" 的元素，然后通过 `.__vue__` 获取到该元素的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值