美文网首页
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