正文

cgb2109-day14(代码片段)

cgblpx  cgblpx  2023-02-02  282

关键词：

一,Vue组件的练习

–1,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 组件</title>
		<!-- 自己写一个全局组件和局部组件 -->
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app1">
			<!-- 1,使用组件 -->
			<Com1></Com1>
			<Com2></Com2>
			<Com10></Com10>
			<Com20></Com20>
		</div>
		<div id="app2">
			<!-- 1,使用组件 -->
			<Com1></Com1>
			<Com10></Com10>
		</div>
		<script>
			/* 2.创建全局组件,在全局使用 */
			Vue.component('Com1',
				template:'<h1>你好Com1</h1>'
			)
			Vue.component('Com10',
				template:'<ol><li>我是元素1</li><li>我是元素2</li></ol>'
			)
			new Vue(
				el:"#app1",
				/* 3.创建局部组件:只能在局部(id=app1的位置)使用 */
				components:
					'Com2':
						template:'<h1>你好Com2</h1>'
					,
					'Com20':
						template:'<button style="background-color: red;">按钮1</button>'
					
				
			)
			new Vue(
				el:"#app2"
			)
		</script>
	</body>
</html>

二,Vue路由Router

–1,概述

基于Vue组件化的思想,
从用户发起一个请求,一直到展示指定组件,这个过程就是Vue路由负责的
使用步骤: vue.js + vue-router.js 引入到网页中

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue路由</title>
		<!-- 1.引入js文件,注意顺序! -->
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区,即将展示组件的功能 -->
		<div id="app">
			<!-- 3.4,点击不同的元素,即将路由到不同的组件 -->
			<router-link to="/home">主页</router-link>
			<router-link to="/help">帮助页</router-link>
			<!-- 3.5,展示组件的内容 -->
			<router-view></router-view>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			//3.3,创建组件,让路由动态匹配
			var home=
				template:'<h1>我是主页..</h1>'
			
			var help=
				template:'<h1>我是帮助页..</h1>'
			
			//3.2,创建路由的细则
			//VueRouter表示vue路由的对象,routes属性用来描述细则
			var router=new VueRouter(
				//属性名:属性值
				routes:[
					//根据不同的请求,路由到不同的组件
					//path:访问路径,component:组件名称
					path:"/home",component:home  ,
					path:"/help",component:help
				]
			)
			new Vue(
				el:"#app",
				//3.1,设置路由功能
				// router:router //key 和value一样时,可以简写
				router//同上,简写形式
			)
		</script>
	</body>
</html>

–3,总结

–4,练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习路由</title>
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/runoob">runoob</router-link>
			<router-link to="/w3c">w3c</router-link>
			<router-view></router-view>
		</div>
		<script>
			var runoob=
				template:"<a href='http://www.runoob.com'>http://www.runoob.com</a>"
			
			var w3c=
				template:"<a href='http://www.w3school.com.cn'>http://www.w3school.com.cn</a>"
			
			var router=new VueRouter(
				routes:[
					path:"/runoob", component:runoob,
					path:"/w3c", component:w3c
				]
			)
			new Vue(
				el:"#app",
				router
			)
		</script>
	</body>
</html>

三,Vue的ajax

–1,概述

可以避免刷新整个网页,而实现了局部刷新的效果,异步访问的.
提高了网页的动态性,提高了网页的响应速度.
在Vue框架中,封装了Ajax的复杂语法,技术命名叫axios,
使用步骤: 导入vue.js + axios.js 文件
语法: axios.get(java程序的访问方式).then( a => console.log(a); )

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 axios的语法</title>
		<!-- 1.导入js文件:
			vue.js核心 + vue-router.js是路由 + axios.js使用vue封装好的Ajax技术
		 -->
		<script src="vue.js"></script>
		<script src="axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="show()">按钮</button>
		</div>
		<script>
			//Vue的属性:el挂载点 + data数据区 + methods方法区 
			      //components局部组件 + router创建路由
			new Vue(
				el:"#app" ,
				methods:
					show()
						//vue提供的对象,get函数是指即将发起一个get请求
						//参数是一段java程序的访问方式
						//当程序访问成功时,then函数是vue自动调用的函数
						axios.get('http://www.baidu.com/').then(
							//a记录着java程序的返回值return
							//=>叫箭头函数
							a => 
								//在函数体重,处理返回的结果
								console.log(a.data);
							
						)
					
				
			)
		</script>
	</body>
</html>

四,Vue-cli

–1,概述

npm:包管理器,npm命令会去指定的网址下载/安装好多的包(文件夹结构)
webpack:自动化构建项目的命令,可以自动下载项目相关的资源(html css js 图片),而且可以自动压缩,打包.

–2,安装vue-cli

1,安装原因

