前端--VUE学习

最新推荐文章于 2024-05-04 22:06:16 发布
最新推荐文章于 2024-05-04 22:06:16 发布
阅读量477 收藏 1
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53244569/article/details/119413751
版权

文章目录

一.VUE

1.概述

Vue是一个渐进式的前端框架，渐进式是指按需配置
同类产品
同类产品
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。

ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是让JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，洗白其一直被"鄙视"的脚本语言的前身。
在这里插入图片描述

随着js的强大，三大巨头横空推出，形成鼎足之势。前端新三大框架：Angular/React/Vue，三种是目前主流js框架。国外企业多用React，国内企业多用Vue。
Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。

2.特点

  • 一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+

  • 是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发

    原生html页面是通过js 操作的是dom，而vue.js操作的是数据。

    和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是数据。

    优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api。

渐进式框架
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。

可以只使用核心vue.js
可以只使用核心vue.js + components组件
可以只使用核心vue.js + components组件 + router路由
可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）
)

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

3.入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的入门案例</title>
		<!-- 1, 导入vue.js,用vue的功能 -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 2,准备数据渲染区,{{msg}} 叫插值表达着,是vue的固定语法,获取msg变量的值-->
		<div id="app"> {{msg}}  </div>
		<!-- 3,导入vue.js,vue就提供了Vue的工具,想用就new -->
		<script>
			// 3.1, 准备数据(js对象)
			var a = { 
				msg :"hello vue~" 
			}
			//3.2, 把数据渲染到挂载点
			var com = {
				// el属性是用来描述元素(挂载点),  data属性是具体要展示的数据
				el : "#app" ,   //通过css提供的id选择器,选中了id=app的元素
				data : a  //即将把a的数据渲染在挂载点
			}
			//3.3, 准备Vue对象
			new Vue(com);
		</script>
	</body>
</html>

总结
在这里插入图片描述

4.改造入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的入门案例</title>
		<!-- 1, 导入vue.js,用vue的功能 -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 2,准备数据渲染区,{{msg}} 叫插值表达着,是vue的固定语法,获取msg变量的值-->
		<div id="app"> {{msg}}  </div>
		
		<!-- 3,导入vue.js,vue就提供了Vue的工具,想用就new -->
		<script>
			//准备Vue对象, 把数据渲染到挂载点
			new Vue({
				// el属性是用来描述元素(挂载点), 通过css提供的id选择器,选中了id=app的元素
				el : "#app" ,   
				// data属性是具体要展示的数据,即将把数据渲染在挂载点
				data : { 
					msg :"hello vue~" 
				}  
			});
		</script>
	</body>
</html>

总结
在这里插入图片描述

5.MVVM框架

在这里插入图片描述
和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是：传统js机制操作的是页面，如我们之前写的html+css+js案例，大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。

在这里插入图片描述

6.Vue的基础语法

1.运算符
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue的运算符</title>
		<script src="vue.js">
			
		</script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			
			<p>a: {{a}}</p> 
			<p>b: {{b}}</p>
			<p>加法：{{a+b}} </p>
			 <p>减法：{{a-b}}</p>
			 <p>乘法：{{a*b}} </p>
			  <p>除法：{{a/b}}</p>			 
			<!-- <p>自增：{{a++}}</p>
			<p>自减：{{b--}}</p> -->
			<p>三元运算符:{{a>b?a:b}}</p>
			字符串的操作:{{msg}}{{msg.length}} {{msg.concat(123)}} 
			{{msg.replace('l','857')}}
			
		</div>
		<!-- 3.new Vue 创建Vue对象-->
		<script >
			new Vue({
				//el属性用来描述元素的挂载点
				el:"#app",//挂载点：数据的渲染区，
				//即将要展示的数据
				data:{
					msg:"hellovue",
					a:10,
					b:20,					
				}				
			});
		</script>
		
	</body>
</html>

