Element入门笔记

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

组件：组成网页的部件，例如：超链接、按钮、图片、表格等。

学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是https://element.eleme.cn/#/zh-CN

1.使用Element步骤：

1.引入Element的css、js文件和Vue.js

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2.创建Vue核心对象

<script>
  new  Vue({
    el:"#app"
  })
</script>

3.复制官网Element组件代码

2.Element布局：

Element 提供了两种布局方式：

• Layout 布局

​ 通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

​在左菜单栏找到 Layout 布局 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 head 标签内，将html标签拷贝到 <div id="app"></div> 标签内。

• Container 布局容器

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中；将html标签拷贝到 <div id="app"></div> 标签中，再将数据模型拷贝到 vue 对象的 data() 中。