16.Vue②
目录
1、局部组件 2、全局组件
一、组件（Component）（重点）
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
1、局部组件
创建 01-1-局部组件.html
定义组件
var app = new Vue({
el: '#app',
// 定义局部组件，这里可以定义多个局部组件
components: {
//组件的名字
'Navbar': {
//组件的内容
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})
使用组件
<div id="app">
<Navbar></Navbar>
</div>
2、全局组件
创建 01-2-全局组件.html
定义全局组件：components/Navbar.js
// 定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
通过script引入组件文件
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({
el: '#app'
})
</script>
二、实例生命周期
创建 03-vue实例的生命周期.html
主要为created()和mounted()方法。debugger为Vue中的断点
<!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>
</head>
<body>
<div id="app">
hello
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
created() {
debugger
//在页面渲染前执行
console.log("created...")
},
mounted() {
debugger
//在页面渲染后执行
console.log("mounted...")
}
})
</script>
</body>
</html>
三、路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
创建 04-路由.html
1、引入js
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
2、编写html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</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: '/', 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>
四、axios
axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
- 在浏览器中可以帮助我们完成 ajax请求的发送
- 在node.js中可以向远程接口发送请求
1.获取数据
<body>
<div id="app">
<!-- 把userList数组中的数据进行显示 使用v-for指令 -->
<div v-for="user in userList">
{{user.name}} -- {{user.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
//固定的结构
data: {//在data定义变量和初始值
//定义变量，值空数组
userList:[]
},
created() {//页面渲染之前执行
//调用定义的方法
this.getUserList()
},
methods:{//编写具体的方法
//创建方法 查询所有用户数据
getUserList(){
//使用axios发送ajax请求
//axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
axios.get("data.json")
.then(response=>{
//resonse就是请求之后返回数据
// console.log(response)
//通过response获取具体数据，复制给定义空数组
this.userList = response.data.data.items
console.log(this.userList)
})//请求成果执行then方法
.catch(error=>{
})//请求失败执行catch方法
}
}
})
</script>
</body>
2、显示数据
<div id="app">
<!-- 把userList数组中的数据进行显示 使用v-for指令 -->
<div v-for="user in userList">
{{user.name}} -- {{user.age}}
</div>
</div>
五、element-ui：
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
官网： http://element-cn.eleme.io/#/zh-CN
创建 06-element-ui.html
将element-ui引入到项目
1、引入css
<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
2、引入js
<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>
3、编写html
<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>
4、编写js
<script>
new Vue({
el: '#app',
data: function () {//定义Vue中data的另一种方式
return { visible: false }
}
})
</script>
