Vue——02——Vue基本代码

最新推荐文章于 2024-08-19 13:55:31 发布

野生小米椒

最新推荐文章于 2024-08-19 13:55:31 发布

阅读量226

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/x1037490413/article/details/106410338

版权

VUE框架专栏收录该内容

33 篇文章 0 订阅

订阅专栏

文章目录

一：如何写Vue代码

一：如何写Vue代码

1.在官网下载Vue.js
2.引入vue.js

el是定控制的区域,data是个对象,指定了控制的区域内要用到的数据,methods虽然带个s后缀但是是个对象,这里可以自定义方法

在VM实例中,如果要访问data上的数据,或者要访问methods上的数据,必须带this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <!-- 将来new的Vue实例，会控制这个元素中的所有内容　就是我们的Ｖ -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        //创建一个Vue实例
        //当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
        //vm对象，就是我们MVVM中的vm调度者
      var vm=new Vue({
          el:'#app',//elment表示当前我们new的这个Vue实例,要控制页面上的哪个区域
          //这里的data就是MVVM中的M，专门用来保存每个页面的数据
          //mvvm中的m，用来保存页面数据
          data:{//data属性中，存放的是el中要用到的数据
          msg:'欢迎学习vue'//通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不需要手动的操作DOM元素了【前端的Vue之类的框架，不提倡我们手动操作DOM元素】
          }
      })
      
    </script>
</body>
</html>