脚本宝典收集整理的这篇文章主要介绍了cgb2110-day15,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<template>
<div> <!-- 只能有一个根元素,不然报错!!-->
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<h1>{{show()}}</h1>
<!-- 使用ElementUI的代码-->
<!-- 7.表格
el-table是表格,el-table-column是列,el-button是按钮
:data是要获取数据,值是一个属性名.stripe是有斑马纹的表格
label是列名,prop是要获取数据里的属性名
-->
<el-table :data="tableData" stripe>
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="标题" prop="title"></el-table-column>
<el-table-column label="卖点" prop="point"></el-table-column>
<el-table-column label="描述" prop="desc"></el-table-column>
<el-table-column label="更多" >
<el-button type="danger" @click="edit()">编辑</el-button>
<el-button type="danger" @click="del()">删除</el-button>
</el-table-column>
</el-table>
<!-- 6.el-checkbox多选框
v-model实现双向绑定,值是属性名称.如果checked属性的是指true,就是默认选中的效果
-->
<el-checkbox v-model="checked">足球</el-checkbox>
<!-- 5.el-radio单选框
v-model实现双向绑定,值是属性名称. label是选中元素后要提交的数据
-->
<el-radio v-model="sex" label="1">男</el-radio>
<el-radio v-model="sex" label="0">女</el-radio>
<!-- 4.el-input输入框
placeholder提示信息,v-model实现双向绑定,值是属性名称.
clearable可清空的,show-password密码输入框
-->
<el-input placeholder="请在这里输入..." v-model="name"></el-input>
<el-input placeholder="可清空的输入框..." v-model="name" clearable></el-input>
<el-input placeholder="可清空的密码输入框..." v-model="name" show-password clearable></el-input>
<!-- 1.el-button按钮,type属性用来控制颜色,icon图标,circle圆形,round圆角-->
<el-row>
<el-button type="danger">主要按钮</el-button>
<el-button type="danger" icon="el-icon-share" circle></el-button>
</el-row>
<el-row>
<el-button type="success" round>成功按钮</el-button>
</el-row>
<!-- 2.i图标-->
<i class="el-icon-share"></i>
<i class="el-icon-s-home"></i>
<!-- 3.布局 el-row是行,el-col是列,
:span是合并列,值表示要合并几列,默认一行是有24分栏/列
-->
<el-row>
<el-col :span="3"> 你好1 </el-col>
<el-col :span="8"> 你好2 </el-col>
<el-col :span="8"> 你好3 </el-col>
</el-row>
</div>
</template>
<script>
// 1,支持导出的组件
export default{
name: 'Person', //类似于组件名称
data(){ //通过data()返回数据
return{
name:'jack',
age:20,
sex:'0',
checked:true,
tableData:[
{
id:666,
title:'鸿星尔克',
point:'国货之光',
desc:'to be no.1'
},
{
id:888,
title:'特步',
point:'永不止步',
desc:'飞一样的感觉'
}
]
}
} ,
methods:{
show(){
return this.name+this.age;
} ,
edit(){
//优化成,通过前端的Ajax访问后端的一段java程序
alert("编辑成功!");
} ,
del(){
//优化成,通过前端的Ajax访问后端的一段java程序
alert("删除成功!");
}
}
}
</script>
<style>
</style>
t1
<template>
<h1>我是t1</h1>
</template>
<script>
</script>
<style>
</style>
t2
<template>
<h1>我是t2</h1>
</template>
<script>
</script>
<style>
</style>
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//-------1,导入自定义组件t1 t2
import t1 from './components/t1.vue'
import t2 from './components/t2.vue'
Vue.use(Router)
export default new Router({
routes: [
//------2,路由规则,根据不同的请求分发给不同的组件展示
{path: '/', name: 'HelloWorld',component: HelloWorld},
{ path:"/t1" , component:t1 },
{ path:"/t2" , component:t2 }
]
})
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 3.使用自定义组件,像标签一样的用 -->
<Person></Person>
<car></car>
<!-- 使用路由规则-->
<router-link to="/t1">t1</router-link>
<router-link to="/t2">t2</router-link>
<router-view></router-view>
</div>
</template>
<script>
// 1.导入自定义组件Person.vue(路径必须包含./)
import Person from './components/Person.vue'
import Car from './components/Car.vue'
export default {
name: 'App',
components: { //2.注册组件: 类似于局部组件
Person , //使用了 1.导入的组件
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>
主要作用: 1, 你的项目资源必须放入 Tomcat里,才能被浏览器 看到 2, 接受这次请求,并处理请求 3, 如果浏览器需要一个结果, 服务器就需要返回一个结果
1,解压 2,开启服务器(必须配置好JAVA_HOME) D:Javaapache-tomcat-8.5.72binstartup.bat 3,关闭服务器 D:Javaapache-tomcat-8.5.72binshutdown.bat 4,测试 http://localhost:8080
http://localhost:8090/day15/test01.html 本机:Tomcat的端口号/项目名称/资源名称
需要创建一个WEB-INF,是为了隐藏一些文件的访问权限.
https://start.aliyun.com
#哪儿执行的下载命令,就把指定仓库的资源下载到你的哪里
E:workspace>git clone https://gitee.com/cgblpx/cgb2110.git
把你准备上传的资源,放在git的工作空间.
git add .
git commit -m "test"
git push -u origin master
以上是脚本宝典为你收集整理的cgb2110-day15全部内容,希望文章能够帮你解决cgb2110-day15所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。