vue学习（二）之什么是前端页面的M,V，VM

最新推荐文章于 2024-07-09 08:45:50 发布

LH-sw

最新推荐文章于 2024-07-09 08:45:50 发布

阅读量720

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/weixin_41827712/article/details/117635633

版权

一、通过实例具体了解了一下什么是前端页面的M V VM
学了一个插值表达式

{{}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
   
    <!-- <script src="/lib/vue2.5.17.js"></script> -->
    <!-- Vue实例所控制的这个元素区域，就是我们的V -->
    <div id="app">       
        <p>{{msg}}</p >   <!--此处是插值表达式-->
        <p>{{text1}}</p >
    </div>
<script>
    // 注意：我们new出来的这个VM对象，就是我们MVVM的VM调度者
          var vm = new Vue({
              el: '#app',//表示，当前我们new的这个实例，要控制页面上的那个区域
             //data属性中的数据就是M
             data: {    //data属性中，存放的是el中要用到的数据
                msg: '欢迎学习Vue',  //通过Vue提供的指令，很方便的把数据渲染到页面上，程序员不用再手动操作了
                
                text1: '测试数据'
              }
          })
    
</script>


</body>
</html>

LH-sw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习（二）之什么是前端页面的M,V，VM

一、通过实例具体了解了一下什么是前端页面的M V VM学了一个插值表达式{{}}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
复制链接

扫一扫