美文网首页
ionic3学习

ionic3学习

作者: web3d开发工程师 | 来源:发表于2019-10-21 08:36 被阅读0次

    首先在ngModel中有这集个选项

    释义
    常用ionic3命令
    https://blog.csdn.net/fan2252228703/article/details/78115912
    可特么的激动死我了
    这是成功添加组建

    ionic中创建组建 需要使用命令

    ionic g page name
    

    常用的ng创建component命令不生效,应该是我没有研究透彻
    在官方组件中使用


    ion-navbar报错

    猜测可能是版本的问题 本地ng版本是八 应该安装6


    搞不懂这个那navbar一直报错
    ionic如何创建组件
    进入项目
    ionic g component name
    ···
    接着引入componentsModer
    ![引入组件](https://img.haomeiwen.com/i11579292/8d5a9ce9b6d914bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    ![在components的module引入组件](https://img.haomeiwen.com/i11579292/3fbb9bc1cc3fac7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    接着在直接使用的页面写入标签
    ![例子](https://img.haomeiwen.com/i11579292/245da8d5701d3347.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    #####创建page组件
    

    ionic g page name

    生成组件之后在app,module.ts中引入
    接着在declarations中注册
    以及在entryComponents中引入
    ####实现页面跳转
    在应用页面写入点击事件![image.png](https://img.haomeiwen.com/i11579292/ee38c4d58feadf39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    ts中引入这两个
    ![image.png](https://img.haomeiwen.com/i11579292/76468b497812d8d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    一个是组件
    一个是导航组件
    接着在constructor中导入
    ![image.png](https://img.haomeiwen.com/i11579292/b7fbfb11df525425.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    点击事件
    ![如图](https://img.haomeiwen.com/i11579292/87a5a170243a7333.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    就能实现效果
    ![image.png](https://img.haomeiwen.com/i11579292/048854e423e6401e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    ####ng6引用img就比较骚气了
    ![assets直接使用](https://img.haomeiwen.com/i11579292/40baf4b1c94b337a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    ####ng的点击事件和vue还是很有区别的
    如果按照vue的写法
    这样运行函数是不生效的
    ![函数](https://img.haomeiwen.com/i11579292/fa8e6a2470a2b88f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ![ng的写法](https://img.haomeiwen.com/i11579292/b82a31c981a01194.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

    相关文章

      网友评论

          本文标题:ionic3学习

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