首页 > 其他分享 >Vue介绍

Vue介绍

时间:2023-09-14 20:34:26浏览次数:42  
标签:Vue 框架 前端 介绍 js Vue3 页面

前端的发展史

1 HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看

2 Ajax的出现 -> 后台发送异步请求,Render+Ajax混合

3 单用Ajax(加载数据,DOM渲染页面):前后端分离的雏形

  前端就用html,css,js 写页面,空页面

  当页面加载完成---》发送ajax---》后端获取数据

  js 把获取完的数据,渲染到页面上

  后端只负责写接口

4 Angular框架的出现(1个JS框架):出现了“前端工程化”的概念(前端也是1个工程、1个项目)

5 React、Vue框架:当下最火的2个前端框架(Vue:国人喜欢用,React:外国人喜欢用)

6 移动开发(Android+IOS) + Web(Web+微信小程序+支付宝小程序) + 桌面开发(Windows桌面):前端 -> 大前端

7 一套代码在各个平台运行(大前端):谷歌Flutter(Dart语言:和Java很像)可以运行在IOS、Android、PC端

8 在Vue框架的基础性上 uni-app:一套编码 编到10个平台

9 在不久的将来 ,前端框架可能会一统天下

Vue介绍和基本使用

1. Vue介绍

  Vue是一套用于构建用户界面的渐进式框架

  渐进式:前端项目中可以一部分使用Vue,也可以全部项目使用Vue

2. 网站

 官网:https://cn.vuejs.org/

3. Vue版本

  - Vue3:一般情况下,新项目都用Vue3编写

  - Vue2:公司里很多项目用Vue2编写的

    - 就在Vue3上写Vue2的语法,完全支持,但是Vue3的语法就不一样了

4. M-V-VM思想

MVVM是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,是一种事件驱动编程方式

  - Model:js中的变量

  - View:用户看到的页面

  - ViewModel:只要js中变量变化了,页面自动跟着变化,页面中的数据变化了,js变量也跟着变化

5. 单页面应用、组件化开发

1.组件化开发:

  类似于DTL中的include,每个组件的内容都是可以被替换和复用的

 2.单页面开发:

  只需要一个页面,结合组件化开发来替换页面中的内容

  页面的切换只是组件的替换,页面还是只有一个index.html

3. 引入方式:

  - 1. CDN的方式引入

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

  - 2 下载后导入:其实就是直接在浏览器中打开 https://cdn.jsdelivr.net/npm/vue/dist/vue.js,然后复制下来,创建一个js文件再粘贴进去

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

4. 简单的使用:

index.html:

 

补充:

解释型的语言是需要解释器的

js就是一门解释型语言,只不过js解释器被集成到了浏览器中

所以,在浏览器的Console中输入命令,就和在cmd中输入python后,进入交互式环境一样

nodejs:一门后端语言,运行在操作系统上的语言----》网络处理、文件处理

  把Chrome的v8引擎(解释器),安装到操作系统之上

vue 项目编译成 纯粹的html,css,js---》需要有node环境

 

标签:Vue,框架,前端,介绍,js,Vue3,页面
From: https://www.cnblogs.com/Lucky-Hua/p/17703377.html

相关文章

  • 解决vue3中抽离出来的js如何调用页面的方法
    有时我们会用render渲染表格的columns,里面的按钮如何去调用.vue文件的方法?思路;在.vue文件中我们通过参数的方式传给.js文件,然后用变量接收,点击时执行(注意:.vue文件中setup执行比较早,按钮是点击事件,不会主动执行函数。为防止函数未声名就当做参数传递,必须在最后执行getFn函数,和d......
  • vue 初识
    一、前端的发展史1、前端的发展演变#1HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看#2Ajax的出现->后台发送异步请求,Render+Ajax混合......
  • ES中Nested数据类型介绍
    ES中Nested数据类型官网地址注:针对集合类型的属性,对象数组存储,默认情况下ES会对其进行扁平化处理。在使用DSL语句进行查询时,必须按照Nested方式进行搜索,否则搜索不到数据。使用Nested数据类型可以避免扁平化处理Nested(嵌套类型):是object的一种数据类型,允许对象数组以相互独立......
  • 如何写论文的 abstract摘要和introduction背景介绍
    摘要是题目的扩展、简介是摘要的扩展、正文是简介的扩展,逻辑紧密,环环紧扣。无论是摘要、简介还是正文,围绕的核心都是一个点:题目,突出的是工作内容+创新点。其实无论是核心还是sci,写科技文就像是写八股文,套路都是一样的。下面提供一点写摘要和背景介绍的思路和建议。如何写abstract......
  • PostgreSQL-分区表介绍
    一、分区简介表分区是解决一些因单表过大引用的性能问题的方式,比如某张表过大就会造成查询变慢,可能分区是一种解决方案。一般建议当单表大小超过内存就可以考虑表分区了。表的分区就是将一个逻辑上的大表(主要指数据量大),切分为多个小的物理的分片。1.分区的优点1)在某些情况......
  • Lnton羚通视频分析算法平台人员闯入算法检测告警详细介绍
    Lnton羚通的算法算力云平台有以下显著特点:高性能、高可靠性、高可扩展性和低成本。用户可以通过该云平台获取高效、强大的算法计算服务,快速而灵活地运行各种复杂的计算模型和算法。该平台广泛涵盖机器学习、人工智能、大数据分析和图像识别等领域。此外,云平台还提供丰富的算法库和......
  • vue3 elementplus 列表中添加排序功能,移动的时候修改背景色
    <el-tablesize="medium":border="true":data="branchTableData":row-style="changeColor":stripe=falsestyle="width:100%;">......
  • Vue学习四:组件的三大组成部分、组件通信和进阶语法
    一、组件的三大组成部分<template>里面只能有一个根元素<style>全局样式(默认):影响所有组件局部样式:scoped下样式,只作用于当前组件<script>el根实例独有,data是一个函数,其他配置项一致二、scoped设置局部样式默认情况:写在组件中的样式会全局生效→因此很容易造成多......
  • vue 数学公式js加载
    <script>document.addEventListener("DOMContentLoaded",function(){renderMathInElement(document.body,{//customisedoptions//•auto-renderspecifickeys,e.g.:delimiters:[{left:'$......
  • 【Java框架】Java十大常用框架介绍
     一、SpringMVCSpringWebMVC是一种基于Java的实现了WebMVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模型,框架的目的就是帮助我们简化开发,SpringWebMVC也是要简化我们日常Web开发的。模型(M......