美文网首页
vue造轮子-4-文本输入框

vue造轮子-4-文本输入框

作者: zzyo96 | 来源:发表于2019-11-07 16:53 被阅读0次

1.如何将持续集成的标志添加到readme.md中

  1. 进入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

相关文章

网友评论

      本文标题:vue造轮子-4-文本输入框

      本文链接:https://www.haomeiwen.com/subject/rgehuqtx.html