实现此例您可以学到：

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

一、搭建vue开发环境

1）更换镜像到cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2）安装vue-cli

cnpm install -g vue-cli

3）初始化vue项目

命令模式进入项目所在的目录，如d:\test\，输入vue init 项目名称即可。如果你想引入vue2.0框架，必须把nodejs、webpack和npm升级到最新版本。

4）node-sass和sass-loader实现scss的编译

用cnpm安装node-sass和sass-loader，用于编译scss相关内容。

5）通过npm install 安装开发和运行依赖组件

进入刚创建好的目录，执行cnpm install安装所有的开发和运行依赖项

6）通过npm run dev支持调试版本

在安装成功后，直接运行npm run dev即可看到demo的运行界面。

注意：

1.按照上述步骤搭建最终可以创建好vue项目，但也遇到几个坑

2.安装的nodejs和webpack、npm不是最新版本

二、实现Tag组件

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

组件需求

将用户输入的标签信息动态的添加到标签列表区域。

同名和空标签不能输入。

外部可以控制标签显示区域的宽度。

实现思路

一个输入框，用于接受标签内容的输入；

一个列表，用于展示所有输入的标签信息；

提供一个可设置属性，用于设置标签列表的宽度；

具体实现

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用于迭代集合。

2. 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。

3. 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实现

4. 在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组件的应用，还有组件之间的通信。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！