vue介绍和使用

0f17b27fc8b0436ca1a4bd7b79deb389.gif一、vue介绍

 

  vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 

 

1、渐进式的JavaScript框架

复制代码

          Angular React Vue

作者 google公司 facebook公司 尤雨溪

组织方式 MVC 模块化 模块化

数据绑定 双向绑定 单向绑定 双向绑定

模板能力 强大 自由 自由

自由度 较小 大 较大

路由 静态路由 动态路由 动态路由

复制代码

2、前端框架和库的区别

(1)功能上的不同

  jquery库:包含DOM(操作DOM)+请求,就是一块功能的实现。

 

  art-template库:模板引擎渲染,高性能的渲染DOM。

 

  框架:大而全的概念,简易的DOM体验+请求处理+模板引擎。

 

  在KFC的世界来看的话,库就是一个小套餐,框架就是全家桶。

 

(2)代码上的不同

  一般使用库的代码,是调用某个函数或者使用抛出来的对象,我们自己处理库中的代码。

 

  一般使用框架,框架本身提供好的成套的工具帮我们运行我们编写好的代码。

 

(3)框架的使用

  1)初始化自身的一些行为;

 

  2)执行你所编写的代码;

 

  3)释放一些资源。

 

3、关于渐进式和自底向上增量开发

  我们来看一下知乎的回答:知乎回答

 

  总的来说,它给你提供足够的optional,但并不主张很多required。

 

  我们常说:做减法比做加法难。我觉得一个框架如果是“渐进式”的,就意味着,它本身承担了较难的做减法的部分,而留给它的使用者较简单的做加法的部分。

 

  就是说,在我们用一个工具的时候,并不是为了用其中的某一个部分,而想办法无视或者裁剪掉其他部分(做减法),而是上手就可以用上它的大多数功能,再在需要的时候引入它的官方或第三方插件(做加法)。

 

二、vuejs的优点

1.易用

 

  已经会了 HTML、CSS、JavaScript?即刻阅读指南开始构建应用!

 

2.灵活

 

  不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。

 

3.高效

 

  20kB min+gzip 运行大小

      超快虚拟 DOM (虚拟dom的渲染速度要比我们真实的dom渲染速度快)

      最省心的优化

 

  虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。这句话,也许过于抽象,却基本概况了虚拟DOM的设计思想

 

  (1) 提供一种方便的工具,使得开发效率得到保证

 

  (2) 保证最小化的DOM操作,使得执行效率得到保证

 

三、vue的使用

1、安装

(1)兼容性

  Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

 

(2)Vue Devtools插件

  在使用 Vue 时,推荐在浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

 

(3)直接用<script>引入(推荐新手使用)

  直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

 

  下载可以选择去npm下载或者去vue官网下载并引入:

 

  

 

(4)cdn引入

  我们推荐链接到一个你可以手动更新的指定版本号:

 

1

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

  可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

 

  Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。

 

  确认了解不同构建版本并在你发布的站点中使用生产环境版本,把 vue.js 换成 vue.min.js。这是一个更小的构建,可以带来比开发环境下更快的速度体验。(开发环境使用vue.js,生产环境使用vue.min.js)

 

2、引入vue.js文件

  这里是开发环境,因此选用vue.js。

 

复制代码

<body>

    <!--1.先引包-->

    <!--<script src="js/vue.js"></script>-->

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

    <script type="text/javascript">

 

    </script>

</body>

复制代码

  引入vue.js文件后,Vue被注册为一个全局的变量,是一个构造函数。在网站控制台查看:

 

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/666954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OJ_找位置

题干 代码 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<vector> #include<algorithm> #include<map> using namespace std;int main() {char str[200] { 0 };scanf("%s", str);map<char, vector<int>> times…

openlayers加载天地图

