加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Vue学习记录-画页面

发布时间:2020-12-16 23:19:35 所属栏目:百科 来源:网络整理
导读:webstorm 因为之前开发ReactNative的时候,选择了webstorm,这回转战Vue,自然还是用它。如果什么也不做的话,打开Vue工程,编辑区域基本上没有语法高亮。怎么办呢? 安装插件(以mac版本为例,window下面应该大同小异) 1. 打开偏好设置,从左边找到Plugins

webstorm

因为之前开发ReactNative的时候,选择了webstorm,这回转战Vue,自然还是用它。如果什么也不做的话,打开Vue工程,编辑区域基本上没有语法高亮。怎么办呢?

安装插件(以mac版本为例,window下面应该大同小异)

1. 打开偏好设置,从左边找到Plugins

2. 点击Browse repositories...,然后搜索Vue,进行安装

3. 添加Vue模板

4. 重启webstorm,准备工作到此结束

?

项目结构

配置路由,根路径显示Login?

import Vue from 'vue''vue-router''@/modules/Login'Vue.use(Router)

export <span style="color: #0000ff">default <span style="color: #0000ff">new<span style="color: #000000"> Router({
routes: [
{
path: '/'<span style="color: #000000">,name: 'Login'<span style="color: #000000">,component: Login
}
]
})

编写Login.vue

先把代码贴一下,过程慢慢看

过程1:怎么让一个图片作为背景颜色

iOS原生开发:

  方案1:图片作为view的backgroundcolor;

  方案2:一个UIImageView同时位于.subviews[0];

ReactNative开发:

  方案1:作为容器,将其他部分作为childrens;

  方案2:通过positon、zIndex将图片压到最底层;

?Vue方案:

  方案1:作为div的背景图片,但是最后我没有解决图片的拉伸问题;

  方案2:将背景图单独一个div,其他内容单独一个div,然后通过zIndex压到最后

  

{ /* 其他内容所在的div,包括输入框、忘记密码、登录按钮 */:;:;:;:;:;:;:; }background-image { /背景图所在的div/<span style="color: #ff0000">
width</span>:<span style="color: #0000ff"&gt; 100%</span>;<span style="color: #ff0000"&gt;
height</span>:<span style="color: #0000ff"&gt; 100%</span>;<span style="color: #ff0000"&gt;
z-index</span>:<span style="color: #0000ff"&gt; 1</span>;

}

?

过程2:输入框,怎么让input撑满剩余部分呢

在ReactNative里面,可以通过flex:1,让一个组件撑满,放到div/css里面,我就不知道怎么处理了。因为暂时不影响使用,只是简单的做了处理

{:;:;:;:;:;:;:;:;
  }

?

过程3:“记住密码”,能不能做个单独的组件,方便以后复用

问题a. 如何让显示的文本,从父组件传过来显示呢?

问题b. 如何将点击事件交给父组件处理呢?

问题c. 如何判断显示的图片(选中/非选中)呢?

问题d. 组件写好了,应该怎么用呢?

(答案:父组件里面,import引入,注册到components里,然后就可以使用了)

?OK,UI部分到此结束,下面的“接口通信”,预知后事如何,待我娓娓道来

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读