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 arguments 多参传值函数
Oct 24 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
React实现动效弹窗组件
Jun 21 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
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
php四种基础算法代码实例
2013/10/29 PHP
php发送post请求的三种方法
2014/02/11 PHP
php 删除cookie方法详解
2014/12/01 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
JsRender实用入门教程
2014/10/31 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
Python自动连接ssh的方法
2015/03/07 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
五一家具促销方案
2014/01/10 职场文书
一分钟演讲稿
2014/04/30 职场文书
高中生学习计划书
2014/09/15 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