百度360必应搜狗淘宝本站头条
分布式事务框架grpc框架shiro框架java日志框架框架图
当前位置：网站首页 > 技术文章 > 正文

前端框架VUE——安装及初始化（vue前端架构设计）

ccwgpt 2024-10-27 08:46 26 浏览 0 评论

本篇文章适合，想要学习 vue，但对 vue 又没有接触过的同学阅读，是非常基础的内容。告诉大家使用 vue 时的安装方式，及如何创建实例，展示内容。

一、安装方式

vue 是一种前端框架，所以使用前我们必须安装，有三种安装方式分别为：

1.1、使用 script 标签引入

在 vue 官方文档，我们可以下载开发版本和生产版本两个 js 文件，生产版本是经过压缩，删除注释，警告等，比开发版本文件要小，下载之后直接通过 script 标签引入，Vue 会被注册为一个全局变量。

//使用
<script src="static/js/vue.js"></script>

1.2、CDN

使用 cdn 方式引入 vue.js 文件，与上述 script 标签引入是类似的，使用 cdn 引入需要注意引入文件的版本号，建议链接到一个明确的版本号和构建文件，避免新版本造成影响。

//使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

1.3、NPM

vue 构建大型应用项目时，推荐使用 npm 安装，因为 npm 能很好的和 webpack 或 browserify 模块打包器配合使用，同时 vue 也提供配套工具来开发单文件组件。

什么是脚手架？

vue 提供了一个官方的 cli，为单页面应用(SPA)快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。

使用 npm 安装 vue 之前，需要先安装 node.js 环境。

// 安装语法
npm install vue

1.4、Bower

# 最新稳定版本
$ bower install vue

二、初始化

突然想起一个特别有意思的话，程序员遍地都是对象，唯独我没有对象。听起来特别扎心的一句话，作为程序媛的妹子之前也有过这种苦恼，不过我还是要告诉你一句，缘分未到，静待缘来！

vue实例化的时候，与我们面向对象的实例是一样的，想看《面向对象》的，可自行翻看下。

创建一个 vue 实例，代码如下：

var vm = new Vue({
	el:'#app',
  data(){
   //定义数据
  }
})

vm 是（ViewModel）的缩写，表示 Vue 的实例。

实例化时，可传入一个选项对象，选项对象中可以加入很多选项。

el 是用于挂载要管理的元素，el之外的元素不会被vue解析。

data 用于定义绑定到元素的数据。

三、第一个 vue 页面

做一个简单的 hello world 页面，我们使用cdn方式引入vue。具体实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Document</title>
</head>
<body>
 <div id="app">{{msg}}</div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  let app = new Vue({
  el:"#app",
  data(){
   return{
    msg:'hello world'
   }
  }
 })
 </script>
</body>
</html>

打开网页，正常运行，显示 hello world。

3.1、如果我们继续给div添加一个兄弟节点，继续展示 msg 数据，如：

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

运行结果如图：

此时我们发现 {{msg}} 并没有被解析，直接原样输出。是因为，el 挂载要管理的元素，而后边的 div 没有在管理元素内，所以直接输出了，并没有解析内容。

值得注意的是，开发时，需要解析的内容都要放到被挂载管理的元素内。

相关推荐

如何使用PIL生成验证码?（pi验证教程）

web项目中遇到使用验证码的情况有很多，进行介绍下使用PIL生成验证码的方法。安装开始安装PIL的过程确实麻烦各种问题层出不绝，不过不断深入后就没有这方面的困扰了：windows安装：直接安装Pil...

Python必学!3步解锁asyncio异步编程 性能直接狂飙10倍!

还在用传统同步代码被IO阻塞卡到崩溃？别当“代码苦行僧”了！Python的asyncio模块堪称异步编程的“开挂神器”，处理高并发任务就像开了涡轮增压！不管是网络爬虫、API接口开发还是文件批量处理，...

Tornado6+APScheduler/Celery打造并发异步动态定时任务轮询服务

定时任务的典型落地场景在各行业中都很普遍，比如支付系统中，支付过程中因为网络或者其他因素导致出现掉单、卡单的情况，账单变成了“单边账”，这种情况对于支付用户来说，毫无疑问是灾难级别的体验，明明自己付了...

Python学习怎么入门?附真实学习方法

Python技术在企业中应用的越来越广泛，因此企业对于Python方面专业人才的需求也越来越大，那对于之前对Python没有任何了解和接触的人而言，想要从零开始学习并不是一件容易的事情，接下来小U就为...

PySpider框架的使用（pyspider 教程）

PysiderPysider是一个国人用Python编写的、带有强大的WebUI的网络爬虫系统，它支持多种数据库、任务监控、项目管理、结果查看、URL去重等强大的功能。安装pip3inst...

大学计算机专业 学习Python学习路线图(最新版)

这是我刚开始学习python时的一套学习路线，从入门到上手。（不敢说精通，哈哈~）希望对大家有帮助哈~大家需要高清得完整python学习路线可以【文末有获取方式】【文末有获取方式】一、Python入门...

阿里巴巴打造的400集Python视频合集免费学起来，学完万物皆可爬

第一阶段Python入门章节1：Python入门章节2：编程基本概念章节3：序列章节4：控制语句章节5：函数章节6：面向对象编程第二阶段Python深入与提高章节1：异常处理章节2：游戏开发-坦克大...

Nginx Gunicorn在服务器中分别起什么作用

大部分人在gunicorn前面部署一层nginx的时候也的确没有想过为什么，他们只是觉得这样显得他们比较专业，而且幻想着加了一层nginx反向代理之后性能会有提升，恕我直言，请你们带上脑子，一个单纯的...

Python培训怎么学?Python基础技术总结!值得一看

Python培训如今越来越被更多人所接受，相比自学参加Python培训的好处也是显而易见，但Python毕竟属于后端编程开发的主流语言，其知识机构还是比较庞大的，那Python培训怎么学?以及Pyth...

使用Tornado部署Flask项目（tornado async）

Tornado不仅仅是一个WEB框架，也可以是一个WEB服务器。在Tornado中我们可以使用wsgi模块下的WSGIContainer类运行其他WSGI应用如：Fask,Bottle,Djang...

Python Web框架哪个好用?（python3 web框架）

　　问：PythonWeb框架哪个好用？　　答：　　1．Django　　Django是Python世界中最出名、最成熟的Web框架。Django功能全面，各模块之间结合紧密，（不讲其他的）Djang...

Vue3.0+Tornado6.1发布订阅模式打造异步非阻塞实时=通信聊天系统

“表达欲”是人类成长史上的强大“源动力”，恩格斯早就直截了当地指出，处在蒙昧时代即低级阶段的人类，“以果实、坚果、根作为食物；音节清晰的语言的产生是这一时期的主要成就”。而在网络时代人们的表达欲往往更...

Python开源项目合集(第三方平台)（python第三方开发工具）

wechat-python-sdk-wechat-python-sdk微信公众平台Python开发包http://wechat-python-sdk.readthedocs.org/，非官方...

IT界10倍高效学习法!用这种方式，一年学完清华大学四年的课程

有没有在某一个瞬间，让你放弃学编程刚开始学python时，我找了几十本国内外的python编程书籍学习后，我还是似懂非懂，那些书里面到处都是抽象的概念，复杂的逻辑，这样的书，对于专业开发者来说，在平常...

如何将Python算法模型注册成Spark UDF函数实现全景模型部署

背景Background对于算法业务团队来说，将训练好的模型部署成服务的业务场景是非常常见的。通常会应用于三个场景：部署到流式程序里，比如风控需要通过流式处理来实时监控。部署到批任务中部署成API服...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表