day01 学习vue.js基本代码

124 阅读 0 评论 82 点赞

我是靠谱客的博主落寞网络，这篇文章主要介绍day01 学习vue.js基本代码，现在分享给大家，希望可以做个参考。

基本项目框架

在这里插入图片描述

点击下载vue.js

这里选择的是开发版本

在这里插入图片描述
搭建好了基本框架开始构建vue.js的基本代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>Document</title>
    <!-- 1.导入vue.js的包-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!--将new来的Vue实例,会控制这个元素中的所有内容 -->
    <div id="app" >
        <p style="margin:20opx 200px">{{ msg }}</p>
    </div>

<script>

    var vm = new Vue({
        el: '#app',//表示,当前我们的new的这Vue实例,要控制页面上的那个区域
        data: { //data属性中,存放的是el中要使用的数据
            msg:'欢迎学习vue'   //通过Vue提供的指令,很方便的就可以把数据渲染到页面上去,程序员不在动手操作DCM元素了
            
        }
    })
</script>
</body>
</html>