vue组件实例解析

实现此例您可以学到：

• 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. 将用户输入的标签信息动态的添加到标签列表区域。
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用于迭代集合。

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