Vue是一个前端网页js文件。里面提供了很多好用的功能,如果你的前端HTML页面包含了这个文件,你就可以非常方便的写很多非常灵活的Web页面。

Vue既然是一个js文件,当然可以直接在HTML文件里包含,包含就可以用。而且包含的vue.js可是一个在线文件。浏览器会自动下载这个文件加载使用。就像下面这样:

工程化现在是前端的主流开发方法,一行控制台命令,就可以创建一个完整的初始工程;一行命令就可以生成发布的包;一行命令就可以安装一个新的第三方包;

本文主要讲入门,也就是能不用工程的工具就不用工程的工具,我们就从一个HTML文件开始吧。

建议先安装Visual Studio Code来编写代码,会自动补全,很方便。

新建一个文本文件,重命名为 Vue Hello World.html(文件名随便取)。

右键用浏览器打开上面的Vue Hello World.html文件,就会看到Vue运行的效果啦!

1 上面代码的第6行包含的在线的vue.js文件,这让我们可以在第11行,第15~20行写Vue的代码。

3 第15行创建了一个Vue对象,这样Vue就可以工作了。但是还是需要一些初始化的工作来指定Vue的具体特性。

上述代码的意思是将Vue对象绑定到HTML元素app身上。这样Vue就可以操作这个元素。

Vue只操作这一个元素能搞出啥动静吗?可以的。因为Vue假设我们的页面就这一个元素。所有的页面内容都是用这个元素的孩子,孙子节点创造出来的。所以Vue也是一个单元素单页面的程序。

有点不可思议吧!这也很容易理解,因为只有这样,我们写的后面的代码才可以都交给Vue去处理。让Vue接管所有前端页面的内容。

不然的话,哪里有独立于Vue的HTML代码,哪里就无法享受Vue的便捷性。

5 第17行的代码data是固定的,Vue必须要有这个成员。这个成员里的值如果被改变,界面上的内容会自动改变。这个是Vue的核心工作。也就是说,你改了内存数据,页面就会发现你改了(实际上是Vue在不定期扫描,或者说回调函数在执行),从而你就只需要操心内存数据就行了。

上面的message是单向绑定,也就是说,message在内存里被JavaScript代码修改了以后,界面上可以直接看到修改后的值。Vue还支持双向绑定。

比如你有一个文本输入框,这个文本框,这个文本框的内容可以绑定到一个Vue data的成员,这样你输入文本框,Vue的data里的数据就会变。更有意思的是,如果这个data成员又被绑定到页面其他控件,就会发现联动效果。这就更方便了。

发表回复

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