懂一点前端—Vue快速入门

Vue 是一个渐进式框架,以数据驱动和组件化构建,易上手且文档友好。本文介绍了Vue的基础,包括MVVM模式、Vue实例、条件渲染指令(v-if/v-show)、列表渲染(v-for)和事件处理(v-on)。通过示例和简单Todo-List应用,阐述了Vue的使用方法。
摘要由CSDN通过智能技术生成

01. 什么是 Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以 数据驱动和组件化 的思想构建的。

MVVM 模式简述

下图不仅概括了 MVVM 模式 (Model-View-ViewModel),还描述了在 Vue.js 中 ViewModel 是如何和 View 以及 Model 进行交互的。

ViewModel 是 Vue.js 的核心,它是一个 Vue 实例。Vue 实例是作用于某一个 HTML 元素上的,这个元素可以是 HTML 的 body 元素,也可以是指定了 id 的某个元素。

当创建了 ViewModel 后,双向绑定是如何达成的呢?

首先,我们将上图中的 DOM ListenersData Bindings 看作两个工具,它们是实现双向绑定的关键。

  • 从 View 侧看,ViewModel 中的 DOM Listeners 工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
  • 从 Model 侧看,当我们更新 Model 中的数据时,Data Bindings 工具会帮我们更新页面中的 DOM 元素。

库和框架的区别

在这里我们需要稍微注意一下前端 库(Library)框架(Framework) 的区别,它们的本质都是某人编写的,用于解决常见问题的 可复用代码 的集合。

比如,你有一个处理字符串的程序,你为了保持代码的 DRY (Don’t Repeat Yourself),你编写了如下可复用的功能代码:

function getWords(str) {
   
   const words = str.split(' ');
   return words;
}
function createSentence(words) {
   
   const sentence = words.join(' ');
   return sentence;
}

恭喜你,你创建了一个 JavaScript 库!

如果我们用 「构建房子」 来类比 「构建应用」 的话,那么 使用库 就像是 去宜家购物 一样,我已经有了一个家,现在我需要挑选自己喜欢的一些家具,以达到我自己满意的状态,这一切 都在我的控制范围之内;而 使用框架 就会像是已经有了一个 清装房,在已经规划好的蓝图和选择之中,我们的一些想法会显得十分地有限。

Vue.js 本身只是一个 JavaScript 库,包括 React 也一样,只不过平时我们所说的 Vue 框架,是指包含 Router/ Vuex 等一系列组件之后融合的 一整套解决方案

更加详细的解释如下:

  • 「库」 是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权完全在于使用者本身;
  • 「框架」 顾名思义是一套架构,会基于自身的特点向用户提供一套比较完整的解决方案,如果使用者选定了一套框架,那么就需要根据框架本身做出一定的适应。

02. 为什么使用 Vue?

说实话,我个人非常喜欢 Vue。在我大学刚尝试学习 HTML + CSS + JavaScript 和 Bootstrap 融合之后,我就接触了 Vue,它对我来说这样的「前端小白」来说,几乎没有什么开发的门槛,很平滑地就得以过渡到 Vue 的使用中去。

典型的 .vue 文件可以简单成如下的样子:(vue-tutorial/typical-case.html)

<template>
	<!-- HTML 代码 -->
</template>

<script>
	// JavaScript 代码
</script>

<style>
	/* css 代码 */
</style>

另外我也非常喜欢尤大大本人,大家可以去看一看 Honeypot 记录的关于 Vue 的 纪录片 (趁着写文的间隙我又看了一遍),当然如果英文有些吃力也可以围观一下在 B 站上的 带中文字幕的版本

B 站翻译版本截图

Vue 从一开始的定位就是尽可能的降低前端开发的门槛,让更多的人能够更快地上手开发。———— 尤雨溪

理由一:易上手、学习曲线平滑

就像上面的典型 .vue 文件的展示一样,在 Vue 中,一切都很自然,例如我们使用 Vue 来构建我们的 Hello World 程序:(vue-tutorial/hello-vue.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue!</title>
</head>
<body>
<div id="app">
    {
  { message }}
</div>

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 创建一个 Vue 实例或者说是 VieModel 实例
    var app = new Vue({
    
        el: 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值