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实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php字符串操作常见问题小结
2016/10/11 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
python动态监控日志内容的示例
2014/02/16 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python2.7到3.x迁移指南
2018/02/01 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python中sys.argv函数精简概括
2018/07/08 Python
python自动化生成IOS的图标
2018/11/13 Python
python实现整数的二进制循环移位
2019/03/08 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
跟单业务员岗位职责
2014/03/08 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
安全环保演讲稿
2014/08/28 职场文书
热爱劳动主题班会
2015/08/14 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
工作自我评价范文
2019/03/21 职场文书