web前端框架之Vue hello world

【博客园cnblogs笔者m-yb原创，转载请加本文博客链接，笔者github: https://github.com/mayangbo666，公众号aandb7，QQ群927113708】

https://www.cnblogs.com/m-yb/p/10162346.html

Vue.js是web前端当下最火的框架之一, 作者是中国人尤雨溪(Evan You),

官网地址:https://cn.vuejs.org

Vue的官网是学习Vue的较好途径之一,

今天笔者写了一个Vue的hello world 分享给大家:

笔者这里用sublime的代码文本编辑工具,

首先创建一个testVue.html文件,

用sublime编辑,

键入<html>

sublime会补全html的一些基本要素:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

首先在body内部下方,引入官网推荐的Vue.js框架需要的CDN依赖, 选一个即可:

下面先贴上完整代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    
    <div id="he">
        <p>{{ message }}</p>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script type="text/javascript">
        new Vue({
            el: '#he',
            data: {
                message: 'hello, Vue~'
            }
        })
    </script>
</body>
</html>

下面分步讲解:

先写一个div容器,id为he,

容器里面在p标签里放入变量名, 并用{{}}包起来,

在下面script标签里new一个Vue对象,

对象里写的形式类似json,

            el: '#he',
            data: {
                message: 'hello, Vue~'
            }
　　　　　　}
　　
写完之后用浏览器打开html文件,就可以看到
hello, Vue~了

讲解完毕~

web前端框架之Vue hello world

猜你喜欢