vue造轮子-4-文本输入框
2019-11-07 本文已影响0人
zzyo96
1.如何将持续集成的标志添加到readme.md中
- 进入travisCI.org 找到对应的项目 点击图标
image.png
2.复制
image.png
3.编辑readme.md 把地址放进去就行了
image.png
2.如何将iconfont.js放到组件中
1.创建svg 内容为，symbol中的js代码（用浏览器打开复制代码）
2.引入即可
image.png
3.vue中的自定义组件必须是闭合的才行，因为他是遵循HTML语法 而不是 XML
4.在组件中添加name属性的好处之一是可以在用vue-dev-tools工具的时候找到对应的组件
5.因为不能保证其他组件的class名与当前的一样 所以要在style 后加 scoped ，只在当前组件内生效，原理是打包编译好以后，会加一个随机字符串id，指的是当前的组件
6.如果传了error 就添加一个error类
image.png
可以简写为
image.png
7.写template 是一个占位符
image.png
8.传disabled值的时候
image.png
或者
image.png
9.精简代码
beforeEach()和afterEach 是在每次测试之前要做的事情（在mocha文档有写）
image.png
10. 精简代码
精简前
image.png
精简后
image.png
11. 监听input的change事件
要这样写，第二个参数$event的原生js的change事件，只有传了，才能打印出input输入的内容，在e.target.value
image.png
12.karma chai 都是干嘛的
karma 简单来说就是打开浏览器的，所以在Karma.config.js中 配置了 打开什么浏览器，以及用什么所依赖的库
image.png
引入了mocha 就可以使用 describe和 it两个函数
image.png
sinon-chai 就是同时引入sinon和chai
sinon是用来做fake使用的
image.png
chai.js 提供expect断言
而chai可以与sinon合作是因为有sinon-chai
sinon-chai提供了 calledWidth
image.png
13.如何让Input支持双向绑定
首先监听input 事件
image.png
然后v-model绑定数据
image.png
定义message数据
image.png
