cgb2107-day13

2024-08-22 06:58
文章标签 cgb2107 day13

本文主要是介绍cgb2107-day13，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

    • 一,练习Vue指令
      • --1,测试
    • 二,Vue项目的使用
      • --1,概述
      • --2,自定义组件
        • 新建Car.vue文件(放在src/components文件夹里)
        • 修改App.vue文件(注册组件)
        • 测试(启动项目)
    • 三,ElementUI
      • --1,概述
      • --2,安装
      • --3,修改main.js
      • --4,修改Car.vue组件文件
      • --5,测试
      • --6,总结
    • 四,Maven
      • --1,在IDEA里创建Maven工程
        • File-New-Project-输入工程名称和GroupId-Finish
        • 修改pom.xml,添加jar包的坐标,然后刷新下载,pom.xml文件里不飘红就可以了
        • pom.xml

一,练习Vue指令

–1,测试

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>练习Vue指令</title><script src="js/vue.js"></script></head><body><div id="app"><h1 v-if="seen">now u see me</h1><h1 v-show="seen">now u see me</h1><ol><li v-for="i,a in desc">{{a}} -> {{i}}</li></ol><a @click="eat()">点我</a><br /><input type="radio" value="w3c" v-model="site"/>w3c<input type="radio" value="runoob" v-model="site"/>runoob<p>您选择的是:{{site}}</p></div><script>new Vue({el:"#app",data:{site:'', //添加获取或修改指令seen:true ,//添加判断指令desc:['鸿星尔克','361','贵人鸟','国货之光']  //添加循环指令},methods:{eat(){ //添加事件指令console.log(100)}}})</script></body>
</html>

二,Vue项目的使用

–1,概述

src文件夹: 写自己的业务
src/components文件夹: 定义组件
src/router文件夹: 定义路由
src/App.vue文件: 注册组件
src/main.js文件: 入口js文件
index.html: 作为项目的主页

–2,自定义组件

新建Car.vue文件(放在src/components文件夹里)
<template> <!-- 1.写 HTML代码 --><h1>{{msg}}</h1>
</template><script> /* 2.写js代码 *///可导出的自定义组件export default{name : 'Car',data() {   //准备数据return {msg:'Hello Vue!!!'}}}
</script><style> /* 3.写css代码*/
</style>
修改App.vue文件(注册组件)
<template><div id="app"><!-- 4. 使用自定义组件,其实就当做HTML标签用就行了--><Car></Car></div>
</template><script>
//1,导入自定义组件 Car.vue
//Car 是指 Car.vue里面的name属性的值
// ./components/Car.vue 是指 自定义组件的路径(必须以./开始)
import Car from './components/Car.vue'
export default {name: 'App',//2,注入组件(类似于局部组件的语法)components:{Car  //3,使用了第一步的名字}
}
</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, 启动项目(在你的workspace里jt01文件夹里执行): npm run dev
在这里插入图片描述

2, 打开浏览器测试效果
在这里插入图片描述

三,ElementUI

–1,概述

是一套漂亮的网页,有各种元素,直接用现成 代码
https://element.eleme.io

–2,安装

1, 进入你的项目目录中( E:\workspace\vue\jt01 )
2, 执行安装命令 npm i element-ui -D
在这里插入图片描述

–3,修改main.js

// 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'import ElementUI from 'element-ui'; //导入下载好的elementui
import 'element-ui/lib/theme-chalk/index.css';//导入下载好的elementui css
Vue.use(ElementUI); //使用elementuiVue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

–4,修改Car.vue组件文件

<template> <!-- 1.写 HTML代码 --><div> <!-- 组件只能有一个根元素--><h1>{{msg}}</h1><!-- 开始使用elementui的组件,本质上就是一些标签 --><!-- 2.icon图标,,使用i组件,class的值是 图标名称 --><i class="el-icon-edit"></i><i class="el-icon-s-home"></i><i class="el-icon-loading"></i><!-- 1.layout布局,默认一行是24个分格 el-row是行 el-col是列--><el-row><el-col :span="3">品牌</el-col><el-col :span="10">价格</el-col><el-col :span="11">描述</el-col></el-row><!-- 3.按钮el-button组件--><el-row><el-button type="danger" >普通按钮</el-button><el-button type="danger" round>普通按钮</el-button> <!-- 圆角--><el-button type="danger" circle icon="el-icon-edit"></el-button> <!-- 圆形带图标--></el-row><!-- 4.输入框 el-input,添加属性实现输入效果v-modelclearable可清空的输入框   show-password密码隐藏效果 :disabled="true"禁用状态--><el-input placeholder="输入姓名" v-model="msg" clearable show-password></el-input><el-input placeholder="输入姓名" :disabled="true"></el-input><!-- 5.表格标签el-table表示表格,el-table-column表示表格项,label是列名,:data用来获取arr的数据 ,prop用来获取指定属性的值--><el-table :data="arr"><el-table-column label="编号" prop="id"></el-table-column><el-table-column label="品牌" prop="pinpai"></el-table-column><el-table-column label="描述" prop="desc"></el-table-column><el-table-column label="价格" prop="price"></el-table-column><el-table-column label="更多"><!-- 圆形按钮 ,icon设置图标 ,type设置颜色 --><el-button circle icon="el-icon-edit" type="danger"></el-button><el-button circle icon="el-icon-delete" type="danger"></el-button></el-table-column></el-table><!-- 6.表单标签 --><el-form><el-form-item label="标题: "><el-input placeholder="请输入..." v-model="item.name"></el-input></el-form-item><el-form-item label="卖点: "><el-input placeholder="请输入..." v-model="item.sellpoint"></el-input></el-form-item><el-form-item label="价格: "><el-input placeholder="请输入..." v-model="item.price"></el-input></el-form-item><el-form-item label="详情: "><el-input placeholder="请输入..." v-model="item.desc"></el-input></el-form-item><el-form-item><el-button type="danger" @click="save()">保存</el-button></el-form-item></el-form></div>
</template>
<script> /* 2.写js代码 *///可导出的自定义组件export default{name : 'Car',data() {   //准备数据return {msg:'Hello Vue!!!',arr:[  //为表格准备数据{id : 1,pinpai : '鸿星尔克',desc : 'to be no.1',price : 999},{id : 2,pinpai : '特步',desc : '飞一样的感觉',price : 666}],item : { //为表单准备数据name : '测试标题',sellpoint : '测试卖点',price : 99,desc : '测试详情'}}},methods:{ //写方法save(){alert("保存成功!");}}}
</script><style> /* 3.写css代码*/
</style>

–5,测试

在这里插入图片描述

–6,总结

1, 安装elementui
2, 修改main.js 引入elementui
3, 使用了各种组件(标签)
图标 : i 标签, 配置class属性,属性的值是图标的名字
布局: el-row标签表示行元素 el-col标签表示列元素 ,默认是一行有24分栏,:span属性可以自由组合
按钮: el-button标签表示按钮, type属性用来指定元素颜色,icon属性可以给按钮添加图标,round circle…
输入框: el-input标签是输入框, 必须指定v-model属性才能实现输入的效果
表格: el-table标签表示表格 , el-table-column表示表格里的列 , 通过:data属性获取数组里的数据, 通过label属性指定表格里的 表头, 通过prop属性绑定要获取的值
表单: el-form标签是表单,el-form-item表示表单项, 通过label属性指定表单项的名字,通过v-model属性获取表单数据

四,Maven

–1,在IDEA里创建Maven工程

File-New-Project-输入工程名称和GroupId-Finish
修改pom.xml,添加jar包的坐标,然后刷新下载,pom.xml文件里不飘红就可以了

在这里插入图片描述

pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>cn.tedu</groupId><artifactId>cgb2107maven</artifactId><version>1.0-SNAPSHOT</version><!-- pom.xml是maven工程的核心文件 , 不许飘红里面放了jar包的坐标 groupId  artifactId version--><dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.48</version></dependency></dependencies></project>

这篇关于cgb2107-day13的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1095559。

相关文章

【读书笔记-《30天自制操作系统》-12】Day13

【读书笔记-《30天自制操作系统》-12】Day13

本篇的内容仍然是定时器的相关讲解。上一篇内容中对于中断程序做了许多优化，但是这些优化到底起了多少作用呢？本篇用一种测试方法来进行测试。然后本篇继续引入链表与哨兵的概念，进一步加快超时的中断处理。 1. 主程序简化 开发过程到了这一步，程序的代码量已经不少了。但其中其实有很多重复和可以简化的地方。 比如在显示窗口的时候多次出现了如下代码： boxfill8(buf_win, 160, C
阅读更多...
chapter09-OOP高级部分——（内部类）——day13

chapter09-OOP高级部分——（内部类）——day13

413-四种内部类 414-局部内部类1 记住: (1)局部内部类定义在方法中/代码块(2)作用域在方法体或者代码块中(3)本质仍然是一个类 415-局部内部类2 416-匿名内部类本质 匿名内部类只能用一次，并实例化了一个tiger对象， tiger指向它的对象，tiger是它的对象名 417-匿名内部类使用 //5．注意("ja
阅读更多...
小程序学习day13-API Promise化、全局数据共享（状态管理）、分包

小程序学习day13-API Promise化、全局数据共享（状态管理）、分包

44、API Promise化 （1）基于回调函数的一部API的缺点：小程序官方提供的异步API都是基于回调函数实现的，容易造成回调地狱的问题，代码可读性、可维护性差 （2）API Promise化概念： 指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于Promise的异步API，提高代码的可读性、可维护性，避免回调地狱的问题。 （3）实现API Promise
阅读更多...
cgb2107-day18

cgb2107-day18

文章目录 一,Spring AOP--1,概述--2,使用步骤--3,创建切面--4,测试创建启动类创建HelloController 类测试 二,两个框架的整合--1,需求--2,开发步骤0,项目结构1,RunApp启动类2,application.yml改端口3,Car类,封装数据4,CarService接口,定义抽象方法5,CarServiceImpl实现类,重写抽象方法6,CarC
阅读更多...
cgb2107-day17

cgb2107-day17

文章目录 一,IOC的xml方式--了解--1,项目结构--2,创建Hello类--3,创建User类--4,创建配置文件--5,创建测试类 二,IOC的注解方式--重点--0,项目结构--1,创建类--2,配置包扫描--3,测试 三,模拟 DI依赖注入--1,概述--2,测试创建Emp类创建Dept 类创建测试类 四,Spring提供的DI依赖注入--1,创建UserInfo 类--2,
阅读更多...
cgb2107-day16

cgb2107-day16

文章目录 一,练习前后端整合,包括入库--1,java代码--2,前端代码--3,测试--4,总结 二,SpringMVC框架解析post提交的请求参数--0,项目结构--1,准备表单--2,准备启动类--3,准备Controller类,解析请求数据--4,创建Student类,用来封装数据--5,测试--6,扩展:入库修改pom,添加jdbc的jar包创建数据库表创建StudentCont
阅读更多...
cgb2107-day15

cgb2107-day15

文章目录 一,SpringMVC框架--1,概述--2,入门案例项目结构创建启动类创建CarController类测试 二,springmvc框架解析请求参数--1,get方式解析复杂的参数创建Car类 --2,restful方式在IDEA里创建后端代码UserController 类在HB里创建前端html代码测试 练习:需求修改前端页面修改后端代码,创建类 --3,post方式准备表单
阅读更多...
cgb2107-day14

cgb2107-day14

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

cgb2110-day13

文章目录 一,路由的练习--1,测试 二,Vue的Ajax--1,概述--2,测试 三,使用axios--1,需求--2,创建1.json文件--3,创建网页,发起Ajax的请求,请求数据并处理数据--4,总结 四,Vue脚手架--1,Vue生命周期--2, 一些概念--3,安装nodejs--4,修改npm网址--5,安装脚手架 五,Vue项目--1,创建工作空间--2,下载项目-----
阅读更多...
Python学习打卡：day13

Python学习打卡：day13

day13 笔记来源于：黑马程序员python教程，8天python从入门到精通，学python看这套就够了 目录 day1397、初识对象98、类的成员方法类的定义和使用成员变量和成员方法成员方法的定义语法 99、类和对象在程序中通过类来描述基于类创建对象 100、构造方法课后练习 101、魔术方法\_\_str\_\_字符串方法\_\_lt\_\_小于符号比较方法\_\_le\_\_
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2