前端（day06）vue组件，Element-UI

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：属性