首页 > Java教程

vue组件,撸第一个

2017-01-10 12:06:49

实现此例您可以学到:

  1. vue-cli的基本应用
  2. 父组件如何向子组件传递值
  3. 单文件组件如何引入scss
  4. v-on和v-for的基础应用
  5. 源码下载

一、搭建vue开发环境

注意:
1.按照上述步骤搭建最终可以创建好vue项目,但也遇到几个坑
2.安装的nodejs和webpack、npm不是最新版本
3.如遇坑可以参考此博客:地址

二、实现Tag组件

     学习一个新框架,首先是看文档,最重要还是实践。写一个hello world过于简单,要玩就玩个大的。我们就来实现一个Tag(标签)组件领悟一下vue的强大。

组件需求

  1. 将用户输入的标签信息动态的添加到标签列表区域。
  2. 同名和空标签不能输入。
  3. 外部可以控制标签显示区域的宽度。

实现思路

  1. 一个输入框,用于接受标签内容的输入;
  2. 一个列表,用于展示所有输入的标签信息;
  3. 提供一个可设置属性,用于设置标签列表的宽度;

具体实现

  1. 模板内容代码
<template>  <div class="tag-wrap">    <span>标签:</span>    <input type="text" id="tag" name="tag" v-model="val" />    <button id="apply" v-on:click="add" >添加</button>    <ul class="tag-cont clear" v-bind:style="{width: width}">      <li v-for="item in cont">{{item}}</li>    </ul>  </div></template>

1.1 template只是模板语言的标记,解析后不会生成到页面,所以内容需要用一个div包裹住;1.2 template中可以访问Js代码中data()和Methods、props等相关属性;1.3 props用于父组件向子组件传递值,此值可以动态传递;1.4 v-on绑定事件,v-for用于迭代集合。
  1. Js代码
<script> export default{  name: 'tag',  data () {   return {    cont: [],    val: ''   }  },  methods: {   add: function () {    let _val = this.val    if (_val.length === 0 || this.cont.indexOf(_val) > -1) {     return    }    this.cont.push(this.val)   }  },  props: {   width: {    type: String,    default: 'auto'   }  } }</script>

2.1 使用v-model="val"实现输入自动更新val这个属性;2.2 add方法获取val这个属性的值,然后判断是否为空,以及是否在已添加标签数据中存储,如果不存在则添加到标签数组中。2.3 props的width类型和默认值,限制类型为String,默认值为auto。
  1. Scss代码
<style lang='scss' scoped >  @keyframes item-show{    from{ opacity: 0; }  }  .clear{     zoom: 1;  }  .clear:after{    content: '';    display: block;    width: 0px;    height: 0px;    overflow: hidden;    clear: both;  }  $back-color:#fed;   span{    background: $back-color;  }  .tag-cont{    list-style: none;    margin: 10px auto;    padding: 5px;    border: 1px solid lightblue;  }  .tag-cont > li{    float: left;    padding: 5px;    border:1px solid gray;    border-radius: 10px;    animation: item-show 1s;    margin: 10px;  } </style>

3.1 用lang来标记style标签内的Css实现
  1. 在App.vue中引入Tag组件,并组件到Vue的Components(组件库)中,然后在template中以标签的形式引用即可,代码如下:
<template> <div id="app">   <tag width="300px"></tag> </div></template><script>import Tag from './components/Tag'export default { name: 'app', components: {  Tag }}</script>

    5. 效果图

学习总结

   Tag组件其实是一个很小的组件,业务价值很低,主要用于Vue新手入门。主要实现Vue常用的父组件改变子组件的值,view改变model,model的变化反应到view上,事件的绑定等功能。   还需要继承深入了解,以及vuex管理vue组件的应用,还有组件之间的通信。