申请天地图key 官方&#xff1a;https://www.tianditu.gov.cn/ 申请key&#xff1a;https://sso.tianditu.gov.cn/login?servicehttps%3A%2F%2Fconsole.tianditu.gov.cn%2F 进去之后&#xff0c;先登录&#xff0c;如果没账号先注册一个就行。 可以创建个应用&#xff0c;…

如何将图片提取文字转换成文字?3个方法帮你转换

如何将图片提取文字转换成文字&#xff1f;在日常生活中&#xff0c;将图片中的文字转换成可编辑的文本可以带来很多便利。例如&#xff0c;我们可以使用OCR技术将书籍或报纸上的文章转换成电子文本&#xff0c;方便阅读和编辑。此外&#xff0c;将名片、菜单、广告等物品上的文…

政安晨的AI笔记——Bard大模型最新提示词创作绘画分析

AI大模型进入商业应用元年后的第一年&#xff0c;顶级模型大混战终于开始了。 Bard在追赶OpenAI的过程中&#xff0c;还是补上了画图的短板。 &#xff08;相比于视频的5阶张量处理而言&#xff0c;图画做为4阶张量处理虽然不新鲜&#xff0c;但却是跨不过去的基础条件&#…

LLM(5) | Encoder 和 Decoder 架构

LLM(5) | Encoder 和 Decoder 架构 文章目录 LLM(5) | Encoder 和 Decoder 架构0. 目的1. 概要2. encoder 和 decoder 风格的 transformer (Encoder- And Decoder-Style Transformers)原始的 transformer (The original transformer)编码器 (Encoders)解码器 (Decoders)编码器和…

【退役之重学前端】vite, vue3, vue-router, vuex, ES6学习日记

学习使用vitevue3的所遇问题总结&#xff08;2024年2月1日&#xff09; 组件中使用<script>标签忘记加 setup 这会导致Navbar 没有暴露出来&#xff0c;导致使用不了&#xff0c;出现以下报错 这是因为&#xff0c;如果不用setup&#xff0c;就得使用 export default…

一种缩短轮询时间的处理办法

我们平常处理轮询任务的时候&#xff0c;会用时间片的方式来分割开&#xff0c;每个时间片处理某一个任务。 有时候有些任务并不需要有动作&#xff0c;本轮轮询到它&#xff0c;它不需要干活&#xff0c;于是这个时间片就浪费了。但如果其他时间片里面的任务又急着呢&#xff…

新版本nginx安装提示需要openssl的问题

新版本的nginx安装的时候未发现openssl的路径&#xff0c;有两种方式解决 方式一&#xff1a; 找到本地nginx的解压目录中 &#xff0c;例如我的放到root下面了。 进入 /root/nginx1.24.0/auto/lib/openssl/conf 目录下修改内容 &#xff0c;这两行都需要修改&#xff0c;…

SpringFramework实战指南(五)

SpringFramework实战指南(五) 4.3 基于 注解 方式管理 Bean4.3.1 实验一: Bean注解标记和扫描 (IoC)4.3.2 实验二: 组件(Bean)作用域和周期方法注解4.3.3 实验三: Bean属性赋值:引用类型自动装配 (DI)4.3.4 实验四: Bean属性赋值:基本类型属性赋值 (DI)4.3.5 实验五:…

为什么需要数字企业展厅?数字企业展厅搭建要注意什么?

引言&#xff1a; 数字企业展厅是一种通过数字技术来展示企业形象和产品的创新方式。它将传统的展厅搬到了虚拟的网络空间中&#xff0c;为企业带来了许多独特的优势。那么&#xff0c;为什么企业需要数字展厅呢&#xff1f;搭建数字企业展厅要注意什么&#xff1f; 一&#…

创建一个Vue项目(含npm install卡住不动的解决)

目录 1 安装Node.js 2 使用命令提示符窗口创建Vue 2.1 打开命令提示符窗口 2.2 初始Vue项目 2.2.1 npm init vuelatest 2.2.2 npm install 3 运行Vue项目 3.1 命令提示符窗口 3.2 VSCode运行项目 1 安装Node.js 可以看我的这篇文章《Node.js的安装》 2 使用命令提示…

