Vue.js 系列 - Hello World

Posted 辣鸡OvO

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 系列 - Hello World相关的知识,希望对你有一定的参考价值。

Vue.js 框架是一个由我们国人开发的一个 Web 框架,尤雨溪 ,感兴趣的可以自己了解。

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

Vue.js 下载地址:

https://vuejs.org/js/vue.js

打开网址 Ctrl + s 保存到桌面就好。

新建一个文件夹,把刚刚下载好的 vue.js 文件放到文件夹里,在文件夹里新建一个 html 文件。

创建好的目录大致如下:

通过 <script></script> 标签导入 vue.js 文件,如下:

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="utf-8">    <title>Hello World</title>    <script src="vue.js"></script>
</head>
<body>

</body>
</html>

现在增加 html 文件里面的内容,如下:

<!DOCTYPE html>
<html lang="en">
   <head>        <meta charset="utf-8">        <title>Hello World</title>        <script src="vue.js"></script>
   </head>
   <body>        <div id="app">            {{ msg }}    
       </div>        <script>            var app = new Vue({                el: '#app',                data: {                    msg: 'Hello World'                }            })    
       </script>
   </body>
</html>

浏览器打开 index.htmlHello World 就显示在了网页上了。

虽然我们用 <div>Hello World</div> 能输出同样的结果,为什么还要用到 Vue.js 这个前端框架呢?

因为这样对网页上的数据可以更加方便的处理、渲染,更加容易扩展网页应用。可以减少很多 DOM 的操作,大型项目中可以减少很多重复代码。


关注持续更新


以上是关于Vue.js 系列 - Hello World的主要内容,如果未能解决你的问题,请参考以下文章

第707期Vue.js源码:Hello World的背后

text Vue.js的Hello world!

Vue 3系列之01——开启第一个Vue.js 3应用

Vue 3系列之01——开启第一个Vue.js 3应用

Vue初尝试—编写一个Hello World

[Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt(