Android老菜鸟学习前端日记(一)-mui与vue

说说学前端的目的.

比较现实,赚钱呗.还有就是提高眼界吧

小程序,微信,混合app(一键生成ios和安卓).这都是活啊.

接个安卓的活可真不容易....

基础

以前某段看过jquery,写过个页面
陆陆续续学了css,html,能写简单的能看懂的水平.
js能看懂能写,但不快.
mvc mvp mvvm,组件化,设计模式因为都是通用的,理解起来应该快.

MUI

很方便,基本看着文档,就能写个能看的页面出来,不过也只有模版

如果要自定义,改起来就需要水平了=-=.

为什么直接使用这个..

而不是去看js的书,看jquery,看w3c.

个人觉得从头看从头学很费时间.而且容易失去兴趣.难出效果,容易受打击.

我现在的学习方式是,用mui模版先写出效果,然后打开chrome,调式看css属性,以及html,js怎么写的.然后改效果,改功能.熟练用法

Vue

这个mvvm框架.一开始也不知道是啥,是看mui的例子看懂的.
双向绑定,这个好理解,和安卓的databinding一个意思.数据改变,view变化

var news = new Vue({
    el:'#news',//这个的意思是这个对象的作用域吧.
    data:{//data相当于内容,里面放各种成员变量吧.
          items: []
       }
    });

目前知道的:

v-for属性:

Paste_Image.png

用在ul下的li上,个人的理解是,将li看成item,items是data数组(adapter中的数据源),这样的话,请求数据后,Vue中的items内容变化(notifychangeData),列表就刷新了.真的方便

v-if

Paste_Image.png

应该是取boolean值,可以当adpate中的getitemtype()用.用来判断显示什么样的item
需配合v-for使用,否则会提示找不到item

v-else-if

Paste_Image.png

同v-if一起使用.相邻的两个元素,可以这样使用,好比写 if()后面不一定要{}一样.

取值

{{item.字段名}}
可以这样来取值,赋值给元素.这样的只要vue的items一刷新,所有view都会变化,.

来张效果图:

Paste_Image.png Paste_Image.png Paste_Image.png

学习了一天,理解了些知识,但是消化不够,感悟就是少看多做.实践出真理.
还是看着demo源码学比较爽.光看api,太蛋疼了.