大家好,我是IT修真院郑州分院第8期学员,一枚正直善良的web程序员。
今天给大家分享一下,修真院官网JS-12任务中可能会使用到的知识点:
1.背景介绍
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.知识剖析
一.什么是组件?
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面 上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为 用 is 特性进行了扩展的原生 HTML 元素。
3 常见问题
注册组件:全局注册
Vue.component('my-component-name', {
// ... 选项 ...
})
注册组件:局部注册
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建 系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的 构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。 在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素,是相对通用的。我们有时候会把它 们称为基础组件,它们会在各个组件中被频繁的用到。所以会导致很多组件里都会有一个包含基础组件的长列表:
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
这里介绍一个可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的代码
通过 PROP 向子组件传递数据
Prop 验证
我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 为了定制 prop 的验证方式,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:
props: {
// 基础的类型检查 (`null` 匹配任何类型)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
}
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子 组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
如果 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这 种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或 对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。
自定义事件
通过prop属性,父组件可以向子组件传递数据,而子组件的自定义事件就是用来将内部的数据报告给父组件的。
父组件使用时 @updateParmas="updateVideo"
子组件内 this.$emit('updateParmas', 这是我暴露出去的数据)
子组件通知父组件执行updateParmas函数
.sync 修饰符
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子 组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。
所以官方推荐以 update:my-prop-name 的模式触发事件取而代之。举个例 子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:
<text-document v-bind:title.sync="title"></text-document>
this.$emit('update:title', newTitle)
slot插槽
slot相当于子组件设置了一个地方,如果在调用它的时候,往它的开闭标签 之间放了东西,那么它就把这些东西放到slot中。
<my-component>
<p>这是一些初始内容</p>
</my-component>
4 解决方案
5.编码实战
子组件通知父子更新的两种方法
this.$emit('updateParmas','暴露一个值')// 不加.sync修饰符直接给父组件传事件,在父组件中修改props
this.$emit('update:test', newValue )// 可以加上.sync修饰符在子组件内修改props
PPT
https://it-xzy.github.io/WEB-NEW/2018.7.27D-JS12.html
视频
https://v.qq.com/x/page/n0737skprys.html
6.扩展思考
7.参考文献
鸣谢
感谢大家观看
制作人:高昕
8 更多讨论
1.vue cli 3.x版本的配置文件在哪里?
项目会生成一个叫vue.config.js的文件夹,就在这个里面配置东西。
2.vue cli 3.x版本的配置具体都是什么?
outputDir: undefined, assetsDir: undefined, runtimeCompiler: true, productionSourceMap: false, parallel: undefined, css: undefined, lintOnSave: undefined, baseUrl: './'
附上官方文档
https://github.com/vuejs/vue-cli/tree/dev/docs/config
3.vue cli 3.x版本如何配置跨域?
devServer: { // proxy: 'http://47.98.143.242:8083', // 配置跨域处理,只有一个代理 proxy: { '/goddess-app-ajax': { target: 'http://47.98.143.242:8083', changeOrigin: true, pathRewrite: { '^/goddess-app-ajax': '' } } } },
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
技能树-IT修真院
IT修真院是一个免费的线上IT技术学习平台 。
每个职业以15个左右的task为初学者提供更快速高效的学习方式 ;
所有task均是从真实项目中提炼出来的技能点,
强调实战演练+自学优先+师兄辅导的学习方式,
严格的日报体系,欢乐的交流讨论学习气氛,更有无数师兄师姐帮你解疑!
点击官网注册 官网,使用师兄邀请链接有优惠。