Vue轻松入门,一起学起来!

原创 Fly丶 教程 vue专题 1193阅读 29 天前 举报

我们创建一个项目,这个项目我们细说Vue

一.如何在项目中添加模块

我们通过npm进行 安装 模块。

首先我们通过cmd.exe cd进入你的项目根目录,必须存在package.json文件,安装完之后就自动引入了。

如何在项目中添加模块呢?我们找到main.js

二.程序员典型开场白“Hello,World”

vue页面中的样式都有互用性,那么如何让一个webpack的样式具有单一性呢.可以在style标签中添加scoped

...b话少说,让我们看下helloWorld吧。

data就犹如C#中的参数一样,它是为View做准备的,就犹如MVC一样,这种数据驱动和组件化就叫做MVVM模式

三.绑定复杂数据(集合)

数据是这样的:

我们可以通过vuev-for去遍历它。

但我们值得思考的是,如何获取下标呢,我们说的并不是sid---序号,我们可以这么搞定

这第二个参数还有一个关键字就是attr我们可以这么做

这样我们就可以知道它的属性名了。

有可能你觉得绑定集合我们已经说完了,聪明的同学应该发现,这样的数据格式非常的整洁,那如果他们的列数不同我们应该怎么办呢?我们可以这么做!

四.vue的view-model

image

五.@Click事件驱动

winfrom事件驱动类似,vue中事件写在methods中,我们简单的做一下登录功能

事件驱动的标识通过@Click触发

值得一提的是,如果方法需要参数,但是通过事件调用的时候没有给传递参数,那么参数的值等于此方法的Dom元素所触发的事件对象。例如button就等于MouseEvent,在ES6新标准中,方法可以自行定制默认值,如果不传值就是默认值的了!

传入值

如果不传入

六.v-if方法

七.v-show

这和if没有什么区别 而且和else的机制不同,show方法只是控制一下style:display:none||block 。。。
发现文章中的错误,或者有更好的建议,欢迎评论或进前端全栈群:866109386,来交流讨论吹水。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复