一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情。

Vue是当前非常流行的渐进式框架,社区也是特别的活跃,最近有项目就需要用到这个框架,所以前来学习,作为小白,和大家一起分享我所理解的Vue基础知识。

虽然说Vue很好上手,但是官网提示,是需要有HTML、CSS 和 JavaScript达到一个中级水平的,没有基础的只能一并学习了。

一开始官网推荐的学习方式:在Html文件中引入js,而不是直接使用vue-cli脚手架,这比较复杂,我们一步步从简单的来。

黄色框框里是一个容器,红色框框里新建了一个Vue实例,可以看到,id和el后面的内容是一样的,el就是elment元素的缩写,也就是css里的id选择器概念,Vue实例和容器通过选择器才能建立起关联,把成果放进容器里面展示在Web界面,所以el的作用是指定Vue实例放在哪个容器里面。

虽说我们把容器和Vue实例给绑定了,实际上实例并没有起到什么作用,删掉这段代码,Html界面依旧是可以正常显示Hello World文字的,所以我们来改写一下!

继续给el添加data配置项,在容器中的{{}}插值表达式内放入name,就可以显示我们赋值的何同学变量。这样容器和Vue实例就关联起来工作了。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注