首页 > 其他分享 >VUE框架MVVM架构思想解析与实现封装dom对象------VUE框架

VUE框架MVVM架构思想解析与实现封装dom对象------VUE框架

时间:2024-01-20 17:01:43浏览次数:31  
标签:el VUE 框架 MVVM app 指令 msg model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 区别如下:v-bind是单向数据绑定,数据变化了,视图变化,视图变化了,数据不变 -->
        v-bind指令:<input type="text" v-bind:value="name1">
        <!-- v-model是双向绑定,只要有一方,无论是视图还是数据变化,都会使得对方发生改变 -->
        v-model指令:<input type="text" v-model:value="name2">
        <br>
        <!-- 两者都可以完成数据绑定 -->
        <!-- v-model只能用在表单内的标签上,如input,textarea,select标签等 -->
        <!-- 为什么会有这样的限制 -->
        <!-- 这样会报错 -->
        <!-- <a v-model:href="link">百度</a> -->
        <!-- 因为表单类的元素才能给用户提供可交互的界面,所以只支持v-model -->
        <!-- 如,我们常见的点击按下选择变化等,dom编程就是依赖这些实现的事件捕获 -->
        <!-- 因此,我们的v-model也就只支持表单类的标签 -->
        <!-- v-model通常是用在value属性上的 -->
        <!-- v-bind的简写形式是:,v-model的简写形式是v-model:表达式 -->
        v-bind指令:<input type="text" :value="name1">
        v-model指令:<input type="text" v-model="name2">
        <br>
        消息1:<input type="text" :value="msg">
        消息2:<input type="text" v-model="msg">
    </div>
    <script>
        new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                name1 : "Jack",
                name2 : "Rose",
                link : "https://www.baidu.com"
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 这就是view -->
        <!-- view指的是容器 -->
        <input type="text" v-model="name">
    </div>
    <!-- MVVM是什么?一种编程思想,类似于我们此前学习的MVC架构模式 -->
    <!-- V(视图View),M(Model模型/数据),VM(ViewModel视图模型):VM是MVVM的核心部分 -->
    <!-- 他起到核心的作用 -->
    <!-- 目前主流的前端框架都实现了这个MVVM思想,如Vue或React等 -->
    <!-- MVVM当中提倡Model和View进行了分离 -->
    <!-- 假如我们的Model和View不分离,使用最原生的JS代码编写 -->
    <!-- 如果数据出现任意改动,都需要大量的JS代码去操作我们的DOM元素 -->
    <!-- 当model发生改变之后,VM就会自动更新view,我们再也不需要手动去更新操作dom的js代码 -->
 
    <script>
        // 这个就是vm
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello World",
                // 这就是我们的model
                name : "ZhangSan"
            }
        });
        
    </script>
</body>
</html>

标签:el,VUE,框架,MVVM,app,指令,msg,model
From: https://blog.51cto.com/u_16322355/9345850

相关文章

  • PHP学习第七天:框架开发与自动化工具
    在PHP学习的第七天,我深入了解了框架开发和自动化工具的使用。早上,我学习了如何使用PHP框架来加速Web应用程序的开发。PHP框架提供了一套预先构建的组件和工具,可以简化开发过程并提高应用程序的可靠性。我学习了Laravel和Symfony这两个流行的PHP框架,并了解了它们的核心概念和特性。......
  • vue3
    Vue31新建项目1.1vue-cli创建vue-V查看vue版本,必须高于4.5.0启动测试cdvue3_testnpmrunserve运行成功1.2vite创建命令1.3分析工程结构main.js//引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数import{createApp}from'vue'......
  • hyperexpress框架/使用uwebsockets.js核心
    import{scheduleJob}from'node-schedule';//定时任务functionsetupScheduledTasks(){//每6秒执行一次setInterval(()=>{taskEverySixSeconds();},6000);//每33分钟执行一次setInterval(()=>{taskEve......
  • 基于flask框架的python作为微信小程序后端的实现方法(个人版)
    Flask基础语法引入Flask类fromflaskimportFlask创建一个app,也就是Flask类的一个对象app=Flask(__name__)接下来写每个路径对应的函数如@app.route('/')deftest()#这里函数可以任意命名,这个函数会在访问括号里路径的时候被调用 return"helloworld"这三行代码......
  • jax框架:jax.grad
    官方地址:https://jax.readthedocs.io/en/latest/_autosummary/jax.grad.html#jax.grad这里只给出几个样例代码:设置allow_int参数,实现对整数类型求导:未对整数类型求导:importjaxdeffun(x,y):print(x,y)returnjax.numpy.sum(2*x[0]+y[0]+2*x[1]+......
  • uWebSockets.js 框架经验
    目录结构project/│├──src/│├──app.ts│├──routes/││├──userRoutes.ts││└──index.ts│├──entities/││└──User.ts│├──utils/││└──parseQuery......
  • 在vue2中使用leaflet.AnimatedMarker来移动某个目标
    需求是:点击某个按钮后让扫描仪沿着某条线移动进行扫描效果:  扫描仪是沿着河流移动的,河流的生成方式通过geojson数据生成,geojson里包含了河流的一些点位的经纬度,扫描仪根据经纬度来移动leaflet:1.9.4 leaflet.AnimatedMarker:1.0.0 1.引入 importLfrom'leaf......
  • 使用pnpm来管理vue项目的node_modules
    要使用pnpm,先确保nodejs版本在16以上(目前用的18.16.1)(确保本地已经全局安装了pnpm如果没有安装就使用npmi-gpnpm来全局安装)一.老项目从npm迁移到pnpm  先删掉项目中的node_modules文件夹和package-lock.json文件   在终端运行pnpmi 安装成功后根目录下会多一......
  • vue选择性显示表格列
    实现结果:打印的时候想要选择打印哪些列,可以添加一个选择列功能,选择的列就展示,不选择的不展示实现过程只需要在列上加个显示标识属性show,为true表示显示,为false表示不显示表格组件绑定列时过滤出show为true的同时循环表格列,绑定到多选框上,这样多选框不勾选列时,表格中该列就......
  • 使用Nuxt框架刷新页面向后端接口请求两次的问题
    背景:当我刷新页面时,发现后端接口被请求了两次前端使用框架:nuxt、vue、axios等后端使用框架:springboot、maven、redis、mybatisplus等主页面程序代码<script>importhomePagefrom'@/api/homePage'exportdefault{data(){return{bannerList:[],//轮播......