day01 学习vue.js基本代码

最新推荐文章于 2024-10-14 22:24:30 发布

红豆吧

最新推荐文章于 2024-10-14 22:24:30 发布

阅读量130

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/gonghui_hui/article/details/109138993

版权

基本项目框架

在这里插入图片描述

点击下载vue.js

这里选择的是开发版本

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

<!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>