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 相关文章推荐
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
js数组操作常用方法
May 08 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
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验证session无效的解决方法
2014/11/04 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python正则表达式之作业计算器
2016/03/18 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python异常处理和日志处理方式
2019/12/24 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
在keras里实现自定义上采样层
2020/06/28 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
python爬虫如何解决图片验证码
2021/02/14 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
奥林匹克的口号
2014/06/13 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python