2、编写html
<div> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="http://www.likecs.com/">首页</router-link> <router-link to="/student">会员管理</router-link> <router-link to="/teacher">讲师管理</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>3、编写js
<script> // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const Welcome = { template: '<div>欢迎</div>' } const Student = { template: '<div>student list</div>' } const Teacher = { template: '<div>teacher list</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 const routes = [ { path: 'http://www.likecs.com/', redirect: '/welcome' }, //设置默认指向的路径 { path: '/welcome', component: Welcome }, { path: '/student', component: Student }, { path: '/teacher', component: Teacher } ] // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 从而让整个应用都有路由功能 const app = new Vue({ el: '#app', router }) // 现在，应用已经启动了！ </script>4、04-路由.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="http://www.likecs.com/vue.min.js"></script> <script src="http://www.likecs.com/vue-router.min.js"></script> <div> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="http://www.likecs.com/">首页</router-link> <router-link to="/student">会员管理</router-link> <router-link to="/teacher">讲师管理</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> <script> // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const Welcome = { template: '<div>欢迎</div>' } const Student = { template: '<div>student list</div>' } const Teacher = { template: '<div>teacher list</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 const routes = [ { path: 'http://www.likecs.com/', redirect: '/welcome' }, //设置默认指向的路径 { path: '/welcome', component: Welcome }, { path: '/student', component: Student }, { path: '/teacher', component: Teacher } ] // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 从而让整个应用都有路由功能 const app = new Vue({ el: '#app', router }) // 现在，应用已经启动了！ </script> </div> </body> </html> 五、axiosaxios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端。
在浏览器中可以帮助我们完成 ajax请求的发送。
在node.js中可以向远程接口发送请求。
1、编写数据data.json文件
{ "success":true, "code":20000, "message":"成功", "data":{ "items":[ {"id":"1","name":"zhang3","age":33}, {"id":"2","name":"li4","age":44}, {"id":"3","name":"wang5","age":55} ] } }2、获取数据
<script src="http://www.likecs.com/vue.min.js"></script> <script src="http://www.likecs.com/axios.min.js"></script>注意：测试时需要开启后端服务器，并且后端开启跨域访问权限
编写05-axios.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div v-for="user in userList"> {{user.name}}-----{{user.age}} </div> </div> <script src="http://www.likecs.com/vue.min.js"></script> <script src="http://www.likecs.com/axios.min.js"></script> <script> let app = new Vue({ el:'#app', data:{ userList:[] }, created () { this. getData() }, methods: { getData(){ //$.get(‘url’,data=>{}) axios.get('data.json') .then(response=>{ console.log(response) this.userList = response.data.data.items }) .catch(error=>{ console.log(error) }) } } }) </script> </body> </html>3、查看输出
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
官网： #/zh-CN
创建 06-element-ui.html
将element-ui引入到项目
1、引入css
<!-- import CSS --> <link href="http://www.likecs.com/element-ui/lib/theme-chalk/index.css">