【Vue】—Vue的基本介绍与插件安装

一、Vue的简介

Vue简介:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供的数据驱动。

Vue是一个MVVM框架 Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。M是model V是view 对应的是视图层,VM是把M层和V层关联起来的一个中间层,VM能够实现数据的双向绑定 。

React 是MVC框架,数据收集单向绑定的,只能从M到V

MVC 模式(Model–view–controller)是软件工程中的一种软件架构模式,它把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)

  • 模型(Model):程序员编写程序应有的功能(实现算法等等)、数据库专家进行数据管理和数据库设计(可以实现具体的功能);
  • 控制器(Controller):负责转发请求,对请求进行处理;
  • 视图(View):界面设计人员进行图形界面设计。

二、Vue的兼容性

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

三、开发者工具

开发者工具:在使用Vue时,王同学推荐您在你的的浏览器上安装vue-devtools。vue-devtools是基于chrome的一款浏览器插件,是开发过程中必不可少的,其高效、简洁、方便的特点深受vue开发者的喜爱。它允许你在一个更好的界面中审查和调式Vue应用

四、vue-devtools的插件安装

下载链接:https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

打开浏览器扩展安装页面

点击浏览器右上角⋮>更多工具> 点击扩展程序

在扩展中心打开右上角的【开发者模式】按钮,然后【刷新】页面,把下载好的 .crx 文件拖入扩展中心

此时已经安装好了

五、vue-devtools如何使用

当我们添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。

vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。

【Vue】—Vue的基本介绍与插件安装相关推荐

  1. Vue项目中如何引入Toast插件

    Vue项目中如何引入Toast插件 安装vue2-toast: npm install vue2-toast -S 在main.js中全局导入vue2-toast import 'vue2-toast ...

  2. VUE环境搭建教程以及VSCODE插件Vetur和ESlint的安装配置

    *此教程适用于Windows环境下  Author:Sinclair  CreateDate:2018-10-09 1.安装node.js 下载地址:Download | Node.js (LTS代表 ...

  3. 解决vscode插件安装不成功,xxx.vue高亮插件问题

    解决vscode插件安装不成功,xxx.vue高亮插件问题 提示:vue插件 vue中 xxx.vue 的插件,没安装之前是黑白显示,安装之后彩色.语法高亮插件是 "Vue 3 Snippe ...

  4. vue中devTools插件安装教程

    vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTo ...

  5. Vue插件安装详细步骤

    1.插件安装网址 https://chrome.zzzmh.cn/index 安装完后,运行含Vue的代码发现,控制台显示插件没安装,对次解决方法看另外一篇 2.打开网址 3. 4. 5. 6. 7. ...

  6. vue介绍及环境安装

    认识Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上 ...

  7. vue使用,及指令介绍,计算属性/过滤器

    目录 Vue是什么 vue的单页面原理 Vue的使用 指令介绍: v-if和 v-show的区别 v-on 事件绑定: v-bind 绑定属性 处理数组绑定 v-model双向数据绑定 created ...

  8. vscode插件安装介绍

    Visual Studio Code是由微软开发的轻量级但功能强大的源代码编辑器.轻量体现在插件打开的速度比较快:功能强大体现在可以安装想要的插件,从而丰富vscode功能并提升开发效率.下面我就介绍 ...

  9. 总结Vue第一天~简单介绍、基本知识、辅助函数和js数组的高阶函数

    目录 vue中文官网 一.简单介绍: (1)vue.js :本质就是一个js 核心类库[跟咱使用的其他组件插件而安装他们]: ■ 安装方式: (2)小demo了解一下vue.js: (3)响应式: 二 ...

最新文章

  1. 判断两个多边形相交的面积_聊聊3D模型组件—顶点,边,多边形
  2. 2014校招 百度试题及答案
  3. 小学计算机辅导计划,【小学信息技术培优补差计划】_小学信息技术培优补差计划...
  4. 这一次,苹果、Google、微软选择了统一战线!
  5. 如何使用Intellij IDEA工具导入SVN项目
  6. SpringBoot学习之logback.xml 配置指定包或类输出至单独的日志文件中
  7. 百度云链接后的html,百度云链接失效,这样就能找回!
  8. MediCool天使投资计划
  9. 超强的在线设计Logo工具:Logo Creator_logo_UE
  10. 聚焦质控 | 如何进行单病种过程质量管理
  11. 面试被问到这道送命题,怎么回答才不会变成炮灰
  12. 付费入群怎么做_微信群怎么设置付费才可以进入
  13. WebSocket+Tomcat实现网页简易聊天室
  14. 孔子为何砸掉子路给工人送饭的锅?
  15. Git 同步代码两例常见报错
  16. java编辑遗忘曲线代码_通过excel vba 实现艾宾浩斯遗忘曲线的复习提醒
  17. golang 哪些类型可以作为map key
  18. 【蓝旭】第五周预习博客
  19. dialer(dialer接口是什么意思)
  20. 应届生简历怎么写?应届生制作简历注意事项有哪些?

热门文章

  1. idea下使用Maven找不到类
  2. Linux命令--- /dev/null和/dev/tty
  3. Linux怎样创建FTP服务器--修改用户默认目录-完美解决 - 费元星
  4. Linq-Order By操作
  5. 哟西,CLOUDSTACK第一步,搞定
  6. 删除8848的mysearch
  7. C程序设计语言现代方法17:指针的高级应用
  8. c语言按位取反 补码,按位取反运算符,数值取反之后是反码,还是补码- -
  9. mui实现分享功能_继MIUI之后,华为EMUI更新,深度实现万物互联
  10. php 循环table,php table循环 问题很简单 求帮助