【Vue】一文让你进入Vue的大门

2023-10-27

Vue简介

官网

英文官网

中文官网

介绍与描述

Vue历史

Vue 是一套用来动态构建用户界面的渐进式JS框架

  • 构建用户界面:把数据通过某种办法变成用户界面

  • 渐进式:Vue可以自底向上逐层的应用,简单应用只需要一个轻量小巧的核心库,复杂应用可以引入各式各样的Vue插件

image.png
image.png

Vue最初是由尤雨溪在2014年开发的,它是一款非常轻量和高效的MVVM框架。经过这几年的迭代,Vue已经发展成为非常成熟稳定的前端框架。

Vue的第一个公开版本是0.8,发布于2015年2月。这个版本实现了基础的数据绑定、组件系统等核心功能。虽然功能还不完善,但已经可用于简单项目中。

0.9版本在当年年底发布,该版本重写了虚拟DOM渲染系统,大幅提升性能。0.11版本增加了动画效果。0.12版本于2016年10月发布,进一步改进了性能。

1.0版本作为第一个正式稳定版,在2017年10月发布。这个版本的Vue已经足以应对绝大多数场景,拥有完整的生态系统支持。

2.0版本于2018年年初发布,该版本采用基于ES6的编译器改进了代码质量,表示Vue已经完全进入2.x时代,成为前端主流框架之一。

目前最新的是3.x版本,从2020年9月发布。3.0对整体架构做了优化升级,拥抱TypeScript。相比2.x版本,3.x在性能、可维护性、TypeScript支持等方面有很大进步。

从0.x到1.x,再到当前的3.x,Vue的成长与进化历程可见一斑。相信在未来几年内,Vue会继续成长为前端最流行的框架之一

Vue 的特点

  • 遵循MVVM模式

  • 编码简洁,体积小,运行效率高,适合移动/PC端开发

  • 它本身只关注 UI,可以引入其它第三方库开发项目

  • 采用组件化模式,提高代码复用率、且让代码更好维护

  • 在vue中一个.vue文件就是一个组件

image.png
image.png

5声明式编码,让编码人员无需直接操作DOM,提高开发效率

  • 命令式编程写一步执行一步,声明式
image.png
image.png

●使用虚拟DOM 和 Diff算法,复用DOM节点,以前存在的DOM,直接复用,避免重复,优化效率

image.png
image.png

与其他 JS框架的关联

借鉴 angular 的 模板 和 数据绑定 技术

借鉴 react 的 组件化 和 虚拟DOM 技术

Vue 周边库

  • vue-cli:vue 脚手架
  • vue-resource(axios):ajax 请求
  • vue-router:路由
  • vuex:状态管理(它是 vue 的插件但是没有用 vue-xxx 的命名规则)
  • vue-lazyload:图片懒加载
  • vue-scroller:页面滑动相关
  • mint-ui:基于 vue 的 UI 组件库(移动端)
  • element-ui:基于 vue 的 UI 组件库(PC 端)

初识 Vue

安装

官方安装步骤

注意事项

安装的时候安装开发版本即可,实际工作中,项目上线则用体积更小的生产版本

  1. 给浏览器安装 国外的 Vue Devtools 插件(否则浏览器打开定报错)
  2. 这里在代码中用script标签引入Vue包(不是必须的,你也可以选择其它方式,引入之后全局就多了个Vue构造函数)
  3. 想要阻止vue在启动时生成生产环境警告的话,可以在代码中写上 Vue.config.productionTip = false(禁止浏览器开发者模式显示生产环境警告,用vue.config可查看全局配置)
  1. Favicon 需要将页签图标放在项目根路径,重新打开就有了(否则浏览器打开定报错,shift+f5 强制刷新)

