Element UI:简单的入门HelloWorld

1.简介

由于本人没有使用node.js以及npm,所以决定使用 unpkg.com/element-ui 这个来简单的测试,当前学习来源与Element UI官网:ElementUI官方demo

2.导入基本的js以及css样式

//使用这个方式导入需要的css样式
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  //导入基本的vue的支持,需要再index.js的前面导入
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
  //导入js文件
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  

3.创建简单的官方demo


<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
head>
<body>
  <div id="app">
    <el-button @click="visible = true">Buttonel-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Elementp>
    el-dialog>
  div>
body>
  
  <script src="https://unpkg.com/vue/dist/vue.js">script>
  
  <script src="https://unpkg.com/element-ui/lib/index.js">script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  script>
html>

4.结果

访问这个html页面
Element UI:简单的入门HelloWorld_第1张图片
点击这个按钮的结果
Element UI:简单的入门HelloWorld_第2张图片
这里出现了一个弹窗,并显示了数据
查看加载的东西
Element UI:简单的入门HelloWorld_第3张图片
发现就是加载了一个element的字体

5.分析页面语句

分析js

new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })

发现这里就是很简单的vue组件的创建,并返回了数据visible的值为false,基于vue的数据解析

分析html

<div id="app">
    <el-button @click="visible = true">Buttonel-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Elementp>
    el-dialog>
  div>

1.这里创建了一个el-button和一个el-dialog,通过字面元素的分析应该是一个按钮以及一个弹窗

2.el-button上使用了vue的@click(就是添加了一个点击事件,其主要内容就是将visible的值变为true)

3.el-dialog中添加了一个:visible.sync应该就是改变它的可见性通过异步的方式,起初始化为不可见的(当前初始化的时侯visible的值为false),当前的title应该就是当前弹窗的标题,其中的p标签就是弹窗中的内容!

4.总结以上表明:这elementUi自定义了一些Compment,一些基于Vue的Compment,在使用上兼容vue的语法,当前内容实现了点击按钮改变弹窗的可见性

6.总结

1.elementUi是一个基于vue的ui库(就是定义了一系列的el-XXX的组件,并定义了自己的一套解析数据的规则),原则上再vue上可以使用的,基本上可以再el-XXX元素上也可以使用

2.通过el-button创建一个按钮,默认是白色的带有边框的按钮,通过el-dialog定义一个弹窗起默认位置为当前浏览器的中心

3.elementUI简化了开发,但是还是存在刷新后字体缩在一起的问题,就是vue本身的问题

以上纯属个人见解,如有问题请联系本人!

你可能感兴趣的:(Element,UI,前端技术)