vue组件,撸第一个

实现此例您可以学到:

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

一、搭建vue开发环境

  • 更换镜像到cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装vue-cli cnpm install -g vue-cli
  • 初始化vue项目 命令模式进入项目所在的目录,如d:\test\,输入vue init 项目名称即可。如果你想引入vue2.0框架,必须把nodejs、webpack和npm升级到最新版本。
  • node-sass和sass-loader实现scss的编译 用cnpm安装node-sass和sass-loader,用于编译scss相关内容。
  • 通过npm install 安装开发和运行依赖组件 进入刚创建好的目录,执行cnpm install安装所有的开发和运行依赖项
  • 通过npm run dev支持调试版本 在安装成功后,直接运行npm run dev即可看到demo的运行界面。

注意: 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>

学习总结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吾爱乐享

php学习之初识html

19240
来自专栏超然的博客

jquery中动态新增的元素节点无法触发事件解决办法

  在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法.

10720
来自专栏Flutter入门到实战

Android Studio使用Vector创建矢量图并加载

3.选择Local file,然后选择SVG图形路径,点next --> finish 就好了。具体如图所示。

16210
来自专栏Golang语言社区

Golang 解析base64网络传输如何解析

今天在给服务器做压力测试的流程的时候,遇到了个Golang语言的解析问题;涉及到的主要是解析Base64编码问题,同时也看了底层的源码以下是自己实现的解析: ...

48160
来自专栏Android小菜鸡

H5监听Iframe内部点击实现正常跳转

近期开发中,在布局中使用了IFrame做主页切换,大概布局就是底部一个选择卡,往上就是多个IFrame,点击选择卡切换页面。

89330
来自专栏hbbliyong

主题与皮肤

 主题和皮肤  •通过设置站点、页面、控件的指定属性以声明主题 •皮肤 = 控件的可视属性   –存在于后缀名为.skin的文件当中   –默认皮肤以...

36950
来自专栏Angular&服务

防止微信小程序页面多次跳转

10530
来自专栏JackeyGao的博客

定义横向和纵向不同的print样式

最近优化了 中文诗歌 的打印样式, 由于 Chrome 在打印的时候可以选择横向或者纵向的布局, 所以想同时支持两种布局。

34210
来自专栏编程直播室

Canvas 显示图片

21040
来自专栏美奔科技

向Windows 服务器传输大文件

https://support.microsoft.com/zh-cn/help/2258090/copying-files-larger-than-2-gb-...

1K20

扫码关注云+社区

领取腾讯云代金券