Favicon 是favorites icon的缩写,被称为 website icon(网页图标)、page icon(页面图标)、urlicon(URL图标),当你打开任何一个网站的时候,浏览器就会默认请求页面图标

  1. 真实开发中Vue构造只有一个Vue实例,并且会配合着组件一起使用
  2. {{xxx}}大括号中的 xxx 要写 js 表达式(并非只能写data中的内容),且 其中的内容可以自动读取到data中的所有属性
  3. 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新

注意区分:js 表达式 和 js代码(语句)

表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方

  • a

  • a+b

  • demo(1) 函数调用表达式

  • x === y ? 'a' : 'b' 三目表达式

js代码(语句)

  • if(){}

  • for(){}

<!-- 准备好一个容器 -->
  <div id="demo">
   <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
  </div>

  <script type="text/JS" >
   Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

   //创建Vue实例
   new Vue({
    el:'#demo', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串,如果容器为class,这里直接用类选择器.demo就行,一般用id,写起来简单
    data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象
     name:'suoqi',  // 在调试面板可以修改,如果点击这里如果不能修改,需要改成英文
     address:'上海'
    }
   })
  </script>
image-20230806135304642
image-20230806135304642

Vue引入成功能使用Vue构造函数

image-20230804012007862
image-20230804012007862

索奇问答

Q:我们为什么要用new Vue呢!

A:因为这是底层代码规定...vue.js源码如下,你不new,就一定会报错!

image-20230806143118485
image-20230806143118485
image-20230806143011417
image-20230806143011417
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【Vue】一文让你进入Vue的大门 的相关文章

  • 使用日期类型将输入字段中的日期居中

    我想将日期居中input not input inside div 如果我进行居中 它将把日期居中于input因为有一个右侧面板用于根据日历选择日期 该面板根据输入宽度调整大小 用于演示的小代码片段 center text align ce
  • 对自定义打字稿错误实例实施instanceof检查?

    打字稿有这个instanceof 检查自定义错误 https github com Microsoft TypeScript issues 13965问题 但尚不清楚我们需要做什么才能得到instanceof在职的 例如对于这个异常我们如何
  • 按下了哪个提交按钮?

    在这个jsfiddle中 http jsfiddle net littlesandra88 eGRRb http jsfiddle net littlesandra88 eGRRb 我是否提交了自动生成的按钮 每个表行都有一个唯一的 ID
  • browserify 错误 /usr/bin/env: 节点: 没有这样的文件或目录

    我通过 apt get install 安装了 node js 和 npm 以及所有依赖项 然后安装了 browserify npm install browserify g 它完成了整个过程 看起来安装正确 但是当我尝试为此做一个简单的捆
  • 如何制作像Stackoverflow一样的可折叠评论框

    我正在构建一个网站 并且有一个状态更新列表 我希望允许用户为列表中的每个项目撰写评论 但是我正在尝试实现一个类似于堆栈溢出工作方式的用户界面 特别是可折叠的评论表单 列表 用户在其中单击对列表中的特定状态更新添加评论 并且在列表中的该项目下
  • Chrome 扩展程序中的后台脚本到底何时运行?

    在我的 chrome 扩展中 我有一个后台脚本 它将使用XMLHttpRequest note that this code is in the global scope i e outside of any function also n
  • 代码点火器 JSON

    你好 我使用 codeigniter 然后我从控制器中的数据库中回显输出 然后在我的视图文件中执行以下操作 但它没有显示任何内容 S 我的模型文件 function forumList this gt db gt select oversk
  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • 正则表达式 - 避免表达式中出现字符串

    我正在尝试创建一个应该匹配以下情况的正则表达式 如果单词完全匹配 first second third 那么匹配应该失败 但如果它周围有任何字符 那么应该匹配该字符串 我还需要避免字符串中的某些字符集 如果这些字符是字符串的一部分 则匹配结
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • CryptoJS 和 Pycrypto 一起工作

    我正在使用 CryptoJS v 2 3 加密 Web 应用程序中的字符串 并且需要在服务器上使用 Python 对其进行解密 因此我使用 PyCrypto 我觉得我错过了一些东西 因为我无法让它工作 这是JS Crypto AES enc
  • 如何使用 .append() 将 React 组件附加到 HTML 元素

    我正在尝试对我的博客实现无限滚动 我有 const articlesHTML document querySelector articles 作为容器 每次点击装载更多按钮 我想将新文章附加到主 html 元素 如下所示 const res
  • 在 中动态添加链接样式表 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如何将链接
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR
  • 我可以防止将 Leaflet 地图平移到世界边缘之外吗?

    有没有办法限制平移到世界边缘之外 在这幅画中 棕色是世界 灰色是虚空 我想让它不可能像这样平移 Leaflet 允许您控制地图抵抗被拖出边界的程度maxBoundsViscosity选项 值 0 到 1 将其设置为最大值会完全禁用拖动出界
  • html5 canvas 使用图像作为蒙版

    是否可以使用具有形状的图像作为整个画布或画布内图像的蒙版 我想将图像放置在画布中 并在图像上添加蒙版 然后将其另存为新图像 您可以使用 source in globalCompositeOperation 将黑白图像用作蒙版 首先 将蒙版图

