<>强实现此例您可以学到:
-
<李> vue-cli的基本应用李
<李>父组件如何向子组件传递值
<李>单文件组件如何引入scss李
<李> v和v代表的基础应用李
<李>源码下载李
<强>一、搭建vue开发环境
1)更换镜像到cnpm
npm安装- g cnpm——注册表=https://registry.npm.taobao.org
2)安装vue-cli
cnpm安装- g vue-cli
3)初始化vue项目
命令模式进入项目所在的目录,如d: \ \测试,输入vue init项目名称即可。如果你想引入vue2.0框架,必须把nodejs, webpack和npm升级到最新版本。
4) node-sass和sass-loader实现scss的编译
用cnpm安装node-sass和sass-loader,用于编译scss相关内容。
5)通过npm安装安装开发和运行依赖组件
进入刚创建好的目录,执行cnpm安装安装所有的开发和运行依赖项
6)通过npm运行dev支持调试版本
在安装成功后,直接运行npm运行dev即可看到演示的运行界面。
1。按照上述步骤搭建最终可以创建好vue项目,但也遇到几个坑
2。安装的nodejs和webpack, npm不是最新版本
<强>二,实现标签组件
学习一个新框架,首先是看文档,最重要还是实践。写一个hello world过于简单,要玩就玩个大的。我们就来实现一个标签(标签)组件领悟一下vue的强大。
-
<李>将用户输入的标签信息动态的添加到标签列表区域。
<李>同名和空标签不能输入。
<李>外部可以控制标签显示区域的宽度。
-
<李>一个输入框,用于接受标签内容的输入;李
<李>一个列表,用于展示所有输入的标签信息;李
<李>提供一个可设置属性,用于设置标签列表的宽度;李
<强>
1.1模板只是模板语言的标记,解析后不会生成到页面,所以内容需要用一个div包裹住;
1.2模板中可以访问Js代码数据()和方法中,道具等相关属性;
1.3道具用于父组件向子组件传递值,此值可以动态传递,
1.4 v绑定事件,v)用于迭代集合。
<强>
2.1使用v模型=皏al”实现输入自动更新瓦尔这个属性;
2.2添加方法获取val这个属性的值,然后判断是否为空,以及是否在已添加标签数据中存储,如果不存在则添加到标签数组中。
2.3类道具的宽度型和默认值,限制类型为字符串,默认值为汽车。
<强>
<强>
