1.1 从Hello World开始—— 第1章 Vue起步知识

vue

第1章 Vue起步知识

儿童相见不相识，笑问客从何处来？这是怎样的一种尴尬啊！如果学习了本章，对Vue会有个感性认识，避免对大名鼎鼎的Vue产生不相识的尴尬。

千里之行，始于第一行。先不介绍Vue，直接来一个Vue的Hello World页面。这个过程很简单，只需要两步，不能跳过去，因为下面的学习需要这么一个简易的开发环境来写代码。

（1）从Vue官网下载vue.js，官网地址：https://cn.vuejs.org/。如图1.1-1：

图1.1-1

下载开发版本后，再新建一个lesson1项目，可以用WebStorm，HBuilder，VSCode等编辑器来开发，推荐使用JetBrains公司的WebStorm开发工具。把下载后的vue.js文件拷贝到项目的static目录，目录结构如图1.1-2：

图1.1-2

（2）在lesson1目录下，新建helloworld.html文件，输入如下代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p >我的名字是：{{name}}</p>

<p >我的年龄是：{{age}}</p>

</div>

var model={

name:'Vue',

age:4

}

var app=new Vue({

el:"#app",

data:model

})

</script>

</body>

</html>

注意vue.js文件路径和你的本项目路径一致。将helloworld.html拖入到浏览器，渲染结果如图1.1-3：

图1.1-3

上面的代码是什么逻辑呢？其实就是MVVM，是Model-View-ViewModel的简写，即模型-视图-视图模型。

----------------------------------------------------------------------------------------------------------------

本内容为《抹平Vue学习曲线》的部分章节，需要阅读完整书籍的，可以跟作者沟通。

----------------------------------------------------------------------------------------------------------------