Vue.js_Element の変更点 - プログラムさがして

追加された行はこの色です。
削除された行はこの色です。
Vue.js_Element へ行く。
[[Program]] ＞ [[JavaScript]] ＞ ライブラリー ＞ [[Vue.js]] ＞ Element
#norelated
#contents

//----------------------------------------
* Vue.js Elementとは？ [#vaa4e623]
Bootstrapの代わりに使えるUIフレームワーク。[[Vue.js]]で作られている。
-Element - A Desktop UI Toolkit for Web https://element.eleme.io/
--豊富なコンポーネント
--美しいデザイン

GitHubからElementをダウンロードできる。
-GitHub - ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web https://github.com/ElemeFE/element

//----------------------------------------
* リファレンス [#q3118f1d]
Bootstrapで用意されている仕組み、パーツとほぼ同じことができる。
-Component | Element https://element.eleme.io/#/en-US/component/installation

以下、Elementのコンポーネント（パーツ）一覧の目次。
グリッドシステムは「Layout」などを見ればOK。

**Components [#c37d21a4]
***Basic [#sb614802]
Layout
Layout Container
Color
Typography
Icon
Button

***Form [#j52deab0]
Radio
Checkbox
Input
InputNumber
Select
Cascader
Switch
Slider
TimePicker
DatePicker
DateTimePicker
Upload
Rate
ColorPicker
Transfer
Form

***Data [#g8d7dab3]
Table
Tag
Progress
Tree
Pagination
Badge

***Notice [#t1cd1bfd]
Alert
Loading
Message
MessageBox
Notification

***Navigation [#m8b1997c]
NavMenu
Tabs
Breadcrumb
Dropdown
Steps

***Others [#fdecfaa7]
Dialog
Tooltip
Popover
Card
Carousel
Collapse

//----------------------------------------
* チュートリアル [#m3bd3ea4]
** 基本形 [#j51b6604]
CDNのリンクで、Elementのcssファイル、jsファイルを利用できる。
-Installation | Element https://element.eleme.io/#/en-US/component/installation

#code(html){{
<!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 src="https://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>
}}