前言:这一章主要是vue的介绍、安装、以及如何创建一个vue实例。

一、vue介绍

vue3中文官网:建议先自己看官网。

https://v3.cn.vuejs.org/

vue是渐进式框架,渐进式指的就是可以在你的项目已经有js,jquery等框架后还可以嵌入vue框架。可以只用我的一部分,而不是一个项目必须全部由我开发。

安装

将 Vue.js 添加到项目中主要有四种方式:

1.以 CDN 包的形式导入。

<script src="https://unpkg.com/vue@next"></script>

那么cdn是什么?

CDN 是vue文件在线上的地址。例如https:.../vue..

我们在访问项目时,首先通过域名找到服务器的ip(一台电脑/服务器),看看你的项目是什么web框架(例如django),然后找到分配的路由,然后就找到了vue.js文件。所以说是要有一个过程的,那么cdn的作用就是加速这个过程。

CDN能够加速用户的访问速度

我们的服务器分为华南、华北等几个区域,如果用户是华北区的,那么要访问华北区的服务器比较快,当用户第一次访问华北区的服务器,那么服务器会把数据缓存在华北(边缘)服务器上,访问项目慢实际是访问项目资源(图片、视频等)的快慢。那么下一个人访问的时候直接读取这个华北服务器的缓存,所以访问速度会加快。

2.下载 js 文件并自行托管

官网没有给出js下载地址。我们可以把上边的cdn在线地址放到浏览器运行,ctrl+s保存就是vue.js.

https://unpkg.com/vue@next

或者在我上传的资源里去找。

实际上还是本地加载比线上要快很多。下载下来放到js里引入即可。

3.使用 npm 安装它。

这个我们暂时不用。应用大型项目可以用npm。

有空再写。可在我的vue专栏看到这篇。

4.使用官方的 CLI 来构建一个项目。

它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。

有空再写。可在我的vue专栏看到这篇。

使用vue开发的好处

1.因为vue采用渐进式框架结构,MVVM(model view viewmodel),数据层与视图层分离,(响应式框架)通过vm把数据层的数据渲染到指定的标签里面。

2.响应式框架,数据层与视图层分离,数据层数据变了,视图层的渲染就变了,减少了dom操作,增加了页面加载速度。

3.组件化开发。

简洁来说就是:体积小,数据双向绑定,有很多成熟的组件。

二、基础

1.创建vue实例

步骤:

1)下载并引入vue.js

2)body里创建id=app 的div

3)Script 里面创建vue实例,关联容器,Vue.createApp({}).mount('#app')

数据层:

​ const data = { a: 1 }

视图层:

​ const app={

​ data() {

​ return data

​ },

​ }

创建vue实例:

​ const vm =Vue.createApp(app)

关联app容器

​ vm.mount('#app')

或者合起来写:

​ const data = { a: 1 }

​ const vm = Vue.createApp({

​ data() {

​ return data

​ }}).mount('#app')

运行模板:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.global.js"></script>
</head>
<body >
<div id="app">
Hello Vue
</div>
</body>
<script type="text/javascript">
const data = { } const vm = Vue.createApp({
data() {
return data
}, })
vm.mount('#app') </script>
</html>

vue3官网介绍,安装,创建一个vue实例的更多相关文章

  1. 创建一个vue实例

    创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...

  2. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  3. 创建第一个vue实例

    一.vue安装与下载 1. 官网下载  下载地址 选择开发版本 2. 打开sublime,新建vue文件夹,将下载好的代码vue.js放入vue文件夹中. 3. 新建index.html文件,在hea ...

  4. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

  5. 前端框架之Vue(1)-第一个Vue实例

    vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...

  6. 照着官网来安装openstack pike之创建并启动instance

    有了之前组件(keystone.glance.nova.neutron)的安装后,那么就可以在命令行创建并启动instance了 照着官网来安装openstack pike之environment设置 ...

  7. go语言,golang学习笔记1 官网下载安装,中文社区,开发工具LiteIDE

    go语言,golang学习笔记1 官网下载安装,中文社区,开发工具LiteIDE Go语言是谷歌2009发布的专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速 ...

  8. PyCharm 2017 官网 下载 安装 设置 配置 (主题 字体 字号) 使用 入门 教程

    一.安装 Python 3.6 首先,要安装好 Python 3.6.如果你还没有安装,可以参考咪博士之前的教程 Python 3.6.3 官网 下载 安装 测试 入门教程 (windows) 二.官 ...

  9. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

随机推荐

  1. 【PS】证件照转换背景色

    证件照转换背景色 2019-07-14  12:18:49  by冲冲 1. 需求 自由切换证件照的背景颜色(白底.蓝底.红底...) 2. 步骤 ① 双击 图层锁 解锁,弹出的"新建图层0 ...

  2. 直接插入100w数据报错

    ### Cause: com.mysql.cj.jdbc.exceptions.PacketTooBigException: Packet for query is too large (77,600 ...

  3. 多线程03.实现Runnable接口

    package chapter2; public class TicketWindowRun implements Runnable { private static final int MAX =5 ...

  4. Go语言核心36讲(Go语言实战与应用十八)--学习笔记

    40 | io包中的接口和工具 (上) 我们在前几篇文章中,主要讨论了strings.Builder.strings.Reader和bytes.Buffer这三个数据类型. 知识回顾 还记得吗?当时我 ...

  5. 探索JavaScript执行机制

    前言 不论是工作还是面试,我们可能都经常会碰到需要知道代码的执行顺序的场景,所以打算花点时间彻底搞懂JavaScript的执行机制. 如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发 ...

  6. ceph简单了解

    ceph简介 ceph是一个统一的分布式存储系统,设计初衷是提供较好的性能.可靠性和可扩展性. 目前已经得到众多云计算厂商的支持并被广泛应用.RedHat及OpenStack都可以与Ceph整合以支持 ...

  7. R语言与医学统计图形-【9】过渡函数qplot

    ggplot2绘图系统 基础绘图包向ggplot2过渡--qplot 绘图理念的不同: 基础绘图包是先铺好画布,再在这张画布上作图(常规思维): ggplot2打破常规,采用图层叠加的方法. qplo ...

  8. EXCEL-时间

    1.时间的3中输入方法: (1)手打输入: (2)快捷键:[快,方便,且结果跟手打一样,不会改变][Ctrl+;]->年月日    [Ctrl+:]->时分秒(我这里是这样的效果) (3) ...

  9. Android系统编程入门系列之硬件交互——多媒体麦克风

    在多媒体摄像头及相关硬件文章中,对摄像头的使用方式需要区分应用程序的目标版本以使用不同的代码流程,而与之相比,麦克风硬件的使用就简单多了. 麦克风及相关硬件 麦克风硬件在移动设备上作为音频的采集设备, ...

  10. 基于树莓派部署 code-server

    code-server 是 vscode 的服务端程序,通过部署 code-server 在服务器,可以实现 web 端访问 vscode.进而可以达到以下能力: 支持跨设备(Mac/iPad/iPh ...