Vue学习

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

这里附带一个Vant的链接 Vant

image.png

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

<template>
  <div>
    <div v-if="prop.newsType == '1'">
      <!-- 图片在右边 -->
      <van-row type="flex" justify="space-between">
        <van-col>
          <div class="titleNameRightStyle">{{prop.name}}</div>
        </van-col>

        <van-col>
          <van-image round class="imageRightStyle" lazy-load :src= prop.image />
        </van-col>
      </van-row>
    </div>
    <div v-if="prop.newsType == '2'" >
      <!-- 图片在左边   -->
      <van-row type="flex" justify="space-between">
        <van-col>
          <van-image round class="imageLeftStyle" lazy-load :src= prop.image />
        </van-col>
        <van-col>
          <div class="titleNameLeftStyle">{{prop.name}}</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "yhh-cell-component",
  props: {//这里可以理解为iOS中UITableViewCell.h文件暴露出去的属性值 给这个组件赋值   ，这里我定义的是一个对象（ios中字典）。vue这里是可以使用点语法直接赋值的，只要这个对象中有对应的name属性就可以赋值出。
    prop: {}
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {//这里放的就是方法函数
    cellClick(){
      this.$router.push({
        path: "/HelloWorld",
        query: {}
      });
    },
  },
  components: {}
};
</script>

<style scoped>
.cellName {
  width: 100%;
  /* margin-left: 5%; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-wrap: break-word;
  text-align: center;
}
</style>

其中这里是属于文本超出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这个组件，已下是我个人的一些理解


 <YHHNewsCell class="yhh_NewsCell" :prop="item" v-for="item in newsList" :key="item.id"></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的一些区别和理解。有写错的地方望各位大佬多多指教

最后编辑于：2019.08.02 18:08:17