复习
1、高级组件
1) 基础组件
1. 注册
Vue.component('xpf-div',{
template:`<div>hello vue--{{msg}}--{{title}}</div>`,
data(){
return {
msg:'hello'
}
},
props:['title'],
methods:{
find(){
console.log(this.msg)
console.log(this.title)
}
}
})
2. 调用
<xpf-div title='hello xpf'></xpf-div>
<xpf-div></xpf-div>
请类比函数的声明和调用
2) 组件参数
props:{
期望接受的参数:该参数的数据类型
}
1、注册
Vue.component('xpf-div',{
template:`<div v-if='visible'>hello vue--{{msg}}--{{title}}</div>`,
data(){
return {
msg:'hello'
}
},
props:{
title:String,
visible:Boolean
}
})
2、调用
<xpf-div title='hello vue'></xpf-div>
<xpf-div title='hello vue' :visible='true'></xpf-div>
==>
<xpf-div title='hello vue' :visible='ifVisible'></xpf-div>
data(){
return {
ifVisible:true
}
}
3、参数验证
props:{
期望接受的参数:{
type:该参数的数据类型,
required:true/false
}
}
xpf-div
props:{
title:String,
visible:{
type:Boolean,
required:true
}
}
在调用子组件xpf-div的时候,必须传递一个数据类型为布尔值的visible,一旦省略,就会报错
3) 单向数据流
父组件 ---> 子组件
visible v-if='visible'
true 显示
false 隐藏
vue中期望子组件将父组件传递过来的参数,放到data或者computed中,再进行改变
案例:父组件向子组件传递日期,子组件改变日期格式
4) 自定义事件
父组件 <--- 子组件
@xxx='' this.$emit('xxx')
子组件在触发某一个事件的时候,会向父组件发射事件,通知父组件进行监听
案例:弹框的显示和隐藏
2、插槽
1) 默认插槽
1、注册
xpf-div
template:`
<div>
{{title}}
<slot></slot>
</div>
`,
props:['title']
2、调用
<xpf-div title='hello'>
<h1>hello xpf</h1>
</xpf-div>
子组件的开始标签与结束标签之间的内容会插入到slot中,即slot会被替换成子模版
2) 具名插槽
1、注册
xpf-div
template:`
<div>
{{title}}
<slot name='header'></slot>
<slot name='footer'></slot>
</div>
`,
props:['title']
2、调用
<xpf-div title='hello'>
<template v-slot:footer>
<h1>hello xpf</h1>
</template>
<template v-slot:header>
<h2>hello xpf</h2>
</template>
</xpf-div>
学习
3) 作用域插槽
1、组件的注册
xpf-div
template:`
<div>
<ul>
// 由于子组件不知道父组件传递过来的数据中具体的属性,所以可以将item回调给父组件(暴露在插槽的作用域上)
<li v-for='item in data'>
<slot name='list' :scope='item'></slot>
</li>
</ul>
</div>
`,
props:{
data:Array
}
2、组件的调用
<xpf-div :data='category'>
<template v-slot:name='slot'>
<div>{{slot.scope.id}}</div>
<div>{{slot.scope.name}}</div>
<div>{{slot.scope.comment}}</div>
</template>
</xpf-div>
注意:
1. 子组件中的:scope是当前插槽的作用域,scope变量可以是任意其他变量
2. 父组件中v-slot='slot',引号中的slot用于接收子组件插槽作用域中的数据,也可以任意改变
3. 如果为默认组件(不是具名组件),在调用的时候v-slot='slot'即可
3、案例
在element-ui的表格中
1. 图片显示
2. 显示开关
3. 删除/修改
3、脚手架
1) 项目结构搭建(前端结构)
1. 手动搭建
index.html
css
js
images
1、js不能够模块化,不利于分工协作,效率低下
2、有些第三方库只提供脚手架的形式(npm)
2. 脚手架(盖房子)
特别厉害的架构师给我们搭建一个项目结构,我们在这个结构上面进行开发
脚手架涉及的内容
babel es6 --> es5 --> 运行在浏览器上
webpack 构建工具
将开发好的各个模块整合到一起
之前组件封装的时候,对于css很难掌控,但是webpack可以做到
开发过程:
项目的初始化 -> 写代码 -> 测试 -> 打包 -> 部署(阿里云)
2) 脚手架
vue -> html + css + js -> 运行在浏览器
环境:Node.js 8.9 或更高版本 (推荐 8.11.0+)
nodejs下载:http://nodejs.cn/download/
cnpm下载:npm install -g cnpm --registry=https://registry.npm.taobao.org
1. 应用
1、安装脚手架生成工具
> cnpm install -g @vue/cli 或者 npm install -g @vue/cli
> vue --version
2、通过脚手架创建项目
# 进入一个没有中文字符的文件夹
> vue create app01
1. 选择Manaually,回车
2. 选择babel回成
3. 选择in package.json
4. n
5. cd app01
6. npm run serve
7. 浏览器访问http://localhost:8080/
2. 项目结构
用vscode打开vue项目不高亮时,可以下载vscode的插件vetur
node_modules 项目的所有依赖,通过npm install下载下来的所有的第三方库都保存在这
pubic/index.html 可以引入地图、图表等第三方库
src 存放的是项目源码,我们在此处开发
assets 可以存放静态文件(图片、阿里巴巴矢量图标)
components 可以存放自定义组件
App.vue 首页,也是一个组件,内部包含template、script、style
main.js 项目的入口文件(根组件的注册)
new Vue({
render: h => h(App),
}).$mount('#app')
==>等价于
new Vue({
el:'#app',
render: h => h(App),
})
babel.config.js babel的配置文件
package.json 项目的所有依赖
3. 项目运行流程
npm run serve / yarn serve --> main.js --> 渲染App组件
4. 项目文件介绍
vue项目中,每一个组件都是一个文件,以.vue作为后缀
1、组件一般分为以下两种
1. 页面组件
文章管理 Article.vue
栏目管理 Category.vue
用户管理 User.vue
2. 功能组件
表格 Table.vue
列表 List.vue
2、组件的组成
<template></template> 模板
<script></script> 脚本
<style></style> 样式
5. 使用
组件的使用
1、在components中定义组件List.vue
2、在其他的组件(App.vue)中导入注册的组件List.vue
import List from './components/List.vue'
3、在App.vue组件中局部注册导入过来的组件List.vue
components:{
List:List
}
4、在App.vue的模板template中调用List.vue
<List></List>
4、动态组件
<button @click="currentPage = 'Article'">文章管理</button>
<button @click="currentPage = 'Category'">栏目管理</button>
<button @click="currentPage = 'User'">用户管理</button>
<keep-alive>
<component :is="currentPage"></component>
</keep-alive>
1. keep-alive 能够使组件在切换的时候,保持它原来的状态
2. component表示一个动态组件,当前加载的组件取决于is的值,is的值是组件的名称
5、渲染函数
render:function(createElement){
return createElement('div',this.title)
}
<div>{{title}}</div>
---npm、cnpm、yarn---
都是包管理机制,用于下载依赖
cordova
1、npm是nodejs自带的,安装nodejs之后可以直接使用npm
2、cnpm是npm的淘宝镜像,速度快
3、yarn是第三方,需要先下载yarn
安装
cnpm install -g yarn
yarn -v 或者yarn --version
使用
npm install === yarn
npm install moment --save === yarn add moment
npm install moment --global === yarn global add moment