美文网首页Vue.js前端Vue专辑
MAC上学习Vue---Day1. 创建Hello World

MAC上学习Vue---Day1. 创建Hello World

作者: RaRasa | 来源:发表于2019-07-17 20:24 被阅读6次

下载Vue.js

Vue.js开发版本地址为:

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

安装VS Code

VS Code下载地址为:

https://code.visualstudio.com/download


创建第一个实例---Hello World

1. 打开Visual Studio Code.exe,新建一个文件,命名为:test1.html

2. 输入半角符号“!”,并单击键盘上的“tab”按钮,会补全html的基础代码,如下图:

3. 将Vue.js文件复制到test1.html同级目录下,并在test1.html的<body>标签中,添加如下代码:

<body>

    <div id='app'>

        <p>{{ msg }}</p>

    </div>

    <script src='vue.js'></script>

    <script>

        var app=new Vue({

            el:'#app',

            data:{

                msg:'Hello, World!'

            }

        });

    </script>

</body>

4. 双击运行test1.html,可见如下结果:

相关文章

  • MAC上学习Vue---Day1. 创建Hello World

    下载Vue.js Vue.js开发版本地址为: https://vuejs.org/js/vue.js 安装VS ...

  • 字符串

    字符串的创建 var str = 'hello world'var str = "hello world"通过构造...

  • 字符串

    字符串的创建 var str = 'hello world'var str = "hello world"通过构造...

  • GO笔记

    创建字符串 var str = "Hello world!" str := "Hello world!" 字符串长...

  • 无标题文章

    Swift 学习简记 1 打印 "hello,world!" 如果我们想创建 iOS playground 则需要...

  • Go语言基础篇(1) —— 编写第一个Go程序

    创建文件hello_world.go 运行指令: go run hello_world.go 编译指令: go ...

  • C语言-第一天

    环境:macOS,内置终端创建hello_world文件:vim hello_world.c代码: 点击esc后,...

  • 终端字形logo生成工具

    mac :安装 brew install figlet使用 figlet "hello world" https:...

  • Hello,World

    Hello, World "Hello, world"程序是指在计算机屏幕上输出"Hello,world"这行字符...

  • K8s | Pod 基本操作

    1.定义创建pod 还是不厌其烦的来个来个世界通用Hello World,,创建一个简单的Hello World ...

网友评论

    本文标题:MAC上学习Vue---Day1. 创建Hello World

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