首页 > 其他分享 >Vue模板语法——v-model 双向数据绑定

Vue模板语法——v-model 双向数据绑定

时间:2024-01-28 12:13:28浏览次数:17  
标签:Vue 绑定 视图 HTML 双向 model 数据 模板

双向数据绑定

  1. 单向数据绑定是什么?

    数据模型(Module)和视图(View)之间的单向绑定。

    需要我们先写好模板,然后把模板和数据(可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。 简单的来说就是DOM操作html元素。

    单向数据绑定的缺点:一旦HTML代码生成好后,就没有办法再进行改变了,如果有新的数据出现,那就必须要先把之前的HTML代码删掉,然后重新把新的数据和模板一起整合形成新的HTML代码,再插入到文档流中。

  2. 双向数据绑定是什么?

    数据模型和视图之间的双向绑定。

    当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化;可以这样说用户在视图上的修改会自动同步到数据模型中去,数据模型也是同样的变化。

    双向数据绑定的优点:无需和单向数据绑定那样进行CRUD(Create,Retrieve,Update,Delete)操作,双向数据绑定最常应用在就表单上,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户输入好的数据,并放到数据模型中了。

  3. 原生js实现简单的双向数据绑定

    <input type="text" id="userName">
    
    <span id ="uName"></span>
    
    <script>
    
        var obj={
    
            pwd:"1234"
    
        };
    
        //主要使用到了get和set方法,最为关键
    
        Object.defineProperty(obj,"userName",{
    
            get:function(){
    
                console.log('get init');
    
            },
    
            set:function(val){
    
                console.log("set init");
    
                document.getElementById("uName").innerText=val;
    
                document.getElementById("userNmae").value=val;
    
            }
    
        });
    
            document.getElementById("userName").addEventListener("keyup",function(event){
    
            obj.userName=event.target.value;
    
        })
    
    </script>
    
    
  4. v-model

    实现双向数据绑定

二、v-model双向数据绑定

  1. v-model用法

    在需双向数据绑定的标签中添加v-model指令

  2. 例子

    <div id="app">
        <div>
            {{msg}}
        </div>
        <input type="text" v-model="msg"/>
    </div>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                msg:'HelloWorld'
            }
        })
    </script> 

三、MVVM设计思想————分而治之

  • M(Model)——————数据————Javascript对象
  • V(View)———————视图————HTML的DOM
  • VM(View-Model)———通讯————观察者、核心、桥梁

标签:Vue,绑定,视图,HTML,双向,model,数据,模板
From: https://www.cnblogs.com/luluping/p/17992690

相关文章

  • Vue模板语法——v-on 事件绑定
    一、v-on事件绑定v-on指令用于绑定事件v-on用法转=>最底层的技术渣--Vue基础语法之v-on转=>一瓶怡宝矿泉水--v-on指令直接绑定事件:注意:绑定的事件是对应的方法不是定义在data里面,而是定义在vue实例的methods里绑定的函数可直接绑定函数名——fun,也可以直接调用......
  • Vue模板语法——键盘事件修饰符
    一、键盘修饰符在JavaScript事件中除了前面所说的事件,还有键盘事件,也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难,所以Vue为最常用的键盘事件提供了别名:enter:回车键tab:制表键delete:含delete和backspace键esc:返回键......
  • Vue模板语法——事件修饰符
    一、事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event,把它传入到methods中的方法中。在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有:......
  • 创建Vue项目,报错spawn yarn ENOENT
    1.使用vue创建项目的时候,报错Error:spawnyarnENOENT1.1用户自己设置了默认的包管理yarn1.2没有安装yarn解决方式1:打开C盘,在C盘里,打开users(用户名)的文件夹,然后在右侧搜索名为.vuerc的文件修改.vuerc文件解决方式2:没有安装yarn,那么直接输入命令npmin......
  • Vue模板语法——v-cloak
    一、什么是指令指令的本质就是自定义属性指令的格式:以v-开始,比如:v-cloak二、v-cloak指令用法插值表达式存在的问题:“闪动”如何解决该问题:使用v-cloak指令解决该问题原理:先隐藏,替换好值后再显示最终的值三、v-cloak指令的用法提供样式[v-cloak]{display:......
  • vue响应性原理
     核心实现类Observer:它的作用是给对象的属性添加getter和setter,用于依赖收集和派发更新Dep:用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个Dep实例(里面subs是Watcher实例数组),当数据有变更时,会通过dep.notify()通知各个watcher。W......
  • 前端VUE
    1、   export和exportdefault的区别exportdefaultxxximportxxxfrom'./'exportxxximport{xxx}from'./'在一个文件或模块中,export、import可以有多个,exportdefault仅有一个通过export方式导出,在导入时要加{},exportdefault则不需要 2、    vuenextt......
  • Vue 之 Mixins (混入)
    Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。什么时候使用Mixins 1.页面的风格不用,但是执行的方法和需要的数据类似,我们是选择每个都写呢还是提取出公共部分呢? 基础实例我们有一对不同的组件,它们的作用是切换一个状态布尔值,一个模态框和一个提示框。这些......
  • vue 中slot
    插槽使用场景 -该组件被多个地方使用-每个父组件中对该组件的内部有一部分需要特殊定制-slot可以让我们更好的复用组件的同时并对其定制化处理-可以理解为父组件想子组件传递了一段html文本要求:1.子组件模板包含至少一个插槽<slot></slot>2.父组件整个......
  • Vue 数据相关实例方法vm.$watch、vm.$set、vm.$delete介绍
    vm.$watch观察vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。//写法一:this.$watch('a.b.c',function(newVal,oldVal){})//键路径vm.$watch(function(){this.fullName=this.......