Vue路由和Element-UI技术
【摘要】 Vue-路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）6.1 Vue-路由入门6.1.1 创建vuetest项目在项目下创建src文件夹，复制两个vue.min.jsvue-router.min.js6.1.2 创建 router.html在页面中引入两个...
Vue-路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）
6.1 Vue-路由入门
6.1.1 创建vuetest项目
在项目下创建src文件夹，复制两个
vue.min.js
vue-router.min.js
6.1.2 创建 router.html
在页面中引入两个js文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="src/vue.min.js"></script>
<script src="src/vue-router.min.js"></script>
</head>
<body>
</body>
</html>6.1.3 编写html
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过传入 `to` 属性指定链接. -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>6.1.4 编写js
<script>
// 1. 定义（路由）组件。
// 复杂的组件也可以从独立的vue文件中引入
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', 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. 创建和挂载根实例。
// 从而让整个应用都有路由功能
new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
</script>6.1.5 运行页面查看路由效果
6.2 axios ajax => 前端向服务器异步发送请求获取数据
axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求
6.2.1 复制js资源
axios.min.js
6.2.2 创建 axios.html
在页面中引入两个js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="src/vue.min.js"></script>
<script src="src/axios.min.js"></script>
</head>
<body>
</body>
</html>6.2.3 创建数据源data.json
{
"success":true,
"code":2000,
"message":"成功",
"data":[
{"name":"张三","age":12},
{"name":"赵四","age":15},
{"name":"王五","age":22}
]
}6.2.4 编写js
<script>
new Vue({
el: '#app',
data: {
memberList: []//定义数组
},
created() {
this.getList()
},
methods: {
getList(id) {
axios.get('data.json')
.then(response => {//成功回调
console.log(response)
this.memberList = response.data.data
})
.catch(error => {//失败回调
console.log(error)
})
}
}
})
</script>6.2.5 html渲染数据
<body>
<div id="app">
<table border="1" width="300px" height="150px">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="item in memberList">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</td>
</tr>
</table>
</div>
</body>6.2.6 运行项目
浏览器测试：
element-ui 简介
背景：
我们熟知Vue核心思想是组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,所以饿了吗推出了基于VUE2.0的组件库,提供现成的PC端组件.
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
官网： http://element-cn.eleme.io/#/zh-CN
7.1 入门
7.1.1创建文件夹
element-ui
7.1.2引入脚本库
vue.min.js
7.1.3 创建 ui.html
7.1.4 引入css
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">7.1.5 引入js
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>7.1.6 编写html
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>.sync：本例用于组件和程序间的通讯，使弹窗的关闭按钮起作用
7.1.7 编写js
<script>
new Vue({
el: '#app',
data: function() { //Vue中定义data的另一种写法
return {
visible: false
}
}
})
</script>7.1.8 浏览器中运行
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）