vue组件
概念
组件(Component)是带有一个名字且可复用的 Vue 实例。组件可以扩展 HTML 元素,封装可重用的代码。
基本语法
两步:
第一步:定义模板
var tem=Vue.extend({
props:组件的属性,
data: function(){}组件的数据函数,
template: 组件解析的标签模板
})
第二步:将模板注册到组件中
//Vue.component(组件名称,模板对象)
Vue.component('my-component', { /* ... */ })
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<el-button title="点击我"></el-button>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
//1.定义模板
var tem=Vue.extend({
//prors:["属性名称1","属性名称2"]自定义组件的属性,给组件里面的标签灵活赋值
"props":["title"],
//template:html标签,设置自定义样式
"template":"<button style='border-radius: 10px;'>{{title}}</button>",
});
//2.注册组件
Vue.component("el-button",tem);
//3.创建Vue对象
new Vue({
"el":"#app"
});
</script>
</body>
</html>
定义组件名称时:
1.调用方法时,Vue的V必须大写
2.设置参数时,template名称是固定的
3.组件名称写法:字母全小写且包含一个连字
Element-UI
概念
网站快速成型工具,是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
(https://element.eleme.cn/#/zh-CN)
以下代码来源于element-ui网站组件下的hello world中,在文件中的的网址下载以下即可引入element-ui
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
引入库
1.引用 index.css 2.引入vue.js 3.引入index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引用 index.css-->
<link rel="stylesheet" type="text/css" href="js/element/element-ui/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
//引入vue.js
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
//引入index.js
<script src="js/element/element-ui/lib/index.js"></script>
<script type="text/javascript">
new Vue({
"el":"#app"
})
</script>
</body>
</html>
组件
行组件:
<el-row>子组件1,子组件2</el-row>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
按钮组件:
<el-button></el-button>
type属性改变按钮的样式:info、danger等
<el-button type="primary">主要按钮</el-button>
icon属性:在按钮上显示icon图标
<el-button icon="el-icon-search">搜索</el-button>
单词:
template:模板
component:组件
property:属性