组件
什么是组件？
就是对一段可以重用的html代码的封装，封装后可以在别的页面中使用，从而提高代码的重用性。
比如：header/footer/login/menu
组件的本质
就是一个自定义的html标签，比如：my-header
<my-header></my-header>
组件可以自定义元素形式使用，或者使用原生元素但是以is特性做扩展
注意事项：
组件的名称，如果有多个单词分割，推荐使用中横线 - 。并且不用驼峰
比如： my-header
组件的分类
- 全局组件： 在Vue对象上定义的组件，可以在多个vue实例中使用。
- 局部组件： 在单个vue实例中定义的组件，只能在定义组件的当前实例中使用。
1.全局组件的定义和使用
- 定义的语法
Vue.component("自定义的标签名称",{
template: "模板的内容"
})
- 使用组件
<自定义的标签名称></自定义的标签名称>
2.局部组件的定义和使用
- 定义的语法
new Vue({
el:"#id",
components:{
"自定义的标签名称1":{
template: "模板的内容1"
},
"自定义的标签名称2":{
template: "模板的内容2"
}
}
})
- 使用组件
<自定义的标签名称></自定义的标签名称>
组件使用两种HTML模板
- 直接使用html内容
template: "模板的html内容"
- 类似于artTemplate在外部定义模板，然后在引入模板
<script id="tmplID" type="text/html">
模板的html内容
</script>
template: "#tmplID"
组件中的数据必须是函数
new Vue({
el:"#id",
components:{
"自定义的标签名称":{
template: "模板的内容"
data(){
return {
数据属性:属性的值
}
}
}
}
})
父子组件
组件的父子关系： 在一个组件中定义另一个组件，外层的组件就是父组件，里面的组件就是子组件
Vue.component("父组件名称",{
template: "父组件的模板内容 <子组件名称></子组件名称>",
components:{
"子组件名称":{
template: "子组件的模板内容"
}
}
})
Vue实例中的数据给顶级组件
- 定义组件
Vue.component("顶级组件名称",{
template: "顶级组件模板内容"
})
- vue实例的数据
new Vue({
data:{
数据属性：数据值
}
})
- 通过属性绑定把值传给组件
v-bind: 属性名 = '数据‘
简写：
: 属性名 = '数据'
<div id="app">
<顶级组件名称 :属性名称="数据属性"></顶级组件名称>
</div>
- 在组件中通过
props属性接收值
props:["属性名称"]
- 在组件中使用数据
{{ 属性名称 }}
数据传递
父组件的数据传递给子组件
- 定义父子组件和父组件的数据
Vue.component("父组件名称",{
template: "父组件的模板内容<子组件名称></子组件名称>",
components:{
"子组件名称":{
template: "子组件的模板内容"
}
},
data(){ // 组件中的数据为函数
return { // 函数返回数据 对象
父组件的数据属性：属性的值
}
}
})
- 通过属性绑定把父组件的数据传给儿子组件
<子组件名称 :子数据属性="父组件的数据"></子组件名称>
- 子组件接收父组件传入的数据
props:["子数据属性"]
- 在儿子组件中使用数据
{{ 子数据属性 }}
重点提醒：
vue组件中的模板必须有一个根元素进行包裹，否侧出错不显示。
路由【重点】
什么是路由？
1.根据浏览器的请求来响应不同页面，页面的内容具体有哪个组件来渲染，由路由来决定。
路由使用步骤
-
路由模板也是vue的一个插件，需要下载和引入才能使用
https://router.vuejs.org/zh/ 官网 下载 -
引入<script src="../vue-router.js"></script>
-
定义组件
let Home = { template: "<h1>我是首页</h1>" };
let About = { template: "<h1>关于我们</h1>" };
let News = { template: "<h1>新闻中心</h1>" };
- 配置路由
说明：path就是导航路径，component路径对应的组件
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/news', component: News }
]
- 实例化路由对象:
-
routes属性名不能改
const router = new VueRouter({
routes //属性名和属性值相同 简写为routes
});
- 在
vue实例中挂载路由
new Vue({
el:"#app",
router:router //属性名和属性值相同 简写为router
})
或者
new Vue({
router
}).$mount("#app") // 挂载视图的另一种方式
- 制作路由连接：最终生成a标签
<router-link to="路径"></router-link>
- 路由视图： 显示组件的地方
<router-view></router-view>
路由的嵌套（父子路由）
- 在父组件中使用路由连接和路由视图
let News={ template: `
<div>
<h1>新闻中心内容</h1>
<p>
<router-link to="/news/n1">国际新闻</router-link>
<router-link to="/news/n2">国内新闻</router-link>
<router-link to="/news/n3">公司新闻</router-link>
</p>
<router-view></router-view>
</div>
` };
- ES6 字符串模板引擎 可以换行
- 配置父子路由
children
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{
path: '/news',
component: News,
children:[
{path: 'n1', component: N1},
{path: 'n2', component: N2},
{path: 'n3', component: N3}
]
}
];
- 定义子路由的组件
let N1={template:``};
let N2={template:``};
let N3={template:``};
Vue的UI框架：elementUI
http://element-cn.eleme.io/#/zh-CN
为什么要使用UI组件
把网站开发的常用功能都开发成了组件，直接拷贝就可以使用，规范化项目、标准化项目、提高开发效率。
如何使用？
<!-- 引入样式 -->
<link rel="stylesheet" href="element.css">
<!-- 引入vue的库文件-->
<script src="../vue.min.js"></script>
<!-- 引入组件库 -->
<script src="element.js"></script>
看官网拷贝代码运行看效果
Vue脚手架的使用： vue-cli
vue-cli的作用
快速搭建标准的项目结构
如何使用
- 全局安装脚手架工具
cnpm i -g @vue/cli
验证是否安装成功 vue -V
- 使用脚手架创建项目
vue create 项目名称
比如：
vue create vuedemo
-
进入项目目录安装依赖（默认是自动，可以ctrl+C）
package.json
文件里面的生产依赖和开发依赖 -
运行vue的服务器
npm run serve
vue的项目目录结构介绍
- src 源文件
- assets 静态资源（图片、全局的css、重置样式）
- components 公共的组件的存放目录 pubcoms
- views 页面组件的存放目录 pages
- App.vue 当文件组件： 根组件
- <template></template> 模板
- <script></script> vue组件的脚步
- <style></style> 组件的样式 - main.js 项目的入口文件： 全局统筹vue的相关插件
- router.js 路由配置文件
- store.js 全局的状态管理，使用的vuex插件
- App.vue 当文件组件： 根组件
网友评论