乌龙白桃Nina酱

结构一般是一整个大的功能模块为一个父组件，里面小的功能分区为子组件，下面就把购物车整体作为父组件cart，里面包含了cart-header、cart-list和cart-footer三个子组件，在下面样式里分别写成了粉色、绿色和卡其色以方便区分。 搭建好基本框架后三个子组件先统…

接上一篇《Vue组件化开发系统讲解》。 组件插槽的作用是父组件向子组件传递内容，相比之前我们讨论的数据的交互，这里的内容指的是模板内容。 组建插槽的位置位于子组件的模板中，就是下面的slot标签，属于Vue的API。 下面演示一下。 按照上面的代码，错误提示Error之后的信息…

组件化开发在发展过程中直到现在已经逐渐形成了一套标准化规范来帮助开发者更便利地开展工作，这套规范称之为Web Components，但目前并不是所有浏览器都支持这套规范。 在这套规范出现之前，我们对于组件化开发有以下几个期待：第一，代码可以尽量多地被重复利用；第二，组件可自定义…

（下面这个图截得不好，就是简单的输入域数据双向绑定和提交按钮点击事件，直接往下看吧。。。=_=） 这里还是直接使用那套大神封装好的日期格式化代码。用法在过滤器的笔记中说过，打包进一个对外暴露的js文件里然后在组件中引入调用就OK了。 出来的效果是date在后台是以毫秒的形式存在…

Vue对数据的处理一般都是响应式的，而原生JS数组方法对数据的处理在默认情况下都是非响应式的。要在Vue中使用这些数组方法就需要将它们变成响应式的，只有这样我们才能通过操作数组来改变页面模板内容。变异方法主要就是体现在这一层面，Vue将原来非响应式的数组方法处理成了响应式的。这…

格式化数据，比如将字符串格式化为首字母大写或者将日期格式化成指定的格式等。 使用插值表达式的方式有2种，一种是通过插值表达式一种是通过属性绑定的值。 上面在main.js里定义的是全局过滤器，下面讲一下具体定义到某个组件中只适用于该组件的局部过滤器。跟之前讲过的自定义指令同理，…

export default中有一个watch属性专门用于监听data中数据变化，这就是我们所说的监听器。 watch中的方法只要与被绑定的数据同名则能与该数据实现绑定。 以上装置的输入域与data中的数据进行了双向绑定，data中的数据又与watch监听器中的同名方法进行了绑…

以用户注册页面为例，在默认情况下，用户打开页面时焦点并不会一开始就定位在输入框，而是需要用户点击输入框之后才能进行输入。 我们可以通过自定义属性来使焦点在打开页面时就自动定位到输入框。做法是通过Vue的API Vue.directive()，括号中的第一个参数就是自定义属性的名…

开唠之前我们得先准备一个表单~（哎呀妈呀我才知道vscode有截图的插件，我以前截图太辛苦了TAT，唔。。。就是这字可能有点小，不打紧，反正这里就是一个平平无奇的表单，涵盖了常用的表单元素，text，radio，checkbox，blablabla~） 这里提一嘴，submit…