QT中,对于大小端UDP网络发送的demo,帧头帧尾

简单demo: 发送端&#xff1a; #include <QUdpSocket> #include <QtEndian>#pragma pack(1) struct Test {unsigned char t1:1;unsigned char t2:2;unsigned char t3:3;unsigned char t4:2;quint8 a 1;quint16 b 2;quint16 c 3;//double b …

判断和循环 - 循环语句 - for循环格式和练习

什么是循环&#xff1f; 重复地做某件事具有明确的开始和停止标记 循环的分类&#xff1a; for循环while循环do....while循环 for循环 格式&#xff1a; for (初始化语句;条件判断语句;条件控制语句) {循环语句体; } //例 for (int i 1;i < 10;i) {SyStem.out.println(…

软件测试必备技能有哪些?

协同开发能力&#xff1a; 1. 项目管理&#xff08;SVN、Git&#xff09; 2. 数据分析能力&#xff08;Fiddler、Charles、浏览器F12&#xff09;。 接口测试&#xff1a; 1. 概念及接口测试原理概念&#xff08;概念、接口测试原理&#xff09; 2. 接口测试工具&#xff…

032-安全开发-JavaEE应用Servlet路由技术JDBCMybatis数据库生命周期

032-安全开发-JavaEE应用&Servlet路由技术&JDBC&Mybatis数据库&生命周期 #知识点&#xff1a; 1、JavaEE-HTTP-Servlet技术 2、JavaEE-数据库-JDBC&Mybatis 演示案例&#xff1a; ➢JavaEE-HTTP-Servlet&路由&周期 ➢JavaEE-数据库-JDBC&Mybat…

RK356X RKAndroid12 TF卡配置 自动挂载

RK356X RKAndroid12 TF卡配置 自动挂载 RK3568 有三个SDMMC接口&#xff0c;分别为SDMMC0 SDMMC1 SDMMC2 DTS 配置 1. max-frequency <150000000>; 此配置设置 SD 卡的运行频率&#xff0c;虽然设置为 150M &#xff0c;但是还要根据 SD 卡的不同模式进行调整。这…

Java项目管理01-Maven基础

一、Maven的常用命令和生命周期 1.Maven的常用命令使用方式 complie&#xff1a;编译&#xff0c;将java文件编译为class字节码文件 clean&#xff1a;清理&#xff0c;删除字节码文件 test&#xff1a;测试&#xff0c;运行项目中的test类 package&#xff1a;打包&#x…

堪称灾难级攻击的 UDP FLOOD洪水攻击,应该如何防护?

DDOS又称为分布式拒绝服务&#xff0c;全称是Distributed Denial of Service。DDOS本是利用合理的请求造成资源过载&#xff0c;导致服务不可用&#xff0c;从而造成服务器拒绝正常流量服务。就如酒店里的房间是有固定的数量的&#xff0c;比如一个酒店有50个房间&#xff0c;当…

如何彻底卸载MySQL【可以解决问题】

[序]写在前面 相信很多小伙伴都遇到了以前版本的MySQL没有卸载干净而导致新版本的MySQL无法安装的情况&#xff0c;今天小编带你彻底解决这个令人头痛的问题&#xff08;本人也有亲身经历&#xff01;希望能够给大家带来一点点帮助&#xff09; 注&#xff1a;本文部分图片来自…

Django的web框架Django Rest_Framework精讲(一)

文章目录 Django Rest_Framework1. DRF介绍2.DRF特点3.环境安装与配置&#xff08;1&#xff09;DRF需要以下依赖&#xff08;2&#xff09;创建django项目 4.序列化器的使用&#xff08;1&#xff09;创建序列化器 5. 反序列化器使用 Django Rest_Framework 1. DRF介绍 Djan…