vue组件,撸第一个
时间:2022-04-22
本文章向大家介绍vue组件,撸第一个,主要内容包括实现此例您可以学到:、一、搭建vue开发环境、二、实现Tag组件、实现思路、具体实现、学习总结、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
实现此例您可以学到:
- 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: 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实现
- 在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组件的应用,还有组件之间的通信。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Cypress系列(48)- and() 命令详解
- Java源码系列2——HashMap
- 快速学习-Saturn Console部署
- MySQL的各种日志
- 本地机器如何访问服务器上的docker容器内的tensorboard?
- MySQL是如何实现可重复读的?
- Java源码系列4——HashMap扩容时究竟对链表和红黑树做了什么?
- 如何理解被 protected 修饰的成员变量?
- 重学数据结构(五、串)
- python boto和boto3操作bucket
- 对比 Redis 中 RDB 和 AOF 持久化
- Nginx负载均衡健康检查功能
- 深入浅出hiredis -- C++操作redis
- redis学习(十五)
- nginx反向代理’/’的问题记录