vue组件,撸第一个
实现此例您可以学到:
- vue-cli的基本应用
- 父组件如何向子组件传递值
- 单文件组件如何引入scss
- v-on和v-for的基础应用
- 源码下载
一、搭建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的强大。
组件需求
- 将用户输入的标签信息动态的添加到标签列表区域。
- 同名和空标签不能输入。
- 外部可以控制标签显示区域的宽度。
实现思路
- 一个输入框,用于接受标签内容的输入;
- 一个列表,用于展示所有输入的标签信息;
- 提供一个可设置属性,用于设置标签列表的宽度;
具体实现
- 模板内容代码
<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用于迭代集合。
- 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。
- Scss代码
<style lang='scss' scoped >
@keyframes item-show{
from{ opacity:; }
}
.clear{
zoom:;
}
.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实现
- 在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组件的应用,还有组件之间的通信。
vue组件,撸第一个的更多相关文章
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- Vue组件的介绍与使用
组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...
- VUE组件如何与iframe通信问题
vue组件内嵌一个iframe,现在想要在iframe内获取父vue组件内信息,由于本人技术有限,采用的是H5新特性PostMessage来解决跨域问题. postMessage内涵两个API: on ...
- Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
- 自定义Vue组件打包、发布到npm以及使用
本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附 ...
- vue组件开发练习--焦点图切换
1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...
- VUE组件 单独文件封装
https://www.cnblogs.com/SamWeb/p/6391373.html vuejs 单文件组件.vue 文件 vuejs 自定义了一种.vue文件,可以把html, css, ...
- vue - Vue组件化编程
今天是对vue组件化的一个理解,最主要的单文件组件,然后就可以脚手架的学习了,本来昨晚就该上传的,但是用的那个上传博客园的Python脚本不行了,换了一个新的. 组件化让我越来越感觉到框架的力量了 一 ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
随机推荐
- MVC5模板部署到mono
VS2013中的MVC5模板部署到mono上的艰辛历程 2014-10-27 09:30 by FuzhePan, 3954 阅读, 46 评论, 收藏, 编辑 部署环境:CentOS7 + Mono ...
- leetcode[70] Simplify Path
题目的意思是简化一个unix系统的路径.例如: path = "/home/", => "/home"path = "/a/./b/../../ ...
- 【转】Android Application 对象介绍
What is Application Application和Activity,Service一样是android框架的一个系统组件,当android程序启动时系统会创建一个 application ...
- [置顶] 如何使用c3p0+spring连接oracle数据库
1. 首先是jdbc.properties属性文件的编写,便于数据库移植: datasource.driverClassName=oracle.jdbc.driver.OracleDriver dat ...
- Dotfuscator注册码和XenoCode注册码
.net加密工具注册码:Dotfuscator注册码如下: Your serial number is 14705 Your Confirmation Numb ...
- ul和li实现分两列(多列)布局显示
简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...
- MYSQL 分表实践
基本条件: 无索引 主表 test_0 数据:一百万条 数据库引擎 InnoDb 分表 test_1...test_100 数据 每张一万条,一共一百万条 数据库引擎 InnoDb 流程: 主表中 ...
- 史上最全条件编译解析 #ifdef #ifndef #undef #else #endif
C语言和C++语言程序中广泛存在着#ifdef或#ifndef等条件编译语句,本篇就系统介绍下他们的用法. 这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分 ...
- Chrome浏览器网页截全屏算法以及实现
做个一个简单的批量下载插件叫“挖一下”, 正如插件的名字一样,采集网页里面的所有图片,根据筛选条件过滤不需要的图片,最后下载选中的图片. 索性把网页也一起给截了,截屏分两种: 1.可见内容截屏 2.完 ...
- 自己做个 Tag标签
这是效果图,下面是源码,时间有限,有时间再完善 http://files.cnblogs.com/wxwall/tag.zip