前端框架入门之Vue _el和data的两种写法分析MVVM模型

朱道阳

于 2024-07-16 17:34:03 发布

阅读量264

点赞数 6

分类专栏： web前端开发 # Vue 文章标签： vue.js 前端框架 javascript

本文链接：https://blog.csdn.net/qq_30500575/article/details/140472339

版权

web前端开发同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

_el与data的两种写法

MVVM模型

_el与data的两种写法

查看vue的实例对象

我们在这边注释掉了el属性

这样的话div容器就绑定不了vue实例

当我们可以在这里写一个定时任务

然后再回头指定

这个mount有挂载的意思

就是把容器对象交给vue实例后

去给他挂载指定的对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">

    <h1>你好 {{name}}</h1>

  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    const v= new Vue({
      // el:'#root',
      data:{
        name:'尚硅谷'
      }
    }) 

    console.log(v);
    setTimeout(() =>{
      v.$mount('#root')
    },5000)


  </script>

</body>

</html>

data的写法

对象式

函数式

  //创建 Vue 实例 
    new Vue({
      el:'#root',
      // 对象式
      data:{
        name:'尚硅谷'
      },
      // 函数式
      data:function(){
        return {
          name :'尚硅谷'
        }
      }
    })

箭头函数不使用this的标准绑定规则，而是根据外层作用域来决定this

比如说window

我们选择的是标准的函数function

总结

一般上

我们data用函数式书写

MVVM模型

架构模型

Vue的开发在一定程度上参考的是MVVM模型

分析

我们通过Dom监听

返回给js模型

数据是存在模型里的

Vue把找到数据通过数据绑定来返回到View视图层上

把数据放到指定位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>

  <!-- 引入 vue -->
  <script type="text/javascript" src="./js/vue.js"></script>
  
</head>

<body>

  <div id="root">

    <h1>学校名称 {{name}}</h1>
    <h1>学校地址 {{address}}</h1>

  </div>

  <script type="text/javascript">
    
    //阻止 Vue 在启动时生成生产提示
    Vue.config.productionTip=false;

    //创建 Vue 实例 
    new Vue({
      el:'#root',
      data:function(){
        return {
          name :'北华大学',
          address:'吉林省吉林市'
        }
      }
    })


  </script>

</body>

</html>

分析

就是把一堆乱七八糟的数据

和dom操作做了一个桥梁

连接

就是在前端操作的时候先写出数据

再写出模版代码

用框架的插值语法把数据写到代码里面去

我们发现vue实例

里面有全部的数据

所有vue实例里面的属性我们全部能看见

我们尝试拿一下数据

小结

个人号推广

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端框架入门之Vue _el和data的两种写法分析MVVM模型

_el与data的两种写法查看vue的实例对象我们在这边注释掉了el属性这样的话div容器就绑定不了vue实例当我们可以在这里写一个定时任务然后再回头指定这个mount有挂载的意思就是把容器对象交给vue实例后去给他挂载指定的对象
复制链接

扫一扫