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

最新推荐文章于 2023-08-29 09:42:33 发布

gongyin2013

最新推荐文章于 2023-08-29 09:42:33 发布

阅读量210

点赞数

分类专栏：抹平Vue学习曲线文章标签： vue web

本文链接：https://blog.csdn.net/gongyin2013/article/details/106547936

版权

抹平Vue学习曲线专栏收录该内容

12 篇文章 2 订阅

订阅专栏

第1章 Vue起步知识

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

1.1 从Hello World开始

千里之行，始于第一行。先不介绍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>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
   <p >我的名字是：{{name}}</p>
   <p >我的年龄是：{{age}}</p>
</div>

<script src="../static/vue.js"></script>
<script>
   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学习曲线》的部分章节，需要阅读完整书籍的，可以跟作者沟通。
----------------------------------------------------------------------------------------------------------------