Vue学习

从写ios布局到写vue，说实话刚写H5开发就一直觉得他这个css样式难写的一逼，现在还是难写的一逼。发现vue的Vant（vue移动端UI）后，只需要写部分简单的布局就行了。
这里就单单以页面来说一个Vue组件和iOS的自定义UITableViewCell做个比较区分

这里附带一个Vant的链接 Vant

image.png

图中红框就是原生开发常见的UITableViewCell列表样式
这里Vue的组件

其中这里是属于文本超出2行显示...

 display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-wrap: break-word;

如果说你少写了word-wrap: break-word; 这一句样式，你会发现当文本内容全部是英文是不会隐藏显示...

接着看外部调用
1、用import from "" 把当前的组件引入

//Vue引入组件
import YHHNewsCell from "../base/components/yhh-news-cell-component";

//OC中对应的引入   swift 不需要引入
#import "YHHNewsTableViewCell.h"

2、注册一下YHHNewsCell 这个组件，在vue生命周期中的这个方法中注册

//vue注册cell
components: {
    YHHNewsCell,
  }

//OC注册cell

3、使用YHHNewsCell这个组件，已下是我个人的一些理解

 
//其中:prop 这个表示在cell组件中声明出来的赋值是这样赋值的  v-for就是循环创建咯，不明白的可以去看看vue基础语法 v-for="item in newsList" 这个简单的说就是吧数组newsList里循环赋值给item ，然后item通过:prop="item"赋值到组件cell中    

newsList对应的就是在
data() {
    return {
         newsList: [
        {
          id: "1",
          name: "标题标题标题标题标题标题标题标题标题标题标题标题",
          newsType: "1",
          image: "https://img.yzcdn.cn/vant/cat.jpeg"
        },
        {
          id: "2",
          name: "标题标题标题标题标题标题标题标题标题标题标题标题",
          newsType: "2",
          image: "https://img.yzcdn.cn/vant/cat.jpeg"
        },
        {
          id: "2",
          name: "标题标题标题标题标题标题标题标题标题标题标题标题",
          newsType: "2",
          image: "https://img.yzcdn.cn/vant/cat.jpeg"
        },
        {
          id: "2",
          name: "标题标题标题标题标题标题标题标题标题标题标题标题",
          newsType: "2",
          image: "https://img.yzcdn.cn/vant/cat.jpeg"
        }
      ]
    }
}

4、就可以在页面展示了。

在这里补充一下上面的v-if

v-if="prop.newsType == '1'"
//这里的v-if我的理解就是对应的OC中根据newsType显示不同的cell，

以上是本人在刚接触vue的时候发现和ios的一些区别和理解。有写错的地方望各位大佬多多指教