vue3.0 CLI - 2.1 -  component 组件入门教程


Posted in Javascript onSeptember 14, 2018

我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。

进入 src 文件夹,这是实际都工程文件夹,其他文件夹以及文件以后在了解。

3个文件夹  assets - 各类静态资源文件夹 - 比如 图片, css 文件等。  components - 组件文件夹, 组件是 vue 等 MVC 框架等核心概念,自行了解含义。 view - 视图文件夹。

5个文件  app.vue、main.js - 主视图、配合 main.js 成为 vue 程序的主入口。router.js - 路由程序主入口。store.js - 路由状态管理系统。

registerServiceWorker.js 暂不进行了解。

介绍完工程文件夹,进入本文主要关注点 - 组件。

*.js 和 *.vue文件都可以单独成为 组件 。我不会使用单独的 *.js 文件作为组件 ( 用 *.vue 文件作为组件方便理解和管理 )。组件可以单独用 *.vue 写出来,也可以分开同时用 *.vue 和 *.js 来完成一个或者多个组件。

当前工程文件夹中存在 4 个组件:app.vue + main.js、helloworld.vue、views/home.vue、views/about.vue。

template 标签:4 个组件都有,这是渲染模版,也是组件的核心,细心的读者可以发现这4个 template 中都包含有一个顶层都 div 元素。script 标签:helloworld.vue 和 views/home.vue 中有,也可以用单独的 js 文件描述,比如 main.js。style 标签:app.vue 和 helloworld.vue 中有,提供【组件作用域】的 css 样式,防止团队协同开发导致的 css 样式名冲突。

template - script - 问答

1、为什么要使用 *.vue 和 *.js 分开的方式写组件?

答:这个初始化的项目,自然没有这个必要。在大型的项目中,有些组件的 模板 template 和 功能定义 script 都是相当规模的代码,分开管理有利于项目架构的整理。

2、下面是否会介绍 style 的用法?

答:显然不会,这方面内容简单,读者自行了解。

3、app.vue 与其他组件中 script 的区别?

答:这个区别很大!app.vue 中的 script 是定义各类功能的集中入口,当前可以看到的有 路由、路由状态管理系统、渲染 和 配置定义,因此 app 组件的 script 一般都是分开定义。由于 app.vue 是主程序入口,它并没有 data、prop 等等常规组件都有的东西。关于 app.vue 和 main.js,在以后的学习中会渐渐深入。

学习改造 helloworld.vue

export default { name: 'HelloWorld', props: { msg: String } },这是 script 代码。export default <object>,其实这个很简单,导出一个 object 实例,这个 obj 有 name、props 属性。name - 组件名称;props - 组件属性 ( 这些属性的值只能由父组件提供 )。组件属性也是一个健值对的对象:健 - 属性名称,值 - 属性类型 ( 这玩意还有点内容,建议去官方说明中看相关介绍 )。

helloworld.vue 组件在 views/home.vue 中被使用,props => msg 也是在 views/home.vue 中传递过来 ( 下文中绿字部分 ):

import HelloWorld from '@/components/HelloWorld.vue' 
 <HelloWorld msg="Welcome to Your Vue.js App"/>

仅有这些还不能使用 helloworld.vue 组件,还需要以下代码中绿色的部分:

export default { name: 'home', components: { HelloWorld } }。

现在来用 helloworld.vue 试验学习组件的相关内容。

v-for 的使用

data: function() {
return {
linkPrefix: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-',

clis: [


{ link: "babel", text: "babel" },


{ link: "pwa", text: "pwa" },


{ link: "eslint", text: "eslint" },


{ link: "unit-mocha", text: "unit-mocha" },


{ link: "e2e-nightwatch", text: "e2e-nightwatch" }

]
}

给 helloworld.vue 组件导出配置增加如上 data 属性 ( 由于组件存在,data 属性需要用 function 的方式来返回 ) 。

<ul>
<li v-for="(cli,index) in clis" :key="index">


<a :href= linkPrefix + cli.link target="_blank" rel="noopener">{{cli.text}}</a>

</li>
</ul>

修改之后的版本已经上传我的 github 。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 2.1 -  component 组件入门教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 #Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 #Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 #Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 #Javascript
在vue项目中使用md5加密的方法
Sep 14 #Javascript
在vue项目中引用Iview的方法
Sep 14 #Javascript
详解webpack-dev-server使用方法
Sep 14 #Javascript
You might like
php 验证码制作(网树注释思想)
2009/07/20 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
浅谈node模块与npm包管理工具
2018/01/03 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
python实现在IDLE中输入多行的方法
2018/04/19 Python
python去除扩展名的实例讲解
2018/04/23 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
销售主管岗位职责范本
2014/02/14 职场文书
球队口号
2014/06/18 职场文书
终止劳动合同协议书
2014/10/05 职场文书
求职导师推荐信范文
2015/03/27 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript
win10搭建配置ftp服务器的方法
2022/08/05 Servers