经验总结

  1. 首页 > 生活 > >

一篇文章带你了解网页框架——Vue简单入门

生活百科

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

温馨提醒：在学习该文章前，请先学习HTML，CSS，JavaScript，Ajax等前端知识
Vue基础首先，我们从官方文档中可以得到下述描述：
  • Vue是一套用于构建用户界面的渐进式框架 。
  • Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 。
  • 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动 。
其中我们需要格外注意的是：
  • Vue只负责前端页面的设计，并不能完全实现前端的所有功能
Vue主要特点：
  • 采用JavaScript框架
  • 简化Dom操作
  • 响应式数据驱动
VsCode插件推荐在正式开始介绍Vue之前，我想向大家安利一个VsCode插件——Live Server
一篇文章带你了解网页框架——Vue简单入门

文章插图
Live Server 插件可以同步代码和网页的更新：
  • 当你保存代码时，你的页面将会同步进行刷新，省略了手动点击页面的步骤，在开发中提供便利
Vue代码框架首先我们需要学会Vue的基本使用
  1. 导入相关包
<!--Vue为我们提供了两个版本，我们通常采用开发环境版本，具有检错功能便于学习--><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>
  1. 基本框架使用
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({// 以下均可使用，// el:"#app",// el:".app",// el:"div",// body无法连接el:"#body",data:{message:"秋落"}})</script></body></html>

经验总结扩展阅读


上一篇：2023年2月9日拜观音黄道吉日 2023年农历正月十九宜拜观音吗

下一篇：2023年农历正月十九宜求神拜佛吗 2023年农历正月十九求神拜佛吉日