2.定义函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue函数</title>
		<!-- 导入vue.js -->
		<script src="vue.js">
			
		</script>
	</head>
	<body>
		<!-- 准备数据渲染区 -->
		<div id="app">
			调用vue的无参函数 ：{{show()}} 
			调用vue的含参函数 ：{{add(1,2)}}		
		</div>
		<!-- 创建vue对象,添加自定义函数 -->
		<script>
			new Vue(
				el:"#app",//挂载点
				data:{//要被渲染的数据
					name:"Jack"					
				},
				methods:{//必须在methods里,创建Vue函数 
				//函数名：定义函数的语法
					show:function(){//无参函数
						console.log("hello vue");
					},
					add:function(a,b){//含参函数
						console.log(a)
					}
				}			
			);			
		</script>
	</body>
</html>

注意：

方法必须写在methods代码段中

3.Vue解析各种形式的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue解析 对象和数组</title>
		<!-- 1.导入vue.js -->
		<script src="vue.js">		
		</script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			<!-- 解析对象保存的数据语法：对象名.属性名 -->
			name属性的值是：{{a.name}}，age属性的值是：{{a.age}}
			name属性的值是:{{ b.name }} , age属性的值是:{{b.age}}  
			调用函数：{{a.show()}}<br />
			解析数组里的数据：{{c[1].name}}
		</div>
		<!-- 3.创建vue对象 -->
		<script>
			new Vue({
				el:"#app",//挂载点
				data:{
					//数据区
					//对象名：对象信息
					a :{//自定义对象
						name:"jack",
						age:20,						
						show: function(){
							alert("100")
						}						
					},					
					b : {
						name : "rose",
						age : 30
										},
					c:[//数组::::[ { k:v , k:v} ,{ k:v , k:v } ]
							{
								name:"邓冰",age:78
							},
							{
								name:"大标",age:45
							},
							{
								name:"狗蛋",
								age:79,
								sex:"女"
							}
						]					
				}
				
			});
		</script>
	</body>
</html>

4.Vue中data的三种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 data的三种写法</title>
		<!-- 引入js -->
		<script src="vue.js">	
		</script>
	</head>
	<body>
		<!-- 准备数据渲染区 -->
		<div id="app">
			{{msg}}
		</div>
		<!-- 创建vue对象 -->
		<script>
			new Vue({
					el:"#app",
					// //第一种：
					// data:{
					// 	msg:"hello~data"
					// },
					//第二种：
					// data(){//新语法
					// 	return{
					// 		msg:"hi~data"
					// 	}
					// }
					//第三种：
					data:function(){
						return{
							msg:"hi"
						}
					}				
				}			
			)
		</script>
	</body>
</html>

二.Vue的指令

1.测试

指令集

指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等

双向绑定 v-model
通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。MVVM是将"数据模型双向绑定"的思想作为核心，在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此View视图的数据的变化会同时修改Model数据源，而Model数据源数据的变化也会立即反应到View视图上。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue的指令</title>
		<script src="vue.js">			
		</script>	
		<style type="text/css">
			/*css语法:选择器{属性名：属性值}*/
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		<!-- 2.v-cloak解决闪现的问题:在浏览器上显示了插值表达式,使用v-cloak属性,使用css隐藏效果 -->
		<div id="app" v-cloak>
			{{msg}} {{msg}} {{msg}}
			<!-- 1.v-model双向绑定 -->
			<input type="text"v-model="msg"/>
			
			<!-- 3.v-if用来判断的，满足条件才展示 -->
			{{age}}
			<!-- v-if和v-show的区别？都可以判断，但是后者即使不满足条件也会被网页加载只是隐藏了 -->
			<span v-if="age>=18">成年人</span>
			<span v-show="age>=18">成年人</span>
			
			<!-- v-if v-else-if v-else组合的判断条件 -->
			<sapn v-if="score>=80&&score<100">成绩优秀</sapn>
			<sapn v-else-if="score>=60&&score<80">成绩中等</sapn>
			<sapn v-else-if="score>=0&&score<60">成绩不及格</sapn>
			<sapn v-else="score<=0&&score>=100">输入错误！</sapn>
			<br>
			<!-- 4.v-for用来循环，数组的遍历:类似于java里的高效for循环，o表示每次获取到的数据 -->
			用下标获取数组里的元素：{{arr[0]}} {{arr[1]}} {{arr[2]}}
				<!-- o代表是取到的数据,arr是数组名，相当于普通for循环 -->
			用v-for获取数组里的元素：<h1 v-for="o in arr">{{o}}</h1>
				<!-- o代表是取到的数据，i是下标，arr是数组名，相当于增强for循环 -->
			用v-for获取数组里的元素：<h1 v-for="o,i in arr">下标是：{{i}},数据是：{{o}}</h1>
			
			<!-- 5.v-on用来绑定事件，点击按钮时触发函数 -->
			<button v-on:click="show()">点我1</button>
			<button v-on:dblclick="show()">点我2</button>
			<button @click="show()">点我3</button>
			<button @dblclick="show()">点我4</button>
			
			<!-- 6.v-bind用来获取变量的值 -->
			<!-- <a href="{{url}}">链接1</a>错误的，把整个插值表达式当作字符串了
			<a v-bind:href="url">链接2</a>获取url变量的值 -->
			<a :href="url">链接3</a>
			
		</div>
		<script >
			new Vue({
				el:"#app",
				data:{
					msg:"hello~vue",
					age:12,
					score:120,
					arr:["杨幂","迪丽热巴","黄晓明"],
					url:"https://www.baidu.com"
				},
				methods:{
					show:function(){
						console.log("迪丽热巴")
					}
				}
			}
			);
		</script>
	</body>
