工程化开发和脚手架
开发Vue的两种方式
- 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
- 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。
工程化开发模式优点：
提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式问题：
- webpack配置不简单
- 雷同的基础配置
- 缺乏统一的标准
为了解决以上问题，所以我们需要一个工具，生成标准化的配置
脚手架Vue CLI
Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子
- 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
- 查看vue/cli版本： vue --version
- 创建项目架子：vue create project-name(项目名不能使用中文)
- 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)
项目目录介绍和运行流程
项目目录介绍
虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可
- main.js 入口文件
- App.vue App根组件
- index.html 模板文件
运行流程
根组件
根组件介绍
整个应用最上层的组件，包裹所有普通小组件
组件是由三部分构成
- template：结构 （有且只能一个根元素）
- script: js逻辑
- style： 样式 (可支持less，需要装包)
组件注册
局部注册
局部注册的组件只能在注册的组件内使用
- 创建.vue文件（三个组成部分）
- 在使用的组件内先导入再注册，最后使用
当成html标签使用即可 <组件名></组件名>
组件名规范 —> 大驼峰命名法， 如 HmHeader
// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'
export default { // 局部注册
components: {
'组件名': 组件对象,
HmHeader:HmHeaer,
HmHeader
}
}全局注册
全局注册的组件，在项目的任何组件中都能使用
- 创建.vue组件（三个组成部分）
- main.js中进行全局注册
// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)局部样式
写在组件中的样式会 全局生效 ，因此很容易造成多个组件之间的样式冲突问题。
可以给组件的style标签加上scoped 属性,可以让样式只作用于当前组件
即<style scoped>
添加后，当前组件内标签都被添加data-v-hash值 的属性 ，css选择器都被添加 [data-v-hash值] 的属性选择器
因此必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
组件通信
组件通信，就是指组件与组件之间的数据传递
- 组件的数据是独立的，无法直接访问其他组件的数据。
- 想使用其他组件的数据，就需要组件通信
父子通信
- 父组件通过 props 将数据传递给子组件
- 子组件利用 $emit 通知父组件修改更新
父向子通信
父组件
<template>
<div class="app" style="border: 3px solid #000; margin: 10px">
我是APP组件
<!-- 1.给组件标签，添加属性方式 赋值 -->
<Son :title="myTitle"></Son>
</div>
</template>
<script>
import Son from './components/Son.vue'
export default {
name: 'App',
data() {
return {
myTitle: 'test',
}
},
components: {
Son,
},
}
</script>
子组件
<template>
<div class="son" style="border:3px solid #000;margin:10px">
<!-- 3.直接使用props的值 -->
我是Son组件 {{title}}
</div>
</template>
<script>
export default {
name: 'Son-Child',
// 2.通过props来接受
props:['title']
}
</script>传值步骤
- 给子组件以添加属性的方式传值
- 子组件内部通过props接收
- 模板中直接使用 props接收的值
子向父通信
子组件利用 $emit 通知父组件，进行修改更新
父组件
<template>
<div class="app">
我是APP组件
<!-- 2.父组件对子组件的消息进行监听 -->
<Son :title="myTitle" @changTitle="handleChange"></Son>
</div>
</template>
<script>
import Son from './components/Son.vue'
export default {
name: 'App',
data() {
return {
myTitle: '学前端，就来黑马程序员',
}
},
components: {
Son,
},
methods: {
// 3.提供处理函数，提供逻辑
handleChange(newTitle) {
this.myTitle = newTitle
},
},
}子组件
<template>
<div class="son">
我是Son组件 {{ title }}
<button @click="changeFn">修改title</button>
</div>
</template>
<script>
export default {
name: 'Son-Child',
props: ['title'],
methods: {
changeFn() {
// 通过this.$emit() 向父组件发送通知
this.$emit('changTitle','xxx')
},
},
}
</script>传值步骤
- $emit触发事件，给父组件发送消息通知
- 父组件监听$emit触发的事件
- 提供处理函数，在函数的性参中获取传过来的参数
Props
props 是组件间数据传递的核心机制，用于父组件向子组件传递数据
- 单向数据流 Props 数据只能从父组件流向子组件，子组件不能直接修改 props（会触发警告）
- 声明式接收 子组件需显式声明它接受的 props
- 动态/静态传递 父组件可传递静态值或动态绑定的数据
Props 的声明方式
数组形式（简单声明）
export default {
props: ['title', 'content', 'isPublished']
}对象形式
export default {
props: {
title: String, // 基础类型检查
// 高级配置
content: {
type: String, // 数据类型
required: true, // 是否必传
default: 'Default content', // 默认值
validator: value => value.length > 10 // 自定义验证函数
}
}
}props校验完整写法
props: {
校验的属性名: {
type: 类型, // Number String Boolean ...
required: true, // 是否必填
default: 默认值, // 默认值
validator (value) {
// 自定义校验逻辑
return 是否通过校验
}
}
},2.代码实例
export default {
props: {
w: {
type: Number,
//required: true,
default: 0,
validator(val) {
// console.log(val)
if (val >= 100 || val <= 0) {
console.error('传入的范围必须是0-100之间')
return false
} else {
return true
}
},
},
},
}.sync修饰符
可以实现 子组件 与 父组件数据 的 双向绑定，简化代码
<BaseDialog :visible.sync="isShow" ></BaseDialog>子组件
props: {
visible: Boolean
},
this.$emit('update:visible', false)代码示例
<template>
<div class="app">
<button @click="openDialog">退出按钮</button>
<!-- isShow.sync => :isShow="isShow" @update:isShow="isShow=$event" -->
<BaseDialog :isShow.sync="isShow"></BaseDialog>
</div>
</template><template>
<div class="base-dialog-wrap" v-show="isShow">
<div class="base-dialog">
<div class="title">
<h3>温馨提示：</h3>
<button class="close" @click="closeDialog">x</button>
</div>
<div class="content">
<p>你确认要退出本系统么？</p>
</div>
<div class="footer">
<button>确认</button>
<button>取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
isShow: Boolean,
},
methods:{
closeDialog(){
this.$emit('update:isShow',false)
}
}
}
</script>
插槽
让组件内部的一些 结构 支持 自定义
基本
- 组件内需要定制的结构部分，改用
占位 - 使用组件时,
标签内部, 传入结构替换slot - 给插槽传入内容时，可以传入纯文本、html标签、组件
通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白
能否给插槽设置 默认显示内容 呢？
封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）。
在
<template>
<div>
<MyDialog></MyDialog>
<MyDialog>
你确认要退出么
</MyDialog>
</div>
</template>子组件
<template>
<!-- 往slot标签内部，编写内容，可以作为后备内容(默认值) -->
<slot>
我是默认的文本内容
</slot>
</template>具名
一个组件内有多处结构，需要外部传入标签，进行定制
上面的弹框中有三处不同，但是默认插槽只能定制一个位置
多个slot使用name属性区分名字
<template>
<div class="dialog">
<div class="dialog-header">
<!-- 一旦插槽起了名字，就是具名插槽，只支持定向分发 -->
<slot name="head"></slot>
</div>
<div class="dialog-content">
<slot name="content"></slot>
</div>
<div class="dialog-footer">
<slot name="footer"></slot>
</div>
</div>
</template>template配合v-slot:名字来分发对应标签
<template>
<div>
<MyDialog>
<!-- 需要通过template标签包裹需要分发的结构，包成一个整体 -->
<template v-slot:head>
<div>我是大标题</div>
</template>
<template v-slot:content>
<div>我是内容</div>
</template>
<template #footer>
<button>取消</button>
<button>确认</button>
</template>
</MyDialog>
</div>
</template>v-slot写起来太长，vue给我们提供一个简单写法 v-slot: —> #
作用域
定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用
给 slot 标签, 以 添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>所有添加的属性, 都会被收集到一个对象中
{ id: 3, msg: '测试文本' }在template中, 通过
#插槽名= "obj"接收，默认插槽名为 default<MyTable :list="list"> <template #default="obj"> <button @click="del(obj.id)">删除</button> </template> </MyTable>
1 条评论
新盘新项目，不再等待，现在就是最佳上车机会！