基于vue-cli、elementUI的Vue超简单入门小例子（推荐）

return {
   info: {
    name: '',
    age: null,
    sex: ''
   }

当我们打开http://localhost:8080/#/newcontact

在输入框输入内容时可见，姓名：

{{info.name}}

双花括号里的内容也跟着改变，这就是双向绑定

<el-option v-for="item in options" :key="item" :value="item">

v-for="item in options"

就是循环options这个数组的内容

options: [
    '女','男','保密'
   ]

如果在里面添加内容，那么下拉菜单的内容会一起变化，一 一对应

:value="item"

会把你选的（‘女’，‘男’，‘保密’）传给

<el-select v-model="info.sex">

v-model="info.sex"

会传给data中的info.sex

return {
   info: {
    name: '',
    age: null,
    sex: ''
   }

接下来在加入新代码，NewContact.vue目前的代码如下：

.....
  </el-select>
  <el-button @click="create">创建</el-button>
  <template>
   <el-table :data="tabledata" align="left">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="sex" label="性别"></el-table-column>
    <el-table-column label="操作">
     <template slot-scope="a">
      <el-button size="mini" type="danger" @click="del(a.$index)">删除</el-button>
     </template>
    </el-table-column>
   </el-table>
  </template>
 </el-row>
</template>
<script>
export default {
 name: "NewContact",
 data(){
  return {
   info: {
    name: '',
    age: null,
    sex: ''
   },
   options: [
    '女','男','保密'
   ],
   tabledata:[
    {name: 'Leo', age: 12, sex: 'man'},
    {name: 'Lei', age: 22, sex: 'women'},
    {name: 'Lii', age: 65, sex: 'men'}
   ]  }
 }
}
</script>
<style>
</style>

<el-button @click="create" type="success">创建</el-button>

这里就是创建了一个按钮，@是v-on的缩写，点击后会出发create这个函数