vue入门示例

最新推荐文章于 2020-05-24 23:55:33 发布

justry_deng

最新推荐文章于 2020-05-24 23:55:33 发布

阅读量474

点赞数

文章标签： Vue.js入门 Vue.js入门示例 Vue.js入门程序入门vue vue

本文链接：https://blog.csdn.net/justry_deng/article/details/102466349

版权

Vue2.x 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

声明一：本人为纯后端开发，因为一些非工作上的需要，本人必须得学一下前端Vue.js，此文章属于前端入门级。
声明二：本文主要学习并整理自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，讲师汤小洋，跳转链接见文末。

第一个vue程序(入门示例)：

提示： vue入门非常简单，这里就不使用文字进行说明了，直接看html代码示例即可明白。

html内容为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>哈喽~</title>
    <script src="../js/vue.js"></script>
    <script>
        window.onload = function () {
            // 允许chrome的扩展程序【vue-devtools】进行调试
            // 建议: 开发时，设置为true; 生产时, 设置为false
            Vue.config.devtools = true
            new Vue(
                {
                    // 指定关联的element
                    el: '#myId',
                    // 存储数据(以json的形式)
                    data: {
                        msg: 'Helle World~'
                    }
                }
            );
        }
    </script>
</head>

<body>
    <div id="myId">
        <!-- 通过模板，动态显示值 -->
        {{msg}}
    </div>

</body>

</html>

使用chrome打开：

注：chrome有一个名为vue-devtools的扩展程序，对vue的调试提供了极大的便利，建议安装(上图就是本人安装了该扩展程序后的调试界面的截图)。

^_^ 如有不当之处，欢迎指正

^_^ 学习整理自
51CTO课程《Vue.js 2.0之全家桶系列视频课程》讲师汤小洋

^_^ 参考链接
Vue.js中文官网

^_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng

justry_deng

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue入门示例

声明一：本人为纯后端开发，因为一些非工作上的需要，本人必须得学一下前端Vue.js，此文章属于前端入门级。声明二：本文主要学习并整理自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，讲师汤小洋，跳转链接见文末。第一个vue程序(入门示例)：提示： vue入门非常简单，这里就不使用文字进行说明了，直接看html代码示例即可明白。html内容为：<!DOCTYPE h...
复制链接

扫一扫