当前位置：首页 > 资讯 > 技术文档

vue组件实例解析

时间：2022-02-10 06:06 编辑：来源：阅读：
扫一扫，手机访问

摘要：vue组件实例解析

[b]实现此例您可以学到：[/b] [list] [*]vue-cli的基本应用[/*] [*]父组件如何向子组件传递值[/*] [*]单文件组件如何引入scss[/*] [*]v-on和v-for的基础应用[/*] [*][url=https://github.com/cqhaibin/vue-Tags]源码下载 [/url][/*] [/list] [b]一、搭建vue开发环境[/b] 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的运行界面。 [b]注意：[/b] 1.按照上述步骤搭建最终可以创建好vue项目，但也遇到几个坑 2.安装的nodejs和webpack、npm不是最新版本 [b]二、实现Tag组件[/b] 学习一个新框架，首先是看文档，最重要还是实践。写一个hello world过于简单，要玩就玩个大的。我们就来实现一个Tag（标签）组件领悟一下vue的强大。 [b]组件需求[/b] [list=1] [*]将用户输入的标签信息动态的添加到标签列表区域。[/*] [*]同名和空标签不能输入。[/*] [*]外部可以控制标签显示区域的宽度。[/*] [/list] [b]实现思路[/b] [list=1] [*]一个输入框，用于接受标签内容的输入；[/*] [*]一个列表，用于展示所有输入的标签信息；[/*] [*]提供一个可设置属性，用于设置标签列表的宽度；[/*] [/list] [b]具体实现[/b] [b]1. 模板内容代码[/b]

<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用于迭代集合。 [b]2. Js代码[/b]

<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。 [b]3. Scss代码[/b]

<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实现 [b]4. 在App.vue中引入Tag组件，并组件到Vue的Components（组件库）中，然后在template中以标签的形式引用即可，代码如下：[/b]

<template>
 <div id="app"> 
 <tag width="300px"></tag>
 </div>
</template>
<script>
import Tag from './components/Tag'
export default {
 name: 'app',
 components: {
 Tag
 }
}
</script>

[b]5. 效果图[/b] [img]http://files.jb51.net/file_images/article/201701/2017011015584829.jpg[/img] [b]学习总结[/b] [b]Tag组件其实是一个很小的组件，业务价值很低，主要用于Vue新手入门。主要实现Vue常用的父组件改变子组件的值，view改变model，model的变化反应到view上，事件的绑定等功能。[/b] 还需要继承深入了解，以及vuex管理vue组件的应用，还有组件之间的通信。以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！

全部评论(0)

上一篇：详解用vue-cli来搭建vue项目和webpack
下一篇：结合mint-ui移动端下拉加载实践方法总结

资讯排行榜
更多>>