为了能够成功的使用vue项目,必须先安装vue-cli脚手架

2,安装nodejs.mis的应用程序

(win7系统只能装nodejs13的,win10系统装nodejs14),
双击下一步下一步就可以了.

3,验证nodejs是否安装:

C:\\Users\\WangYiBo>node -v
v14.17.5

4,安装脚手架:

C:\\Users\\WangYiBo>npm config get registry  #第一次获取,会是一个国外的网址,即将下载的非常慢,不好,必须修改!
C:\\Users\\WangYiBo>npm config set registry https://registry.npm.taobao.org #就是把npm的默认网址改成淘宝的!
C:\\Users\\WangYiBo>npm install vue-cli -g #安装vue脚手架,本质上是去npm下载了好多包,原则是一路没有遇到飘红的ERR,只有黄色的WARN没关系,遇到飘红就重新执行这个命令(也许要多次执行)
C:\\Users\\WangYiBo>vue -V  #查看vue-cli的版本
2.9.6
C:\\Users\\WangYiBo>where vue #查看下载的位置 (npm文件夹有20M左右)

五,创建Vue项目!!

1,首先创建一个文件夹,用来存放下载好的vue项目资源

2,在这个文件夹处,执行命令来下载

3,开始下载:

E:\\workspace\\vue>vue init webpack jt  #准备下载jt项目
#下载一些项目需要的资源,但是要进行一些配置,参考下图选择yes或者no

4,检查:

原则还是一路没有遇到飘红的ERROR
还有提示信息: Project initialization finished!

5,启动项目

E:\\workspace\\vue>cd jt  #进入项目所在的文件夹
E:\\workspace\\vue\\jt>npm run dev   #启动项目(在哪个项目执行这个命令就启动哪个项目)

6,访问项目

六,在项目中添加自己的资源

1,用Hbuilder打开你下载好的项目.

文件-打开目录-浏览项目位置-打开

2,目录结构

3,在vue项目中添加自定义组件

在src/components文件夹里,创建组件

<template>
  <div>
      msg
  </div>
</template>
<script>
//表明 这个组件可以导出
export default
    name:'Person',//组件名
    data()
      return
        msg :'hello vue project~'
      
    

</script>

<style>
</style>

在src/App.vue文件里,注册组件

<template>
  <div id="app">
    //3,使用自定义的组件
    <Person></Person>
  </div>
</template>
<script>
//1.导入指定的自定义组件 ,路径要求必须有./
import Person from './components/Person.vue'
export default 
  name: 'App',
  components: //2.添加组件
    Person //使用第一步导入成功的组件名
  

</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>

测试

1,进入项目所在的文件夹里,运行启动命令来启动项目 : npm run dev
2,打开浏览器访问: http://localhost:8080 ,观察有没有展示你自定义组件的内容

cgb2109-day03(代码片段)

文章目录一,MySQL数据的备份--1,用工具直接备份就行--2,练习二,条件查询--1,null--2,betweenand--3,limit分页--4,orderby--5,统计案例三,聚合函数--1,概述--2,测试四,分组--1,groupby--2,having五,事务--1,概述--2,测试一,MySQL数据的备份–1,用工具直接... 查看详情

cgb2109-day11(代码片段)

文章目录一,JS的语法--1,数组--2,二,标题三,标题一,JS的语法–1,数组<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>测试js数组</title> <script>//JS数组的特点:存的数据类型丰富,也有下查看详情

cgb2109-day06(代码片段)

文章目录一,JDBC--1,概述--2,使用步骤1,提供了丰富的工具类jar包,项目中导入jar包2,连接数据库:端口号3306库名cgb2109用户名root密码root3,写SQL4,处理数据库返回给java的结果--3,导入jar包1,选用哪个版本的jar包,要看你安装的数据库的版本2... 查看详情

cgb2109-day08(代码片段)

...的细节处理--3,其他标签二,练习学生信息系统--1,效果--2,代码三,CSS--1,概述--2,入门案例四,选择器!!!!--1,标签名选择器--2,class选择器--3,id选择器--4,分组选择器--5,属性选择器五,作业美化学生管理系统利用HTMLCSS完成用户注册的练习一,... 查看详情

cgb2109-day02(代码片段)

文章目录一,字段约束–1,唯一约束–2,主键约束二,基本函数--1,工具的使用--2,准备数据--3,基础函数的使用三,条件查询--1,基础语法四,,一,字段约束–1,唯一约束哪个字段添加了唯一约束,从此,字段值不能相同,使用uniqueC:\\Users\\WangYi... 查看详情

cgb2109-day10(代码片段)

文章目录一,Git--1,概述--2,准备工作--3,Git日常操作1,远程仓库:2,第一次上传::::3,下载::::4,不是第一次上传::::二,Javascript--1,概述--2,入门案例三,JS语法--1,数据类型和变量--2,运算符四,JS语句--1,分支结构--2,循环结构一,Git–1,概述常见命... 查看详情

