vue学习笔记（六）：EL组件库学习

安装Element-ui

npm i element-ui

在main.js中插入引用项

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

在 new Vue之前插入引用组件库：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(Element); //加载所有element的组件
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

页面上使用Element组件，组件标间都是以<el->开头的，具体可以查看 Element的文档：

<template>
  <div>
    <el-button>
      我是按钮
    </el-button>
  </div>
</template>

 注意：

1、组件中凡是带有”:value“的，代表单向的绑定数据，数据可以在<script>中指定，就是对象中的数据修改了会影响页面数据，但是页面数据修改不会影响对象中的数据

2、组件中凡是带有"v-model:"的，代表双向绑定数据，数据可以在<script>中指定，页面上修改的数据会自己赋值到对象中，这样直接提交给服务端即可，十分方便