Vue2基础篇-01-Vue2 入门概述

news2024/9/20 16:45:11

1. 概述

  • 该教程站在小白的角度,去帮助理解和使用,达到入门的效果;
  • 该教程覆盖面比较浅,更多详情请查阅 Vue2文档 ,目前最新是Vue3文档,但是Vue2是公司目前大多数使用的;
  • 欢迎大家一起指正并下方留言,一起学习,共同进步!
  • 快速入门学习心得:
    • 直接拿一个项目本地运行跑起来;
    • 确认一个需求,直接干!
    • 不会很正常,看不懂的地方多很正常,关键是树立自信心,由点到面的覆盖,最终会发现,也就那么回事!

2. 基础环境搭建

  • 下载 NodeJs & 安装配置环境变量
  • 下载安装 Nvm
  • 安装Vue的脚手架(快速上手小项目)
  • 部署
    这里我选择使用tomcat部署vue项目(win系统需要借助vm+centos镜像或者其他镜像(ios不需要),安装jdk+tomcat)
    vue部署命令: npm run build
    将打包好的dist目录复制到webapp下,重启tomcat即可;

3. Vue2 是什么?

在这里插入图片描述 作者: 尤雨溪

通俗一点: Vue是一套用于构建用户界面的渐进式 JavaScript框架;即将用户数据展示呈现在页面;

渐进式怎么理解?

  • 对于简单的应用,使用官方vu2.js即可 100k左右;
  • 对于复杂应用,可以引入各式各样的vue插件;

Vue2 能干嘛?

  1. 采用组件化模式,提高代码复用率,且让代码更好的维护;在这里插入图片描述
    如图所示: 当其他页面也需要 条件搜索,展示整体数据,直接将对应的组件拿过去就可以复用;

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

    • 原: 采用命令式编码,操作DOM 完成数据展示;
    • vue: 采用声明式编码,且屏蔽了直接操作DOM

在这里插入图片描述
在这里插入图片描述

4. Vue2 去哪下?

  • 英文官网:https://vuejs.org/
  • 中文官网:https://v2.cn.vuejs.org/
  • Vue.js下载地址:https://v2.cn.vuejs.org/v2/guide/installation.html

在这里插入图片描述
开发版本vue.js 与生产版本vue.min.js 区别

5. Vue2 怎么玩?

  1. MVVM模型思想
    在这里插入图片描述
    M: 模型(Model) :对应 data 中的数据
    V: 视图(View) :模板
    VM:视图模型(ViewModel) : Vue 实例对象

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

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

相关文章

Unity 符号表

目录 前言 关于Unity符号表 正文 程序crash日志: 解析 后记 记一次 Bugly 崩溃查找过程 unity-il2cpp: 前言 关于Unity符号表 关于项目真机调试时的崩溃问题,一般可以 logcat 或 xcode 看到相关的crash日志,拿到崩溃时的堆…

Python均匀分布和三角形分布

文章目录均匀分布三角形分布均匀分布和三角形分布之间的关系函数备注triangular(left, mode, right)三角形分布uniform([low, high])均匀分布 均匀分布 所谓均匀分布,就是在事件空间中,所有事件的概率都是相等的连续分布,其概率密度为 f(x)1…

麻省理工人工智能实验室新研究!有远见的机器学习方法:能预知未来行为的AI智能体

原创/文 BFT机器人 近日,麻省理工学院的研究人员开发出一种新技术,让AI智能体能够思考更远的未来,寻找更合适的合作与竞争长期解决方案。 想象一个游戏规则:两支足球队在球场上PK,玩家们可以选择相互合作合作来实现目…

[附源码]Python计算机毕业设计Django学生宿舍管理系统

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

web前端期末大作业:云南旅游网页主题网站设计——云南城市旅游5页HTML+CSS+JavaScript

👨‍🎓静态网站的编写主要是用 HTML DⅣV CSSJS等来完成页面的排版设计👩‍🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉…

c + linux + cmake + arm + MQTT