cgb2109-day07(代码片段)

文章目录一,SQL攻击--1,模拟SQL攻击的现象--2,解决方案--3,练习PreparedStatement--4,扩展:程序优化1,创建工具类2,改造测试类3,总结二,标题三,标题一,SQL攻击–1,模拟SQL攻击的现象//出现了问题:SQL攻击://1,本质上就是因为SQL中出现了特殊符... 查看详情

cgb2109-day09(代码片段)

文章目录一,作业--1,美化学生管理系统二,CSS选择器--1,分组选择器,属性选择器三,盒子模型--1,概述--2,测试四,HTMLCSS综合案例--1,小票创建1.css文件改造html文件,引入css文件--2,用户注册创建2.css文件创建html文件,并引入2.css文件五,Git--1,... 查看详情

cgb2109-day12(代码片段)

文章目录一,DOM--1,用法--2,测试二,!!!JSON--1,概述--2,测试三,Vue--1,概述--2,入门案例把vue.js导入到你的项目中创建HTML文件,并引入vue.js测试总结--3,练习四,Vue的基础语法--1,运算符&函数一,DOM–1,用法第一步:获取document对象,window.document... 查看详情

cgb2109-day05(代码片段)

文章目录一,多表联查--1,方式3:子查询--练习1:查询research部门的所有员工姓名和工资--练习2:查询research部门的所有员工姓名和工资--练习3:查询总监的部门信息--练习4:查询李军的平均分--练习5:查询陈冰能讲的课程名二,数据库的扩... 查看详情

cgb2109-day01(代码片段)

文章目录一,数据库--1,概述--2,使用1,安装服务器端:存数据,管理数据2,安装客户端:连接服务器,操作服务器里的数据3,数据库的结构4,SQL语言1,概述2,分类:二,数据库的常见操作--1,创建库--2,查询库--4,删除库三,表的常见操作--1,使用指... 查看详情

cgb2109-day13(代码片段)

文章目录一,Vue的基础语法--1,解析类型丰富的data--2,data的三种写法二,Vue的指令--1,概述--2,v-model&v-cloak--3,v-if&v-show&v-for--4,v-on&v-bind三,Vue组件Component--1,概述--2,全局组件--3,局部组件四,一,Vue的基础语法–1,解析类型丰富的d... 查看详情

cgb2109-day17(代码片段)

文章目录一,模拟Servlet解析请求参数--1,测试二,Servlet解析post方式提交的数据--1,测试--2,前端HTML页面三,综合案例--1,需求--2,创建HTML网页--3,创建DeptServlet类--4,总结四,请求转发--1,概述--2,测试--3,总结五,响应Response--1,概述--2,测试六,重... 查看详情

cgb2109-day16(代码片段)

文章目录一,注解方式开发Servlet程序--1,创建新的web工程,创建Servlet--2,测试Servlet二,配置方式开发Servlet程序--1,创建Servlet类--2,配置Servlet类--3,测试--4,总结三,前后端整合--1,创建前端HTML网页--2,创建后端Servlet程序--3,配置Servlet类--4,测... 查看详情

cgb2109-day18(代码片段)

文章目录一,优化MyRequest类--1,测试二,Maven--1,概述1.仓库2,坐标:能够快速定位jar包3.依赖4.命令:--2,使用步骤1,解压apache-maven-3.6.3.rar2,打开解压好的文件夹,里面有一个conf,再里面有一个settings.xml3,在settings.xml中进行配置,镜像仓库和本... 查看详情

cgb2109-day15(代码片段)

文章目录一,在Vue项目中创建多个组件--1,项目结构--2,创建自定义组件Person.vue--3,创建自定义组件Student.vue--4,修改App.vue--5,测试二,在Vue项目中创建路由--0,项目结构--1,自定义组件t1--2,自定义组件t2--3,自定义路由router.js--4,修改App.vue使... 查看详情

cgb2106-day14(代码片段)

文章目录一,SpringMVC解析restful的请求参数--1,概述--2,测试创建RunApp启动类创建CarController类创建前端网页文件测试二,SpringMVC解析post的请求参数--0,项目结构--1,准备form表单--2,准备Student类--3,准备StudentController类--4,利用jdbc把接受到的... 查看详情

cgb2107-day14(代码片段)

文章目录一,Maven--1,概述--2,使用步骤二,在IDEA里用maven--1,创建Maven工程--2,配置maven--3,修改pom.xml文件,添加jar包的坐标--4,检查本地仓库5,常用的maven命令三,SpringBoot--1,概述--2,项目结构--3,创建SpringBoot工程--4,给工程配置maven信息--5,spring... 查看详情