<template> <el-row> <el-button type="success">1</el-button> </el-row> </template> <script> </script> <style> </style>
打开之前的HelloWorld.vue对内容进行修改（router是官方路由插件，router-link to是router的语法）：
<template> <!-- 这里router-link to="newcontact"会把路由导航到:8080/#/newcontact --> <router-link to="newcontact"><h1>{{ msg }}</h1></router-link> </template>
打开router/index.js，添加新路由（router是官方路由插件，深入学习请查看文档）
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import NewContact from '@/components/NewContact'//新添加，之后在下方的component: NewContact才会生效 Vue.use(Router) export default new Router({ routes: [ { path: 'https://www.jb51.net/', name: 'HelloWorld', component: HelloWorld }, { path: '/newcontact',//和router-link to相呼应，导航到/newcontact name: 'NewContact', component: NewContact } ] })
保存后打开页面可以看到如下：
之前的welcome变成了可点击的链接，点击后跳转看到如下页面
至此，已经我们已经把该引入的依赖，和路由的简单配置，简单组件的使用给完成了
接下来我们把精力都放到NewContact.vue这个组件，后面的代码几乎都在这个组件
打开NewContact.vue键入如下代码：
<template> <el-row> 姓名：{{info.name}} <el-input v-model="info.name" placeholder="请输入姓名"></el-input> 年龄：{{info.age}} <el-input v-model="info.age" placeholder="请输入年龄"></el-input> 性别：{{info.sex}} <el-select v-model="info.sex" placeholder="请选择"> <el-option v-for="item in options" :key="item" :value="item"></el-option><!-- 这里的key官方推荐在v-for时使用，不然会警告，但不影响使用 --> </el-select> </el-row> </template> <script> export default { name: "NewContact", data(){ return { info: { name: '', age: null, sex: '' }, options: [ '女','男','保密' ] } } } </script> <style> </style>
<el-input v-model="info.name"></el-input>
el-input是element-ui的组件，以el-开头的是element-ui的组件
v-model这里的v-model是Vue的指令，官方说法是——在表单控件或者组件上创建双向绑定。
="info.name"就是v-model绑定的数据，在data中return的内容里看到info.name对应的是''；info.age对应的是null
return { info: { name: '', age: null, sex: '' }
当我们打开: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"> <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这个函数
<el-table :data="tabledata">
就是表格要绑定的数据
<el-table-column prop="name">
在表格绑定数据情况下prop用于数据传递，tabeldata里的name