VUE框架——element-ui的学习

在webstorm中打开项目

点击file，点击open

找到我们构建好的vue项目并选中

切换到我们的项目所在路径

安装element-ui

输入npm run dev

点击http://localhost:8080进入到浏览器

配置main.js

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

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

几个简单的组件

首先，在每个<template></temple>中只能包含一个<div></div>

row组件

<el-row>
	<el-input type="text" style="width:100px" v-model="a"></el-input>+
    <el-input type="text" style="width:100px" v-model="b"></el-input>
    <el-button type="primary" @click="hello">等于</el-button>
      {{c}}
</el-row>

这是初始状态

当我们输入值后

在引用变量时，要用两个大括号{{ }}，这里我们引用了c这个变量{{c}}，它的初始值是0

input组件

例如
<el-input type="text" style="width:100px" v-model="a">
这里v-model属性表示自己定义组件，我们把a的初始值设为0

button组件

<el-button type="primary" @click="hello">等于</el-button> {{c}}
其中@click=“hello”表示当点击事件发生时，执行hello方法

table组件

<el-table :data="student">
	<el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="身高" prop="height"></el-table-column>
    <el-table-column label="性别" prop="sex"></el-table-column>
</el-table>

显示出来是酱紫哒

如果我们想动态添加行怎么办呢，请看下一组件！

dialog组件

<el-button @click="userNew">新建用户</el-button>
<el-dialog title="新增用户" style="width: 300px;height: 500px;z-index: 100" :visible="isshow" @close="closeDialog">
    姓名：<el-input type="text" style="width:100px" v-model="myname"></el-input>
    性别：<el-input type="text" style="width:100px" v-model="mysex"></el-input>
    身高：<el-input type="text" style="width:100px" v-model="myheight"></el-input>
	<el-button type="primary" @click="adduser">添加用户</el-button>
</el-dialog>

由于我们把isshow的初始值设置为false，所以显示出来就是这样子啦，一个小小的按钮

点击之后

我们动态添加一行数据

成功啦成功啦

引入js以及其他的vue

引入js

创建一个js文件，在js文件中写一个sayhello的方法，注意：在方法前一定要有export

然后回到我们的app.vue文件，把建好的方法引入进来

再然后，sayhello方法就可以在vue中随便用啦！

完事儿之后是酱紫滴
点击新建用户后出来了这个东东

引入vue

先写一个别的vue

然后在原vue中做一个components

再把新做好的vue中的东西引进来

再弄一个这样的组件

欧了进来了

今天你学废了嘛☺？