关键词：
一,练习vue路由
–1,代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习vue路由</title>
<script src="vue/vue.js"></script>
<script src="vue/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>
let router = new VueRouter(
routes:[ //把不同的请求,分发给不同的组件处理
//点击runoob时,匹配到对应的组件,展示runoob的网址
path:'/runoob',
component:
template:'<h1><a href="https://www.runoob.com">https://www.runoob.com/</a></h1>',
,
,
//点击w3c时,匹配到对应的组件,展示w3c的网址
path:'/w3c',
component:
template:'<h1><a href="https://www.w3school.com.cn">https://www.w3school.com.cn/</a></h1>',
,
]
)
new Vue(
el:"#app",
router
)
</script>
</body>
</html>
–2,总结
二,Vue-cli脚手架
–1,概述
是指vue的客户端,是使用vue项目的前提.
vue脚手架提供了丰富的功能,只要安装成功,就可以使用的.
–2,安装
1, 安装Nodejs(下一步下一步), 并检查(在DOS窗口里执行DOS命令 node -v)
2, 修改npm的镜像(下载的快) :
npm config set registry https://registry.npm.taobao.org #修改下载资源的网址成taobao
3, 正式安装(没有飘红ERR就行了):
npm install vue-cli -g #全局安装vue脚手架
vue –V #查看脚手架的版本
where vue #查看vue脚手架安装在哪里
4, 下载vue项目
指定一个工作空间的路径,存放vue项目的代码
在工作空间的位置,输入cmd,敲入回车,输入以下命令:
vue init webpack jt01 #利用脚手架下载jt01的项目100M+
进行一些选项的配置,yes/no,参考下图选答案.
5,检测vue项目是否下载完了
原则是: 一路没有遇到飘红的ERR的话,就可以了
6，测试项目
按照提示,再执行两条命令:
cd jt08 #进入项目文件夹里
npm run dev #启动项目
DONE Compiled successfully in 9949ms #表示项目启动成功
打开浏览器访问:http://localhost:8080
7,用Hbuilder打开Vue项目
文件–打开目录–选中刚刚下载好的vue项目–确定
三,在Vue项目中添加自定义组件
–1,创建Car.vue文件-自定义组件
位置:在src/components文件夹里
<!-- 写HTML的代码 -->
<template>
<div>
<h1>msg</h1>
</div>
</template>
<!-- 写js的代码 -->
<script>
// 提供一个支持导出的组件
export default
name:'Car' ,//组件名称,通常和文件名一致
data() //准备返回数据
return
msg:'hello vue~~'
</script>
<!-- 写css的代码 -->
<style>
</style>
–2,修改App.vue文件
把自定义组件,引入到这个文件里
<template>
<div id="app">
<!-- 3.使用自定义组件,当做HTML元素-->
<Car></Car>
</div>
</template>
<script>
//1.导入指定位置的自定组件car.vue
import Car from './components/Car.vue'
//2,使用components属性,使用自定义组件
export default
name: 'App',
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,测试
1,服务器保证是启动的,编译了新的代码
2,在浏览器里http://localhost:8080/测试
四,练习自定义组件
–1,创建person.vue的组件
<template>
<div>name</div>
</template>
<script>
export default
name:'person',
data()
return
name:'jack'
</script>
<style>
</style>
–2,修改App.vue,引入自定义组件
<template>
<div id="app">
<!-- 3.使用自定义组件,当做HTML元素-->
<Car></Car>
<person></person>
</div>
</template>
<script>
//1.导入指定位置的自定组件car.vue
import Car from './components/Car.vue'
import person from './components/person.vue'
//2,使用components属性,使用自定义组件
export default
name: 'App',
components:
Car , //注册刚刚导入的自定义组件
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>
–3,测试
1,在DOS窗口敲个回车(目的是自动编译新的代码)
2,打开浏览器,刷新看新数据http://localhost:8080
五,ElementUI
–1,概述
是饿了么提供的一套漂亮的前端网页展示的效果
–2,使用步骤
1, 在当前工程里,下载element-ui的工具
npm i element-ui -S #安装element-ui
2, 检查下载的结果
–3,修改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/>'
)
–4,测试,修改自定义组件person.vue/car.vue
<!-- 写HTML的代码 -->
<template>
<div>
<h1>msg</h1>
<!-- 1.按钮 -->
<el-button type="success">成功按钮</el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
<!-- 2.布局,每行默认是24分格,自由组合
:span属性表示合并列,el-row表示行元素,el-col表示列元素
-->
<el-row>
<el-col :span="2">123</el-col>
<el-col :span="12">456</el-col>
</el-row>
<!-- 3.图标,i表示图标网页的元素,class属性指定要用哪个图标-->
<i class="el-icon-share"></i>
<i class="el-icon-s-flag"></i>
<!-- 4.按钮,el-button按钮效果,type设置颜色,circle圆形,icon给按钮加图标-->
<el-button type="success" round icon="el-icon-search">立即注册</el-button>
<el-button type="success" circle icon="el-icon-delete"></el-button>
</div>
</template>
<!-- 写js的代码 -->
<script>
// 提供一个支持导出的组件
export default
name:'Car' , //组件名称,通常和文件名一致
data() //准备返回数据
return
msg:'hello vue~~'
</script>
<!-- 写css的代码 -->
<style>
</style>
cgb2108-day06(代码片段)
...拟用户登录--3,JDBC的练习--4,JDBC的总结--5,修改释放资源的代码二,HTML--1,概述--2,入门案例一,JDBC–1,创建工具类packagecn.tedu.jdbc;importjava.sql.Connection;importjava.sql.DriverManager;//提供丰富的方法,方便的jdbc操作publiccl 查看详情
cgb2108-day08(代码片段)
文章目录一,表单提交数据--1,代码二,CSS--1,概述--2,入门案例--3,基础选择器--4,高级选择器三,盒子模型--1,概述--2,练习三,一,表单提交数据–1,代码<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>测试表... 查看详情
cgb2108-day17(代码片段)
文章目录一,Restful解析参数的练习--1,创建类--2,创建Order类--3,创建前端网页二,SpringMVC框架解析post提交的数据--1,创建网页,提供表单--2,创建MavenModule--3,创建启动类--4,创建StudentController解析请求参数--5,创建Student类--6,总结三,扩展把... 查看详情
cgb2108-day16(代码片段)
文章目录一,SpringBoot--1,概述--2,使用二,SpringMVC框架--1,概述--2,工作原理--3,解析请求参数准备创建mavenmodule准备启动类准备资源测试三,SpringMVC解析get方式的请求参数--1,测试--2,总结四,RestFul数据的解析--1,测试五,练习--1,解析请求参数... 查看详情
cgb2108-day13(代码片段)
文章目录一,Vue练习--1,vue解析数据--2,Vue指令二,Vue组件--1,概述--2,测试三,Axios技术--1,概述--2,测试项目结构网页代码1.json文件代码总结四,一,Vue练习–1,vue解析数据<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> &l 查看详情
cgb2108-day07(代码片段)
文章目录一,改造JDBC释放资源--1,完善工具类--2,修改测试类二,HTML--1,入门案例--2,常用标签--3,表格标签--4,表单标签--5,提交数据作业制作表单一,改造JDBC释放资源–1,完善工具类packagecn.tedu.jdbc;importjava.sql.*;//提供丰富的方法,方便的jd... 查看详情
cgb2108-day02(代码片段)
文章目录一,作业--1,创建表--2,插入数据二,使用Sqlyog工具--1,创建库--2,创建表--3,创建记录三,字段约束--1,主键约束--2,非空约束--3,唯一约束四,基础函数--1,概述--2,测试五,条件查询--1,测试一,作业–1,创建表C:\\Users\\WangYiBo>mysql-uroot-... 查看详情
cgb2108-day15(代码片段)
文章目录一,ElementUI--1,测试二,maven--1,概述--2,使用步骤--3,IDEA里整合Maven--4,IDEA里创建Maven工程--5,修改pom.xml文件,添加jar包的坐标--6,检查是否下载完成--7,总结三,IDEA里创建SpringBoot项目--1,测试一,ElementUI–1,测试<template><div>nam... 查看详情
cgb2108-day03(代码片段)
文章目录一,条件查询--1,测试二,聚合函数--1,概述--2,测试三,分组--1,概述--2,测试四,事务--1,概述--2,测试五,字段约束--1,测试一,条件查询–1,测试#limit:分页,限制数据展示的条目#展示两条员工信息SELECT*FROMempLIMIT2#取前几条SELECT*FROMemp... 查看详情
cgb2108-day11(代码片段)
...,DOM--1,概述--2,测试三,JSON--1,概述--2,测试创建js文件,存放js代码创建html网页文件,引入js代码四,Vue--1,概述--2,入门案例--3,总结4,改造入门案例五,Vue的运算符--1,测试一,JS练习–1,测试<!DOCTYPEhtml><html> <head> <metachars 查看详情
cgb2108-day12(代码片段)
文章目录一,DOM/JSON的练习--1,测试二,Vue的语法--1,定义函数--2,定义复杂数据并解析--3,data的三种写法三,Vue指令--1,概述--2,测试--3,一,DOM/JSON的练习–1,测试<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <ti 查看详情
cgb2108-day10(代码片段)
文章目录一,JS语句--1,测试二,JS数组--1,概述--2,测试三,JS函数--1,概述--2,测试--3,练习四,JS对象一,JS语句–1,测试<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>测试js语句</title> &l 查看详情
cgb2108-day09(代码片段)
文章目录一,作业:完成用户注册--1,创建css文件,写css--2,创建HTML文件,引入css二,JS--1,概述--2,入门案例--3,JS语法--4,JS语句一,作业:完成用户注册–1,创建css文件,写css/*修饰输入框*/.a width:300px;/*宽度*/ height:30px;/*高度*/ font-size:20px;/*字号... 查看详情
cgb2108-day18(代码片段)
文章目录一,修改服务器的端口号--1,在resources里创建application.yml文件--2,测试二,IOC的xml方式--1,创建配置文件spring.xml--2,创建测试类三,IOC的注解方式--1,定义类使用注解@Component--2,配置包扫描:指定扫描的包的名字--3,测试--4,总结四... 查看详情
cgb2108-day04(代码片段)
文章目录一,索引--1,概述--2,测试二,视图--1,概述--2,测试三,多表联查--1,准备数据--2,三种方式--3,测试六,一,索引–1,概述为了提高查询效率.索引会单独生成一张表,要合理的使用索引.分类:1,单值索引:一个索引只包含一个字段2,唯一... 查看详情
cgb2108-day01(代码片段)
文章目录一,数据库--1,概述--2,安装--3,数据库结构二,SQL语言--1,概述--2,数据库的操作1,查询所有数据库2,创建数据库(不能同名)3,删除数据库--3,表的操作1,查询所有表2,创建表3,修改表4,删除表5,练习4,记录--1,查询所有记录--2,向表中插... 查看详情
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... 查看详情