</html>

三.构建Vue项目 lifecycle+npm+webpack

Vue的生命周期 lifecycle
使用vue做项目时，我们需要了解vue对象的生命周期和生命周期函数（Vue 实例从创建到销毁的过程），这样才能知道哪些事情应该在哪个函数里做。

如页面创建时，页面加载时，页面更新时，页面销毁时？

在这过程中，我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。

生命周期函数：

vue实例在某一个时间点会自动执行这些函数；
生命周期钩子函数不允许写成箭头函数；
可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）

细分每个过程：
在这里插入图片描述
在这里插入图片描述
npm 概念
npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

npm 为你和你的团队打开了连接整个 JavaScript 世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

官网：

https://docs.npmjs.com/about-npm 英文官网

https://www.npmjs.cn/ 中文官网

webpack 概念
Webpack是前端自动化构建工具，它基于nodejs实现，可以帮助我们实现资源的合并、打包、压缩、混淆的诸多功能。可以快速构建一个Vue项目，包括各类文件（assets资源、scripts脚本、images图片、styles样式）。

官网：
https://webpack.js.org/

四.Vue-cli脚手架

在windows客户端，windows+r—>cmd—>执行以下命令

C:\Users\Administrator>node -v
C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org
C:\Users\Administrator>npm config get registry
C:\Users\Administrator>npm install vue-cli -g
C:\Users\Administrator>vue -V
C:\Users\Administrator>where vue

1. 作用

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。
vue-cli是由Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本

2.安装nodejs并验证

安装nodejs,下一步下一步就可以,可以安装最新的15版本,win7的话可以安装14版本.使用以下dos命令提示符下执行：

node -v # v8.11.3，至少8以上,最新的是v15.11.0

3.配置npm

Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像

npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像

npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/

4.参数说明

注意单词的大小写

-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：--save—exact
-g 全局安装，全拼： --global

5.脚手架安装

vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟

npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必

vue –V #查看版本

where vue #vue安装在哪里

6.创建Vue项目的过程 npm

1.指定workspace：最好放在c盘
2.在这个workspce指定的位置：执行cmd回车，执行了命令
3.初始化了一个vue项目: vue init webpack 项目名称,回车,正确的选择yes/no
4,此时需要一定的时间去下载vue的项目结构
在这里插入图片描述

工作空间

进入工作空间目录：D:\workspace\vue

生成vue项目

基于vue.js的官方webpack模板：(乱码无需理会)
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包

vue init webpack jt01 #此处项目名不能使用大写---可能比较慢,要等

