一、vue的组件
- 组件的概念;
组件(component)是vue的功能之一。可以扩展HTML元素，封装可重用的代码。它是自定义的元素，vue可以为它添加特殊功能。总之，组件是用来完成特定功能的一个自定义的HTML标签。 - 组件的作用
对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码. - 组件的分类：
全局组件和局部组件。
在浅学vue的那一篇博客中已经详细的说明了，这里就不多做说明。 - 全局组件的语法:
Vue.component(“自定义标签的名字”,{配置对象})
- 全局组件特点：
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性 - 注意事项：
template中的html必须在一个标签中. 仅且只能有一个根节点.
- 局部组件的语法：
var app = new Vue({
el: "#app",
data: {},
components : {
"局部组件的名字1" : {组件的配置对象}
"局部组件的名字2" : {组件的配置对象}
}
});
- 局部组件特点：
局部组件只能够在所挂载的标签中使用.
二、模板的三种书写方式
-
直接写在template属性中。
如果内容很多就会非常麻烦 -
写在模板标签中
-
使用 < script>标 签 ,但是必须加上 type="text/template"才能使用。
三、组件中的数据必须是函数（也就是方法）
组件中数据的定义：
语法：
语法:
"组件的名字":{
template: "",
data : function(){
return {
键1:值1,
键2:值2
}
}
}
- data数据只能够以函数的形式返回,因为函数中可用写其他的业务代码
- 只能够在各自的组件模板中使用各自的组件中的data数据
- Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.
四、路由
- 路由概念：
将进入的浏览器请求映射到特定的组件代码中。即决定了由谁（组件）去响应客户端的请求。
简单理解，就是url地址和对应的资源（组件）的映射，通过一个路径的url地址，唯一找到一个资源。路由不包含在vue中，是一个插件，要单独下载。
路由官方下载地址
地址：https://unpkg.com/[email protected]/dist/vue-router.js - 步骤：
- 先导入js文件
- 引入路由插件
- 代码结构图
- 页面展示图
五、使用Vue组件框架
- 饿了么-PC端 Elememt
类似于easyui一样，提供了很多的ui组件。
Element资料下载地址
Element官网
- 入门
- 先将下载好的资源引入到项目中
- 引入css和js文件
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入vue的js文件-->
<script src="vuejs/vue.js"></script>
<!--引入element的样式和组件库-->
<link rel="stylesheet" href="vuejs/element-ui/lib/theme-chalk/index.css">
<script src="vuejs/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<[email protected]:v-on点击事件的简写，点击时将visible变成true并展示出来-->
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="你好">
<p>我是张三</p>
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data: {
//false：默认不展示
visible:false
}
})
</script>
</body>
</html>
- 页面展示