开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue.js入门之工程目录介绍

简介: Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
+关注继续查看

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

关于Vue环境搭建的内容,本文不再介绍,不清楚的同学可以访问Vue环境搭建或者查看官网相关内容的介绍: 
https://cn.vuejs.org/v2/guide/installation.html

初始化项目

首先,我们使用如下的命令创建一个Vue项目。​

9ccc0ca9gy1frkguyuowkj20sv019t8l.jpg

​然后项目会有一些初始化的设置,该部分内容的具体含义如下:

Target directory exists. Continue? (Y/n) :直接回车默认(然后会下载 
vue2.0模板);

Project name (vue-test) :项目名称,直接回车默认;

Project description (A Vue.js project) :Vue项目描述,直接回车默认;

Author:项目拥有者名称,直接回车默认;

Use ESLint to lint your code? n:是否启用eslint检测,选择”N”;

pick an eslint preset: 默认Standard;

setup unit tests with karma + mocha?N:是否需要添加单元测试,选择不需要;

setup e2e tests with Nightwatch?N:是否需要添加E2E测试,选择不需要。 

9ccc0ca9gy1frkgvsrzu8j20rj0hk14x.jpg

​然后打开终端,执行“npm install”命令安装依赖库。

9ccc0ca9gy1frkgw3i2rnj20st028dfq.jpg

​如果开发中需要安装一些额外的第三方库,可以使用如下面的命令:​

9ccc0ca9gy1frkgwehy2rj20sw01gq2t.jpg

​然后使用下面的命令启动或者发布项目

9ccc0ca9gy1frkgwsuq69j20sy01cdfs.jpg

​Vue目录结构介绍

打开新建的Vue项目,其目录结构如下图所示。

9ccc0ca9gy1frkgxfl2qgj20my0t24ff.jpg

在上面的文件结构中,重点注意下面的内容:

index.html文件入口;

src放置组件和入口文件;

node_modules为依赖的模块;

config中配置了路径端口值等;

build中配置了webpack的基本配置、开发环境配置、生产环境配置等。

Vue基础指令

Vue内置了很多有用的指令,这些指令通常作用在HTML元素上以v-开头,可将指令视作特殊的HTML属性(attribute)。下面就一些常用的指令给大家简单介绍下。

v-if指令

条件判断指令,根据表达式值的真假来插入或删除元素,表达式返回一个布尔值。语法规则如下:​

9ccc0ca9gy1frkgxtvgdij20st01dglg.jpg

​例如有下面一个实例

9ccc0ca9gy1frkgyem3q3j20ss0jg76t.jpg

​运行结果为:

9ccc0ca9gy1frkgyn9lrvj20st026wec.jpg

v-show指令

条件渲染指令,与v-if不同的是,无论v-show的值为true或false,元素都会存在于HTML代码中;而只有当v-if的值为true,元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值,v-show指令的语法如下:​

9ccc0ca9gy1frkgyzdi31j20sp01d0sl.jpg

​例如:

9ccc0ca9gy1frkgzdkdmwj20ss0jb0v7.jpg

9ccc0ca9gy1frkgzn5t6uj20ug0bvac9.jpg

可配合v-if或v-show使用,v-else指令必须紧邻v-if或v-show,否则该命令无法正常工作。v-else绑定的元素能否渲染在HTML中,取决于前面使用的是v-if还是v-show。若前面使用的是v-if,且v-if值为true,则v-else元素不会渲染;若前面使用的是v-show,且v-show值为true,则v-else元素仍会渲染到HTML。

v-for指令

循环指令,基于一个数组渲染一个列表,与JavaScript遍历类似。语法格式如下:​

9ccc0ca9gy1frkh00yg68j20sr01e0sk.jpg

​例如,在数组todos,依次遍历数组todos中的每个元素,将text部分显示。

9ccc0ca9gy1frkh0kdn04j20ot0dtjsf.jpg

v-bind指令

v-bind用于给DOM绑定元素属性。例如:

9ccc0ca9gy1frkh15k2daj20ov013a9v.jpg

​其中,argument通常是HTML元素的特性,如:v-bind:class=”expression”。 
v-bind指令可以缩写为:冒号。

9ccc0ca9gy1frkh1hxyihj20ss0l60v3.jpg

v-on指令

v-on用于监听DOM事件,语法与v-bind类似,如监听点击事件。​

9ccc0ca9gy1frkh28wg03j20so01fq2s.jpg

​其中,v-on指令可以缩写为@符号。如:@click=”doSth”。

9ccc0ca9gy1frkh2ogtluj20sr0r3who.jpg

附: 
vue.js 官网:https://vuejs.org/ 
vue.js 中文网: http://vuefe.cn/ 
vue-router 文档:http://router.vuejs.org/zh-cn/index.html/ 
vuex 文档:http://vuex.vuejs.org/ 
webpack 文档:https://webpack.github.io/docs/ 
ES2015 入门教程:http://es6.ruanyifeng.com/ 
scss 文档: 
http://sass-lang.com/documentation/file.SASS_REFERENCE.html 
mocha 文档: http://mochajs.org/ 
express 中文官网:http://expressjs.com/zh-cn/


​本文摘自异步社区,作者xiangzhihong,作品《Vue.js入门之工程目录介绍 》,未经授权,禁止转载。

9ccc0ca9gy1frcdobu7f5g20hs01pt93.gif

推荐阅读

2018年5月新书书单(文末福利)

2018年4月新书书单

异步图书最全Python书单

一份程序员必备的算法书单

第一本Python神经网络编程图书

9ccc0ca9gy1fqyf4q8tctj209k09k744.jpg

​长按二维码,可以关注我们哟

每天与你分享IT好文。


在“异步图书”后台回复“关注”,即可免费获得2000门在线视频课程;推荐朋友关注根据提示获取赠书链接,免费得异步e读版图书一本。赶紧来参加哦!

点击阅读原文,查看更多

阅读原文


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
输出杨辉三角(C++和 JAVA版 )
输出杨辉三角(C++和 JAVA版 )
54 0
CTF---Web入门第八题 Guess Next Session
Guess Next Session分值:10 来源: iFurySt 难度:易 参与人数:3870人 Get Flag:1672人 答题人数:1690人 解题通过率:99% 写个算法没准就算出来了,23333 hint:你确定你有认真看判断条件? ...
2387 0
《Node.js区块链开发》一导读
本书原名《Nodejs开发加密货币》,大部分已经通过网络免费分享(网络上仍有原文),正式出版的时候改成了现在的名字,部分章节也做了调整。写作本书的时候,“区块链”这个称呼并不流行,但讨论的内容实际上就是区块链技术。
5362 0
《Node.js区块链开发》导读
每每读到这句话,总能被感动。后来,与那位朋友聊天,我说你真有才,能把一句话说到人的内心深处,我若不是因为是男人,一定美美地哭一场。他一听,十分感慨,告诉我他也是摘抄来的,还说只有经历过,才能被感动。
4260 0
doT.js详细介绍
doT.js特点是快,小,无依赖其他插件。官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolation{{ }} for evaluation{{~ }} for array iteration{{? }} for ...
831 0
Node.js入门
一、Node.js简介  Node.js是一套用来编写高性能网络服务器的JavaScript工具包。初学者可能会误以为这是一个Javascript应用,事实上,Node.js采用C++语言编写而成,是一个Javascript的运行环境,这也是为称为.js的原因。
922 0
java在指定目录下执行dos命令或者bat文件
直接看源程序吧 public static void main(String[] args) throws IOException { File dir = new File("D:\\"); // String command="netstat -an"; String command = "c:\\windows\\system32\\cmd.
773 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载