在这里插入图片描述
安装完成后：
在这里插入图片描述
在这里插入图片描述
注：

  • jt01 为自定义的 项目名称
  • 产生项目webpack模板，目录100+m，可见内容多复杂，庞大
  • 会自动生成node_modules临时目录，可以删除，每次编译、运行会自动产生

启动项目 & 停止项目

cd jt01 # 进入项目目录

npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟

在这里插入图片描述
测试访问
注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，它会自动改变端口号，以其具体提示的端口信息为准

7.HBuilderX管理Vue项目

打开Vue项目

HBuilderX是最新前端开发利器之一，全面支持Vue的开发，具有丰富的提示，使用它打开：D:\workspace\vue\jt01目录（可自行定义自己的目录）
在这里插入图片描述
在这里插入图片描述

项目结构

![在这里插入图片描述](https://img-blog.csdnimg.cn/79678a3f8c324143a3f93a459ba44b7c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzI0NDU2OQ==,size_16,color_FFFFFF,t_70

目录结构

这个目录结构非常重要，大家要熟记。就如你要生孩子去妇幼保健院，你要游泳去游泳馆。规定好每个目录的作用，方式和位置就约定统一了。有了这套规则，文件就不会乱放，这样找资源时就知道到哪里找，写代码文件时就按功能放到指定的目录中。这种方式已经非常常见，如Maven构建项目目录有强制的约定，如Spring框架中约定大于配置。

  • view 就是用户要访问的页面都存放在这个目录下，如Index.vue
  • static中保存一些静态的资源，如jquery、css、图片等
  • src 目录是一个很大的目录，包罗万象
  • components把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vue
  • router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。Router非常强大，老系统是url改变是在服务端进行刷新，而router支持在客户端刷新，就是url变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。此处不好理解，后期专门章节论述，不必心急，先记录下这个特点
    在这里插入图片描述
重要文件说明

Vue项目这么多文件，它们什么关系？写代码该从哪里下手呢？
常见操作: 1, 在components里写自定义组件 2, 在App.vue里注册自定义组件 3, 在main.js里引入第三方js

 index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app
 src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中
在这里插入图片描述

 src/App.vue 根组件,可以添加自定义组件

 src/router/index.js 引入子组件HellWorld.vue
在这里插入图片描述

调用关系图

在这里插入图片描述
简单来说项目加载的过程是：

index.html->main.js->App.vue->index.js->HelloWorld.vue

可以看到Vue项目是自有一套规则，一套机制的，非常系统化的。有固定的文件，有自定义的文件，各自放在指定的目录下，指定的文件中，指定的地方，最终来实现用户的需求。那在开发之前，你就必须了解这套机制，写代码的时候就规则清晰，如有神助，知道该如果写代码，知道为什么这么写，代码文件该放在哪，它们是谁调用谁，互相怎么调用的了。

常见错误
Permission denied

权限不足，windows以管理员身份运行，mac命令前加sudo
在这里插入图片描述
Unexpected end of JSON input while parsing near
在这里插入图片描述

清除缓存，重新安装

npm cache clean --force

npm install

unable to verify the first certificate

在这里插入图片描述

解决方法: 取消ssl验证：npm config set strict-ssl false,再次安装

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

打开（如果不是默认的文件夹， 是自定义的文件夹路径的话就是在自定义文件夹的目录下）

C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\download\index.js 
将下面这行注释：rejectUnauthorized: process.env.npm_config_strict_ssl !== 'false'
然后改为：  rejectUnauthorized : false    
重新运行：  vue init webpack project-name  就可以了

在这里插入图片描述

自定义组件

在这里插入图片描述

1,创建Car.vue文件(在src/components里)
<template>
  <h1>
    {{msg}}
  </h1>
</template>

<script>
  /* 支持导出的自定义组件*/
  export default{
    name : 'Car',
    data(){
      return{
        msg : "hello componets~~"
      }
    }
  }
</script>

<style>
</style>
2.修改App.vue文件,注册自定义组件
<template>
  <div id="app">
    <img src="./assets/logo.png">

   <!-- 3,使用自定义组件,本质上就是一个标签 -->
   <Car></Car>

  </div>
</template>

<script>
// 1,导入自定义组件
import Car from './components/Car.vue'
export default {
  name: 'App',
  //2, 添加指定的组件
  components:{
    Car
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
3,测试

启动服务器: npm run dev
打开浏览器访问:http://localhost:8080
在这里插入图片描述

五.ElementUI

1.安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

2.修改main.js,引入ElementUI

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

/* 为了优化网页的颜值,使用了ElementUI,参考官网*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.测试,修改Car.vue文件

<template>
  <!-- 获取值 -->
  <h1>
      {{msg}}
      <!-- 1.图标的效果 -->
      <i class="el-icon-share"></i><!-- 只能有一个根元素 -->
      <i class="el-icon-edit"></i>
      <i class="el-icon-s-promotion"></i>
      <!-- 2.layout栅栏的效果
      el-row是一行，一行默认是24列
      el-col是一列，
      span可以自定义合并的列数-->
      <el-row>
        <el-col :sapn="24">hello</el-col>

      </el-row>
      <el-row>
          <el-col :span="8">hello</el-col>
          <el-col :span="8">hello</el-col>
          <el-col :span="8">hello</el-col>

      </el-row>
      <!-- 3.el-button按钮的效果
         type可以修饰按钮的颜色，
         icon按钮可以加图片，
         circle是一个圆形-->
      <el-button type="primary">按钮1</el-button>
      <el-button type="shareing" icon="el-icon-share" circle></el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>

      <!-- 4.el-input输入框
      placeholder是提示信息，
      v-model体现了双向绑定，
      clearable可清空，
      show-password密码输入框
       通过鼠标或者键盘输入字符-->
      <el-input v-model="msg" placeholder="请输入用户名"></el-input>
       <el-input placeholder="请输入内容" v-model="input":disabled="true"></el-input>
       <el-input
         placeholder="请输入内容"
         v-model="msg"
         clearable>
       </el-input>

      <!-- 5.表格的效果
       el-table-column：表格里的列，label是列名
      想要给表格准备数据，数据必须放data里
      ：data是要获取啥数据，prop是要获取哪个属性的值
      stripe实现斑马纹的表格
       -->
       <el-table :data="arr" stripe>
         <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="品牌" prop="title"></el-table-column>
       <el-table-column label="描述" prop="describe"></el-table-column>
      </el-table>

  </h1>
 <!-- <span>
    {{msg}}
  </span>
  <i class="el-icon-edit"></i>  只能有一个根元素-->
</template>
<script>
  /*支持导出的自定义组件*/
  export default{
    name : "Car",
    data(){
      return{
        msg : "hello componets~~",
        //给表格准备多个数据
        arr : [{
          id:"01",
          title:"鸿星尔克",
          describe:"To be Number"
        },{
          id:"02",
          title:"Nike",
          describe:"Just do it"
        }]
      }
    }
  }
</script>
<style>
</style>

4.测试

在这里插入图片描述

5.ElementUI的表单测试

<template>
  <!-- 获取值 -->
  <h1>
      {{msg}}
      <!-- 1.图标的效果 -->
      <i class="el-icon-share"></i><!-- 只能有一个根元素 -->
      <i class="el-icon-edit"></i>
      <i class="el-icon-s-promotion"></i>
      <el-link icon="el-icon-edit">编辑</el-link>
      <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
      <!-- 2.layout栅栏的效果
      el-row是一行，一行默认是24列
      el-col是一列，
      span可以自定义合并的列数-->
      <el-row>
        <el-col :sapn="24">hello</el-col>

      </el-row>
      <el-row>
          <el-col :span="8">hello</el-col>
          <el-col :span="8">hello</el-col>
          <el-col :span="8">hello</el-col>

      </el-row>
      <!-- 3.el-button按钮的效果
         type可以修饰按钮的颜色，
         icon按钮可以加图片，
         circle是一个圆形-->
      <el-button type="primary">按钮1</el-button>
      <el-button type="shareing" icon="el-icon-share" circle></el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>

      <!-- 4.el-input输入框
      placeholder是提示信息，
      v-model体现了双向绑定，
      clearable可清空，
      show-password密码输入框
       通过鼠标或者键盘输入字符-->
      <el-input v-model="msg" placeholder="请输入用户名"></el-input>
       <el-input placeholder="请输入内容" v-model="input":disabled="true"></el-input>
       <el-input
         placeholder="请输入内容"
         v-model="msg"
         clearable>
       </el-input>

      <!-- 5.表格的效果
       el-table-column：表格里的列，label是列名
      想要给表格准备数据，数据必须放data里
      ：data是要获取啥数据，prop是要获取哪个属性的值
      stripe实现斑马纹的表格
       -->
       <el-table :data="arr" stripe>
         <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="品牌" prop="title"></el-table-column>
       <el-table-column label="描述" prop="describe"></el-table-column>
      </el-table>

      <!-- el-link超链接，gref设置网址，target设置打开方式，type就是颜色 -->
      <el-link href="#" target="_blank" type="success">超链接</el-link>
      <!-- el-radio单选框 -->
      <el-radio v-model="msg"label="1">单选框</el-radio>
      
      
      <!-- 6.el-form表单 ，用于提交数据，model用来获取指定的数据-->
      <el-form :model="goods">
        <!-- el-input是输入框，placeholder是提示信息，v-model双向绑定 -->
        <el-form-item label="标题" ><el-input v-model="goods.title" placeholder="请输入标题"></el-input></el-form-item>
        <el-form-item label="卖点" ><el-input v-model="goods.sell" placeholder="请输入卖点"></el-input></el-form-item>
        <el-form-item label="价格" ><el-input v-model="goods.price" placeholder="请输入价格"></el-input></el-form-item>
        <el-form-item label="详情" ><el-input v-model="goods.desc" placeholder="请输入详情"></el-input></el-form-item>
        <el-form-item>
          <el-button type="primary"@click="save">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>







  </h1>
 <!-- <span>
    {{msg}}
  </span>
  <i class="el-icon-edit"></i>  只能有一个根元素-->
</template>
<script>
  /*支持导出的自定义组件*/
  export default{
    name : "Car",
    methods: {//定义函数
      save(){
        alert("保存成功");
      }
    },
    data(){

      return{

        //给表单准备数据
        goods:{
            title:'华为',
            sell:'高端大气上档次',
            price:'9990',
            desc:'你值得拥有'
        },
        msg : "hello componets~~",
        //给表格准备多个数据
        arr : [{
          id:"01",
          title:"鸿星尔克",
          describe:"To be Number"
        },{
          id:"02",
          title:"Nike",
          describe:"Just do it"
        }]
      }
    }
  }
</script>
<style>
</style>

效果
在这里插入图片描述

望山。
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端学习 Vue笔记 完整版
HMS Howe的学习笔记
04-09 729
Vue更详细的笔记
前端vue学习过程，需重新学习
02-24
前端vue学习过程，需重新学习
2024年Web前端最全Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用，【原理+实战+视频+源码
最新发布
2401_84411433的博客
05-04 796
三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
Vue前端+快速入门【详解】
qq_1424674116的博客
03-04 1883
1.MVVM思想原始HTML+CSS+JavaScript开发存在的问题：操作麻烦，耦合性强为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-View-ViewModel：Model: 数据模型，指要展示到页面上的数据。在web开发中通常从服务端获取到数据，再把这些数据展示出来View: 视图，用于展示数据的各种html标签ViewModel: 视图模型控制中心，负责把Model数据显示到View里，也负责从View里收集数据到Model里。Vue框架就承担了这个角色。
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue前端开发框架复习大纲（一篇搞懂Vue！！牛的类！）
Labiu0822的博客
07-02 2032
因此， vue 提供了 事件修饰符 的概念，来辅助程序员更方便的 对事件的触发进行控制。当 列表的数据变化 时，默认情况下，vue 会 尽可能的复用 已存在的 DOM 元素，从而 提升渲染的性能。为了给 vue 一个提示，以便它能跟踪每个节点的身份， 从而在 保证 有状态的列表被正确更新 的前提下， 提升渲 染的性能。在浏览器中 访问一个使用了 vue 的页面 ，打开浏览器的 开发者工具 ， 切换到 Vue 面板 ，即可使用 vue-devtools 调试当前的页面。
前端学习之vue
weixin_53105591的博客
07-21 1169
前端学习之vue
前端vue 教程（详细版）
it_varlue的博客
04-04 4314
vue基础知识.vue生命周期.vue动画使用.vue路由配置和懒加载.vuex的使用.vue的插件库.
前端基础-VUE入门教程(一)
hjw15910531612的博客
07-21 3313
总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识
前端学习--Vue篇
starryHW的博客
01-08 229
vue
Vue学习-Vue入门
weixin_59357453的博客
04-02 4107
这是一篇vue学习记录
前端学习总结——VUE
nbnbbut333的博客
07-06 194
前端知识点总结——VUE（持续更新中） 1.框架和库的区别： 框架：framework 有着自己的语法特点、都有对应的各个模块 库 library 专注于一点 框架的好处： 1.提到代码的质量，开发速度 2.提高代码的复用率 3.降低模块之间的耦合度 （高内聚低耦合） UI：user interface GUI : graphical user interface CLI : command ...
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue
web前端--vue2技术+涵盖多个知识点+适合刚学习vue的小白使用，促进学习
07-14
使用人群：适合刚学习vue学习的小白，可以作为一个引领学习的文档，针对vue中常用的知识点进行学习和常用的注意点学习,在学习中就可以针对性的学习，使学习变得更高效一些。 使用场景及目标：在学习vue2的过程中，...
Python在线考试系统前端-大学毕业设计-基于vue
06-08
Python在线考试系统前端-大学毕业设计-基于vue 适合计算机专业大学生毕业设计 Python在线考试系统前端-大学毕业设计-基于vue 适合计算机专业大学生毕业设计 Python在线考试系统前端-大学毕业设计-基于vue 适合...
Vue-router学习笔记
02-24
学习Vue的必备技能，必须熟练使用Vue-router，能够在实际项目中运用。VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、...
vue3-element-admin:vue3-element-admin后台管理系统前端解决方案
04-17
基于vue3+ElementPlus+Vite开发，是一个开箱即用的中后台前端解决方案，它可以帮助你快速搭建企业级中后台产品原型，也可用于学习参考。 视频教程 技术储备 提前了解和学习以下知识会对您使用本项目有很大的帮助 和...
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 3013
黑马前端Vue学习笔记(未学完)
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
热门推荐
等风来
08-31 1万+
正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScriptVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应用程序开发中。前端框架那么多，为什么Vue.js非学不可？Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择，无论是小型项目还是大型复杂的应用都能发挥出色的效果。Vue.js使用双向绑定的数据模型，将数据和视图进行关联。
newbee-mall-vue3-app
01-05
newbee-mall-vue3-app 是一个基于 Vue3 框架开发的电子商城应用。它使用了最新的 Vue3 版本和相关的技术栈，拥有更佳的性能和更优秀的开发体验。 该应用经过精心设计和开发，具有出色的用户界面和良好的用户体验。用户可以在该电子商城应用中浏览各种商品，进行购物和下单操作。并且，该应用还提供了搜索商品、查看订单、管理个人信息等完善的功能。 newbee-mall-vue3-app 的开发借助了现代化的前端开发工具和技术，通过组件化、模块化的方式进行开发，代码结构清晰，易于维护和扩展。同时，该应用也实现了对后端接口的高效调用与数据交互，保证了系统的稳定性和高效性。 除此之外，newbee-mall-vue3-app 还具备一些新特性，例如响应式组件、虚拟 DOM 等，使得页面渲染更为高效。同时，利用Vue3的 Composition API，使得代码更加灵活、易于维护和重用。 总之，newbee-mall-vue3-app 是一个功能齐全、性能优越、界面精美的电子商城应用，它利用最新的前端技术为用户提供了愉快的购物体验，也为开发者提供了学习和借鉴的优秀范例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

望山。

谢谢您的打赏！！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值