随机推荐

  • Ubuntu 配置 C/C++ 开发环境

    文章目录 0 更新和升级系统软件 1 安装 build essential 软件包 2 安装 gdb 3 安装 cmake 0 更新和升级系统软件 在终端中输入以下命令对软件进行刷新 保证后续安装的软件都是最新的 sudo apt upda
  • 解决微信小程序安卓手机访问不到图片,无法显示图片

    关于微信小程序不显示图片 通病可能有以下几个可能性 非本地图片 确定图片资源存在 copy 图片url再浏览器打开 确定图片资源存在且能正常访问 本地图片 确定相对路径或者绝对路径正确 微信小程序图片路径 不可以存在中文 使用英文做路径和文
  • DataX同步Hive数据丢失,源码修复

    文章目录 DataX简介 DataX 商业版本 DataX的特点 DataX同步Hive数据丢失 DataX的Hive数据源HdfsReader插件 DataX简介 DataX 是阿里云 DataWorks数据集成 的开源版本 在阿里巴巴集
  • 推荐几款好用的压缩软件

    前言 压缩工具作为电脑装机必备软件我们在日常生活中都会经常用到 但是诸如好压 2345 WinRAR等一些常见的压缩软件都会有各种广告弹窗的现象 烦人至极 以下推荐几款免费无广告的强大压缩工具 7 Zip 仅有1M左右的安装包将轻巧便捷阐述
  • [从零开始学习FPGA编程-26]:进阶篇 - 基本组合电路-数据选择器(Verilog语言)

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 目录 前言 第1章 数据选择器 1 1 数据选择器概述与原理
  • 能力和结果之间的关系

    大家好 这里是大话硬件 今天这篇文章想和大家分享前段时间的一点工作体会 关于个人能力和工作结果之间的关系 其实这些感悟是在上周三晚上下班 走在回家的路上 脑海中突然出现这样的体会 回到家里立马写了下来 因为是即时的灵感 完全是因为工作状态触
  • Python有限体积流体开尔文-亥姆霍兹不稳定性

    本文 我们将使用有限体积方法模拟开尔文 亥姆霍兹不稳定性 我们将考虑一种可压缩流体 它具有向背景相反方向移动的高密度流 速度切变引起了著名的不稳定性 有时在云层和木星的大红斑中也可以看到这种不稳定性 有限体积法 我们将描述有限体积法来模拟理
  • 【Web自动化】Python3+Selenium 框架⑸——登录页面类方法

    前言 Selenium是一个用于Web应用程序自动化测试工具 Selenium测试直接运行在浏览器中 就像真正的用户在操作一样 支持的浏览器包括IE 7 8 9 10 11 Mozilla Firefox Safari Google Chr
  • mybatisplus多表关联查询_神奇的SQL:探索多表连接查询的执行细节

    作者 jb hz 来源 https blog csdn net qq 27529917 先构建本篇博客的案列演示表 1 驱动表如何选择 驱动表的概念是指多表关联查询时 第一个被处理的表 使用此表的记录去关联其他表 驱动表的确定很关键 会直接
  • @Cacheable key的使用

    key属性是用来指定Spring缓存方法的返回结果时对应的key的 该属性支持SpringEL表达式 当我们没有指定该属性时 Spring将使用默认策略生成key 我们这里先来看看自定义策略 至于默认策略会在后文单独介绍 自定义策略是指我们
  • 【VTK】VTK9.1+QT6+VS2019编译

    VTK9 1 QT6 2 3 VS2019编译 环境准备 vtk9 1编译 QtCreator工程引入VTK 环境准备 QT安装时选上msvc 环境变量添加QT下bin 下载qt vs tools 不必要 https download qt
  • 一张脑图解析 ConcurrentHashMap 的重点知识点

    欢迎在评论区交流 一起学习 一起进步
  • Spring boot Banner和icon

    文章目录 Spring boot Banner和icon 上一节 源码 Spring boot banner 自定义banner 关闭banner 使用图片充当banner 源码分析 Spring boot icon 源码分析 下一节 Sp
  • 华为实习笔试复盘(1)配送站和客户问题

    写在前面 自己玩了很多项目 但是最近准备秋招的过程中 发现自己对于算法和编程语言的基本功夫实在是太欠缺了 投递了华为的实习岗位 4 26参加机考 一做题就发现了自己很多地方都不会 这里写下笔试后的复盘以警醒自己 题目 按照记忆来回顾题目 仅
  • 计算机毕业设计PHP基于微信小程序在线抽签系统(源码+程序+uni+lw+部署)

    该项目含有源码 文档 程序 数据库 配套开发软件 软件安装教程 欢迎交流 项目运行 环境配置 phpStudy Vscode Mysql5 7 HBuilderX Navicat11 Vue Express 项目技术 原生PHP Vue 等
  • UE4用蓝图画出数学柱状图(第一更)

    UE4用蓝图画出数学柱状图 第一更 利用ue4画出数学柱状图主要用的蓝图节点 新建一个widget 在UI蓝图里面直接用上面四个节点是不行的 需要重写一个UI的函数 所有的绘画都要在这个函数里完成 这个引用在C 里写为了只读 且这个函数也不
  • 55_Pandas.DataFrame 转换为 JSON 字符串/文件并保存 (to_json)

    55 Pandas DataFrame 转换为 JSON 字符串 文件并保存 to json 使用pandas DataFrame的方法to json 可以将pandas DataFrame转为JSON格式字符串 str类型 或者输出 保存
  • 闲谈:如何在js中定义枚举类

    定义枚举的意义和场景 今天遇到了一个场景 页面中有一个下拉框 里面两个选项 国有企业 民营企业 代码结构是这样的 text 国有企业 value 1 text 民营企业 value 2 value是用来存储 text是用来展示 数据回显的时
  • QT错误::-1: error: No rule to make target ‘res.qrc‘, needed by ‘debug/qrc_res.cpp‘. Stop.

    问题分析 出现这种错误是因为选中的资源文件的图片路径中含有中文 解决办法 先删除原有图片路径中含有中文的图片 将图片的路径中含有中文的部分修改后再进行添加 然后再重新执行即可
  • 【Vue】一文让你进入Vue的大门

    Vue简介 官网 英文官网 中文官网 介绍与描述 Vue历史 Vue 是一套用来动态构建用户界面的渐进式JS框架 构建用户界面 把数据通过某种办法变成用户界面 渐进式 Vue可以自底向上逐层的应用 简单应用只需要一个轻量小巧的核心库 复杂应