先给你们看个最终代码结构吧,因为我改过的代码会加密,所以我只能放一部分源码,另外一部分源码我会直接贴在博客,具体使用我会在博客里面说明! 1.MQTTPacket源码库(MQTTPacket源码地址) 2.MQTTClient.c /*********************************************************************…

Linux中线程池的制作

一.介绍 1.1概念 一种线程使用模式。线程过多会带来调度开销,进而影响缓存局部性和整体性能。线程池维护着多个线程,等待着监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价。线程池不仅能够保证内核的充分利用&#x…

如何从github上克隆库、跑库

第一步:在Github上找到想要的库,以YOLOv3项目为例。 第二步:拷贝这个库到自己的电脑上,下载到本地。 方法一:在GitHub上,Code -> Download ZIP(有的时候会有一些问题,不建议&…

DBW*的trace文件过大的bug

问题描述: 近期某现场发现trace目录下的dbw*文件达到了大几G的大小导致/oracle目录占用率突增,删除这些trace文件,几天后又重新生成较大的dbw*的trace 11G Dec 4 10:38 rb_dbw0_2086848.trc 3.6G Dec 4 10:38 rb_dbw1_2086852.trc 4.4G De…

前端工程师常考手写面试题指南

实现 add(1)(2)(3) 函数柯里化概念: 柯里化(Currying)是把接受多个参数的函数转变为接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术。 1)粗暴版 function add (a) { return function (b) …

码云线上误删主项目文件夹的恢复

码云线上误删主项目文件夹的恢复前言描述解决办法解决问题前言描述 本来某个项目即将上线,然后同事不知道怎么的,直接打开了自己的码云,在网站上把主项目目录删除了。。。。是的,删除了!!!&…

职场生涯亮红灯要注意这些

很多时候,当事业变红的时候,很多年轻人还在傻傻地工作。他们做的事情越多,在不被领导看重的情况下,就越不会得到领导的重用。在关心下属的时候,会在无形中释放出一些不好的信号,这是一种被领导抛弃的行为。…

winform 处理tabcontrol控件,隐藏顶部的tab标签,及tabcontrol的边框线

处理tabcontrol控件,隐藏顶部的tab标签,及tabcontrol的边框线处理tabcontrol控件,隐藏顶部的tab标签,及tabcontrol的边框线隐藏顶部的tab标签隐藏边框线运行效果图处理tabcontrol控件,隐藏顶部的tab标签,及…

智能电销机器人《各版本机器人部署》

科技在进步,时代在发展,越来越多人工智能产品出现在我们的生活中,从各种工业机器人到智能家居产品,人工智能在越来越多的行业出现,代替人们做重复枯燥的工作。在企业中出现最多的是电销机器人,并逐渐被越来…

【面试宝典】Mysql面试题大全

mysql面试题大全1、数据库存储引擎2、InnoDB(B树)3、TokuDB( Fractal Tree-节点带数据)4、MyIASM5、Memory6、InnoDB与MyISAM的区别7、索引8、常见索引原则有9、数据库的三范式是什么10、第一范式(1st NF - 列都是不可再分)11、第二范式(2nd NF- 每个表只描述一件事情)12、第三…

MemoryAnalyzer分析线上OOM异常

本文档记录工作中发生的一次OOM异常分析 最近线上环境频繁出现OOM异常,导致应用服务器宕机,之前有观察过最近的程序更新,猜测定位到最近的一个接口上,之前发现问题都是打印堆栈信息排查,但是这次发现堆栈信息并不能有…

lc刷题总结(二叉树第一次)

前中后序的递归遍历 lc144 94 145 class Solution { public:void travel(TreeNode * cur,vector<int>& vec){if(curnullptr){return;}travel(cur->left, vec);travel(cur->right, vec);vec.push_back(cur->val);}vector<int> postorderTraversal(Tre…

视频点播小程序毕业设计,视频点播系统设计与实现,微信小程序毕业设计论文怎么写毕设源码开题报告需求分析怎么做

项目背景和意义 目的&#xff1a;本课题主要目标是设计并能够实现一个基于微信小程序视频点播系统&#xff0c;前台用户使用小程序&#xff0c;后台管理使用基java&#xff08;springboot框架&#xff09;msyql8数据库的B/S架构&#xff1b;通过后台添加课程信息、视频信息等&a…

Spring Cloud(十五):微服务自动化部署 DevOps CI/CD、Maven打包、ELK日志采集

DevOps CI/CD Gitlab(免费版和收费版)Jenkins基于GitLabJenkins快速实现CI\CD 后端项目打包以及部署方式 spring-boot-maven-pluginmaven-dependency-pluginmaven 官网插件maven-jar-plugin上传jar包到maven私服 ELK 日志采集 使用FileBeatLogstashES实现分布式日志收集使用 ma…

使用握手信号实现跨时钟域数据传输(verilog)

大家好&#xff0c;最近汇总了2021年oppo哲库招聘手撕代码题目&#xff0c;本文章一共含有以下几个题目&#xff1a; 一&#xff0c;使用握手信号实现跨时钟域数据传输&#xff08;verilog&#xff09; 二&#xff0c;自动售卖机&#xff08;verilog&#xff09; 三&#xf…