vue组件实例解析


Posted in Javascript onJanuary 10, 2017

实现此例您可以学到:

  • 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. 效果图

vue组件实例解析

学习总结

Tag组件其实是一个很小的组件,业务价值很低,主要用于Vue新手入门。主要实现Vue常用的父组件改变子组件的值,view改变model,model的变化反应到view上,事件的绑定等功能。

还需要继承深入了解,以及vuex管理vue组件的应用,还有组件之间的通信。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现依次输入input自动定焦
Dec 23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 #Javascript
React实现点击删除列表中对应项
Jan 10 #Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 #Javascript
微信小程序 slider 详解及实例代码
Jan 10 #Javascript
微信小程序 switch组件详解及简单实例
Jan 10 #Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 #Javascript
You might like
东方红 - 来复式再生机的修复
2021/03/02 无线电
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
js表单登陆验证示例
2016/10/19 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python生成密码库功能示例
2017/05/23 Python
使用Python来开发微信功能
2018/06/13 Python
Sanic框架路由用法实例分析
2018/07/16 Python
Python函数和模块的使用总结
2019/05/20 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
店长岗位职责
2013/11/21 职场文书
公司活动邀请函
2014/01/24 职场文书
聚美优品励志广告词
2014/03/14 职场文书
法律进社区实施方案
2014/03/21 职场文书
旅游活动总结
2014/08/27 职场文书
创先争优公开承诺书
2014/08/30 职场文书
会议主持人开场白台词
2015/05/28 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android