vue入门示例

客官°小女子只卖身不卖艺 2023-06-06 03:36 9阅读 0赞

**声明一****：** 本人为纯后端开发，`因为一些非工作上的需要，本人必须得学一下前端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打开：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center] ##

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

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

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

**^\_^ 参考链接  
        [Vue.js中文官网][Vue.js]**

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center]: /images/20230601/529328209c9243dab54b80d8c8bf5839.png
[51CTO_Vue.js 2.0_]: https://edu.51cto.com/course/10543.html
[Vue.js]: https://cn.vuejs.org/