美文网首页Vue.js 系列
Vue.js - Hello World

Vue.js - Hello World

作者: 并亲了你一下嘀嗒嘀 | 来源:发表于2018-07-19 20:46 被阅读0次

    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

        本文链接:https://www.haomeiwen.com/subject/krrxmftx.html