一篇文章带你了解网页框架——Vue简单入门 _生活百科

一篇文章带你了解网页框架——Vue简单入门这篇文章将会介绍我们前端入门级别的框架——Vue的简单使用
如果你以后想从事后端程序员，又想要稍微了解前端框架知识，那么这篇文章或许可以给你带来帮助

温馨提醒：在学习该文章前，请先学习HTML，CSS，JavaScript ， Ajax等前端知识

Vue基础首先，我们从官方文档中可以得到下述描述：

Vue是一套用于构建用户界面的渐进式框架。
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

其中我们需要格外注意的是：

Vue只负责前端页面的设计，并不能完全实现前端的所有功能

Vue主要特点：

采用JavaScript框架
简化Dom操作
响应式数据驱动

VsCode插件推荐在正式开始介绍Vue之前，我想向大家安利一个VsCode插件——Live Server

文章插图
Live Server 插件可以同步代码和网页的更新：

当你保存代码时，你的页面将会同步进行刷新，省略了手动点击页面的步骤，在开发中提供便利

Vue代码框架首先我们需要学会Vue的基本使用

导入相关包

<!--Vue为我们提供了两个版本 ， 我们通常采用开发环境版本，具有检错功能便于学习--><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

基本框架使用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue基础</title></head><body><!--首先我们创建一个div，并绑定id为app--><div id="app"><!--我们采用{{}}来调用相关Vue中的data中存放的数据-->{{ message }}</div><!-- 导入vue：开发环境版本，包含了有帮助的命令行警告 --><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><!--书写js代码--><script><!-- 以下为vue基本框架 new Vue({el,data,method})-->var app = new Vue({<!--el实现挂载点-->el:"#app",<!--data存放相关数据-->data:{<!--数据属性-->message:" 你好 小黑! "}})</script></body></html>

EL挂载点介绍学习过Vue的基本使用后，我们先对EL挂载点做出最基本的介绍：

EL挂载点负责设置页面中属性与Vue属性的连接
EL挂载点设置后，页面属性可以调用Vue中的数据（data）和方法（method）

EL挂载点注意点：

Vue的作用范围在EL挂载点的本体元素以及后代元素中
Vue的EL挂载点可以依赖于各种选择器，例如类选择器等，但推荐使用ID选择器
Vue的EL挂载点不可以作用在HTML和BODY两个页面最大元素上

我们给出简单示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>el:挂载点</title></head><body id="body"><!--这里的{{ message }}不会有所显示，因为未与Vue连接-->{{ message }}<h2 id="app" class="app"><!-- 这里的{{ message }}会显示，因为属于Vue连接本体-->{{ message }}<!-- 这里的{{ message }}会显示 ， 因为属于Vue连接后代元素--><span> {{ message }} </span></h2><!-- 开发环境版本 ， 包含了有帮助的命令行警告 --><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({// 以下均可使用，// el:"#app",// el:".app",// el:"div",// body无法连接el:"#body",data:{message:"秋落"}})</script></body></html>

Data数据对象介绍学习过Vue的基本使用后，我们对Data做出最基本的介绍：