项目结构
scr文件夹:写业务
src/components:定义组件
src/router:定义路由
src/App.vue:注册组件
src/main.js:入口js
index.html:项目主页
自定义组件
src/components内新建组件
<template><!-- 1.html代码 -->
<h1>{{msg}}</h1>
</template>
<script>/* 2.js代码 */
// 可导出
export default{
name:'Car',
data(){/* 必须声明称一个函数 */
return{
msg:'欢迎光临'
}
}
}
</script>
<style>/* 3.css代码 */
</style>
修改App.vue注册组件
<template>
<div id="app">
<!-- 4.使用自定义组件-->
<Car></Car>
</div>
</template>
<script>
// 1.导入自己的组件
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.启动项目: npm run dev
2.打开浏览器测试效果
element-ui 导入main.js
import ElementUI from 'element-ui';/* 导入下载好的element-ui */
import 'element-ui/lib/theme-chalk/index.css';/* 导入下载好的element-css */
Vue.use(ElementUI);/* */
使用elementui标签
1.Layout布局 默认一行24个分格
<!-- 1.Layout布局 默认一行24个分格-->
<el-row>
<el-col :span="8">品牌</el-col>
<el-col :span="8">价格</el-col>
<el-col :span="8">描述</el-col>
</el-row>
2.图标
<!-- 1.使用图标 -->
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-s-home"></i>
<i class="el-icon-loading"></i>
3.按钮
<!-- 3.按钮图标 el-button-->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary" round disabled>主要按钮</el-button>
<el-button type="success" circle></el-button>
<el-button type="info" round icon="el-icon-message" >信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger" round icon="el-icon-star-off">危险按钮</el-button>
<el-button type="text">文字按钮</el-button>
</el-row></br>
4.输入框 必须设置v-model属性才能实现输入效果-+
<!-- 4.输入框 el-input -->
<el-input placeholder="请输入内容" v-model="msg" clearable></el-input>
<el-input placeholder="请输入内容" v-model="msg" :disabled="true"></el-input>
<el-input placeholder="请输入内容" v-model="msg" clearable show-password></el-input>
5.表格
<!-- 5.表格 标签 内容需要在data里准备数组 label为表格每一列命名 -->
<el-table :data="arr">
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="品牌" prop="brand"></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="更多" >
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-table-column>
</el-table>
6.表单
<!-- 6.表单 -->
<el-form>
<el-form-item label="标题:">
<el-input v-model="form.name" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="卖点:">
<el-input v-model="form.sale" placeholder="爆款热销"></el-input>
</el-form-item>
<el-form-item label="价格:">
<el-input v-model="form.price" placeholder="999"></el-input>
</el-form-item>
<el-form-item label="详情:">
<el-input v-model="form.aaa" placeholder="我是详情"></el-input>
</el-form-item>
<el-form-item >
<el-button v-on:click="save()" > 保存</el-button>
</el-form-item>
</el-form>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_55740233/article/details/120217211
内容来源于网络,如有侵权,请联系作者删除!