精华内容
下载资源
问答
  • vue双向数据绑定指令v-model v-model,被称为双向数据绑定指令,就是Vue实例对数据进行修改,页面会立即感知,相反页面对数据进行修改,Vue内部也会立即感知。 v-model 是vue中唯一实现双向数据绑定的指令。 v-...

    vue双向数据绑定指令v-model

    v-model,被称为双向数据绑定指令,就是Vue实例对数据进行修改,页面会立即感知,相反页面对数据进行修改,Vue内部也会立即感知。

    v-model 是vue中唯一实现双向数据绑定的指令。

    在这里插入图片描述

    • v-bind(单向)数据绑定,Vue实例修改数据,页面会感知到,相反页面修改数据Vue实例不能感知。
    • v-model(双向)数据绑定,页面修改数据,Vue实例会感知到,Vue实例修改数据,页面也会感知到。

    基本使用

    语法

    <标签 v-model="data成员"></标签>
    

    注意

    1. v-model只针对value属性可以绑定,因此经常用在form表单标签中,例如input(输入框、单选按钮、复选框)/select(下拉列表)/textarea(文本域),相反div、p标签不能用。
    2. v-model只能绑定data成员,不能设置其他表达式,否则错误。
    3. v-model绑定的成员需提前在data中声明好。

    示例代码

     <div id="app">
        <p>{{ city }}</p>
        <p><input type="text" :value="city"></p>
        <p><input type="text" v-model="city"></p>
      </div>
      <script src="./vue.js"></script>
    
      <script>
        var vm = new Vue({
          el:'#app',
          data:{
            city:'北京'
          },
        })
      </script>
    
    • v-model对应的city发生变化后,其他的{{ }} 和 :value的值也会发生变化。

    响应式

    在这里插入图片描述

    v-model数据双向绑定步骤

    1. 页面初始加载,vue实例的data数据渲染给页面的div容器。
    2. 页面通过v-model修改绑定数据,修改的信息会直接反馈给vue内部的data数据。
    3. vue的data数据发生变化,页面上(也包括Vue实例本身)用到该数据的地方会重新编译渲染。
      • 2和3步骤在条件满足情况下会重复执行。

    响应式

    vue实例的data数据如果发生变化,那么页面上(或Vue实例内部其他场合)用到该数据的地方会重新编译执行,这样就把更新后的内容显示出来了,这个过程就是“响应式”,即上面步骤3。

    • 如果Vue实例内部对变化的数据有使用,也会同步更新编译执行。

    注意:响应式是Vue中非常重要的机制。

    v-model简易实现原理

    给input输入框中定义oninput事件,在该事件中把用户输入的信息都给随时获得到,并对data成员进行赋值,

    data成员变化了,页面上用到数据的地方就重新渲染,达成简易双向绑定的效果。

    oninput:是事件,可以随时感知输入框输入的信息。

    具体设置

      <div id="app">
        <h2>v-model简易原理</h2>
        <p>{{city}}</p>
        <p><input type="text" :value="city"></p>
        <hr />
        <!-- 事件@xxx="方法名称/js语句" -->
        <!-- $event:在vue的事件被绑定元素的行内部,代表事件对象 -->
        <p><input type="text" :value="city" @input="city = $event.target.value"></p>
          
        <p><input type="text" :value="city" @input="feel"></p>
      </div>
    
      <script src="./vue.js"></script>
      <script>
        var vm = new Vue({
          el:'#app',
          data:{
            city:'北京'
          },
          methods:{
            feel(evt){
              // console.log(evt)  // InputEvent输入键盘事件对象
              // evt.target: 触发当前事件的元素节点dom对象(类似document.getElementById()的返回结果)
              // console.dir(evt.target)
              // console.log(evt.target.value)  // evt.target.value 获得输入框当前输入的信息
              // 把输入框已经输入的信息赋予给city
              this.city = evt.target.value
            }
          }
        })
      </script>
    

    注意

    1. 事件声明没有小括号(),第一个形参就是 事件对象。
    2. 在元素行内事件驱动中可以直接使用$event,其也是事件对象。
    展开全文
  • 界面通过绑定vue指令对dom进行操作,通过数据与dom的结合,完成渲染。按照vue绑定dom操作,将其分为操作dom内容节点、事件、属性 操作内容节点:v-text、v-html、v-model、v-show、v-if、v-else、v-else-if、v-for...

    界面通过绑定vue指令对dom进行操作,通过数据与dom的结合,完成渲染。按照vue绑定dom操作,将其分为操作dom内容节点、事件、属性

    操作内容节点:v-text、v-html、v-model、v-show、v-if、v-else、v-else-if、v-for、v-pre、v-cloak、v-slot、v-once

    操作事件:v-on

    操作节点属性:v-bind、key、ref、is

    1. 操作内容节点

    • v-text:绑定纯文本,v-text ="name"和 {{ name }}一样
    • v-html:绑定的时一段html代码,html代码会插入绑定位置,scoped 的样式不会应用在 v-html 内部,可定义全局css或为绑定的html写style
    • v-model:  绑定表单元素,如input、textarea等,此方式 可使用修饰符来达到限制作用,如:.lazy(input事件变成change事件失去焦点 或者 按下回车键时才更新)、.number(输入的值转化为Number类型)、.trim(自动过滤掉输入的首尾空格)   v-model.lazy = "val"
    • v-show、v-if:控制dom元素显示或隐藏,v-show通过display:none控制元素的,v-if则是控制元素创建及销毁
    • v-if、v-else、v-else-if:三者配合使用,相当于javascript中的条件判断
    • v-for:遍历循环,优先级比 v-if 高
    • v-pre:不编译此元素,如:{{ this.name }},html显示就是 {{ this.name }}
    • v-cloak:与样式[v-cloak] { display: none; }配合使用,隐藏未编译的标签,如:{{ this.name }}在界面加载中时会出现{{ this.name }},使用v-cloak后则不会出现
    • v-solt:组件html填充,具体查看组件
    • v-once:只渲染元素和组件一次

    2. 操作事件

    • v-on:绑定事件监听器,如绑定点击事件用 v-on:click,等同于@click。绑定多个事件可通过对象方式,如 v-on="{ click: clickFn, mouseover: mouseoverFn }",参数$event为鼠标对象。修饰符有.stop(调用 event.stopPropagation())、.prevent(调用 event.preventDefault())、.capture(先执行父级的函数,再执行子级的触发函数)、.self(触发元素本身时才触发回调)

    3. 操作节点属性

    • v-bind:绑定元素属性,v-bind:class等同于:class,绑定内容方式 :class="{ red: isRed } 、:class="[classA, classB]、:class="[classA, { classB: isB, classC: isC }]
    • key:用于v-for中。key时遍历key-index对象(快),无key时遍历旧Vnode(慢)
    • ref:本页面获取dom元素,如:
      // 本页面获取内容
      <div ref="rDom">你好呀!</div>
      
      this.$refs.rDom会输出<div>你好呀!</div>
      
      
      // 组件中可以获取子组件中的data和去调用子组件中的方法
      <nav ref="navObj"/>
      
      this.$refs.navObj 能访问组件nav中的data,methods
    • is:运用组件,如ul,li标签,li使用组件时会报错,这时候则需要li使用is方式来替换成组件,如下代码。还可以用于tab标签切换,内容更改,使用内容组件
      <ul>
        <my-component></my-component>
        <my-component></my-component>
      </ul>
      替换成
      <ul>
        <li :is='my-component'></li>
      </ul>
      
      
      

     

    展开全文
  • vue 拖拽指令 v拖曳 (v-dragged) ... Vue 2.x指令插件,用于拖动事件检测。 View demo 查看演示 Download Source 下载源 安装 (Install) npm install --save v-dragged import Vue from 'vue'...

    vue 拖拽指令

    v拖曳 (v-dragged)

    Vue 2.x directive plugin for drag event detection.

    Vue 2.x指令插件,用于拖动事件检测。

    安装 (Install)

    npm install --save v-dragged
    import Vue from 'vue'
    import VDragged from 'v-dragged'
    
    Vue.use(VDragged)

    (Example)

    <div v-dragged="onDragged"></div>
    {
      // ...other options omitted
    
      methods: {
        onDragged({ el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last }) {
          if (first) {
            this.dragged = true
            return
          }
          if (last) {
            this.dragged = false
            return
          }
          var l = +window.getComputedStyle(el)['left'].slice(0, -2) || 0
          var t = +window.getComputedStyle(el)['top'].slice(0, -2) || 0
          el.style.left = l + deltaX + 'px'
          el.style.top = t + deltaY + 'px'
        }
      }
    }

    活动详情 (Event Details)

    The argument passed to the callback function is an object containing the following properties:

    传递给回调函数的参数是一个包含以下属性的对象:

    埃尔 (el)

    • The target element on which the diretive binds.

      定向绑定的目标元素。

    • type: HTMLElement

      类型:HTMLElement

    第一 (first)

    • A boolean to indicate whether it is the first move of the drag. (drag starts here).

      一个布尔值,指示它是否为拖动的第一步。 (从此处开始拖动)。

    • type: Boolean

      类型:布尔型

    持续 (last)

    • A boolean to indicate whether it is the last move of the drag. (drag ends here).

      一个布尔值,指示是否为拖动的最后一步。 (拖动到此结束)。

    • type: Boolean

      类型:布尔型

    三角洲 (deltaX)

    • The change of the pointer (mouse/touch)'s x coordination from the last position. undefined when first or last is true.

      指针(鼠标/触摸)的x坐标从最后一个位置开始的变化。 当firstlasttrueundefined

    • type: Number

      类型:数字

    三角洲 (deltaY)

    • The change of the pointer (mouse/touch)'s y coordination from the last position. undefined when first or last is true.

      指针(鼠标/触摸)的y坐标从最后一个位置开始的变化。 当firstlasttrueundefined

    • type: Number

      类型:数字

    偏移量 (offsetX)

    • The change of the pointer (mouse/touch)'s x coordination from the starting position. undefined when first or last is true.

      指针(鼠标/触摸)的x坐标从起始位置开始的变化 。 当firstlasttrueundefined

    • type: Number

      类型:数字

    偏移量 (offsetY)

    • The change of the pointer (mouse/touch)'s y coordination from the starting position. undefined when first or last is true.

      指针(鼠标/触摸)的y坐标从起始位置开始的变化 。 当firstlasttrueundefined

    • type: Number

      类型:数字

    客户X (clientX)

    • Current x coordination of the pointer (mouse/touch).

      指针的当前x坐标(鼠标/触摸)。

    • type: Number

      类型:数字

    客户 (clientY)

    • Current y coordination of the pointer (mouse/touch).

      指针的当前y坐标(鼠标/触摸)。

    • type: Number

      类型:数字

    修饰符 (Modifier)

    防止 (prevent)

    • prevent default on pointer events (touchstart, touchmove, touchend, mousedown, mousemove, mouseup).

      防止默认发生指针事件(touchstart,touchmove,touchend,mousedown,mousemove,mouseup)。

    <div v-dragged.prevent="onDragged"></div>

    翻译自: https://vuejsexamples.com/vue-directive-plugin-for-drag-event-detection/

    vue 拖拽指令

    展开全文
  • 用于事件绑定,v-on:事件名=“函数名(形参)”,可以简写成@事件名=“函数名(形参)” 例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    v-on指令

    用于事件绑定,v-on:事件名=“函数名(形参)”,可以简写成@事件名=“函数名(形参)”

    例子:

    <!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>
    </head>
    <body>
        <id id="app">
    
            <input type="text" v-model="message" placeholder="输入....">
            <p>输入的内容:{{message}}</p><br>
            <input type="button" value="haha" v-on:click="hell">
            <input type="button" value="hehe" @click="hell">
            
    
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                message: "java"
            },
            methods:{
                hell:function(event){   
                    // event表示调用方法的对象,event.target.value表示获取调用这个方法对象的value值。
                    alert(event.target.value);
                }
            }
        })
    </script>
    </html>
    
    展开全文
  • Vue.jsVue基本指令Vue事件修饰符Vue绑定样式通过属性绑定设置class类样式通过属性绑定设置style行内样式 Vue基本指令 v-cloak : 解决插值表达式...v-bind:Vue提供用于绑定属性的指令,V-bind:要绑定的属性,也可...
  • vue中关于checkbox数据绑定v-model指令的个人理解

    万次阅读 多人点赞 2018-06-07 15:16:45
    vue.js未开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见,下面是最常见的例子:&lt;div id='myApp'&gt;&lt;input type="text" v-model="msg"&gt;&lt;br...
  • 原文链接:https://www.runoob.com/vue2/vue-template-syntax.html 1、demo代码 <!DOCTYPE html> <html> <head>...Vue 双向数据绑定指令v-model测试实例(runoob.com)</tit...
  • v-on 指令用来 监听 DOM 事件 <button v-on:click="say">Say</button> 方法及内联语句处理器 使用methodsz的方法作为事件的处理器, v-on:后的参数接受所有的原生事件名称 <button v-on:click=...
  • vue指令事件绑定

    2018-07-19 16:54:00
    类似Java语法的maven,gradle,python的pip。 去nodejs官网下载nodejs傻瓜式安装即可,默认会安装npm。但是这个npm可能不是最新的,更新:npm install npm@latest -g 使用步骤: 初始化:npm init 安装包:npm ...
  • Vue如何绑定事件

    千次阅读 2020-07-27 16:40:35
    指令 v-on 用于监听 DOM 事件,并在触发时运行一些 JavaScript 代码,简写为 @ ,其事件类型由参数决定,与 v-bind 指令相同,冒号后面是参数,举个栗子如下 <div id="app"> <button v-on:click='count+...
  • Vue 基础知识点: Vue的基本使用步骤 1、需要提供Vue.js库文件 2、需要标签用来填充数据——id选择器 3、new vue( {} ) 4、把Vue提供的数据填充到标签里面——{{xxx}} 实例化Vue时必须要加的属性: var 变量名 ...
  • vue.js组件数据绑定 v热键 (v-hotkey) ... Vue 2.x指令用于将热键绑定到组件。 View demo 查看演示 Download Source 下载源 安装 (Install) $ npm i --save v-hotkey 用法 (Usage) import...
  • vue数据绑定指令

    2020-06-30 19:52:03
    指令 1.什么是指令 本质就是自定义属性(data-xxx) ...2、在插值表达式所在的标签添加v-cloak指令 v-cloak背后的原理:先通过样式隐藏内容,然后在内存进行值的替换,替换好之后再显示最终的结果 <
  • Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定)Vue 的介绍Vue 是一套构建用户界面的渐进式前端框架。只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。通过尽可能...
  • 主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见,下面就来详细的介绍一下
  • Vue 数据绑定指令

    2020-05-16 16:32:41
    v-cloak:目的就是防止闪动,Vue加入了延缓响应的指令v-cloak,在与css:[v-cloak] { display: none } 的配合下,可以隐藏未编译 Mustache 的标签直到实例准备完毕,v-cloak属性才会被自动去除,对应的标签也才可见了...
  • v-on用于绑定一个或多个事件事件函数的参数名代表了在方法对象methods定义的函数。 语法;v-on:事件名=”方法名” 简写:@ 事件名=”方法名” <div id="app"> <button v-on:click="method">按钮&...
  • Vue事件绑定原理

    千次阅读 2020-09-07 21:03:00
    Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点或者组件时候使用addEventListener方法进行事件绑定。...
  • 使用npm方式创建一个vue项目 开发工具:Visual Studio Code 手动创建package.json 创建一个文件夹,用来放这个项目,在该文件夹创建一个index.html文件 有终端的跳过该步骤 点击插件,搜索terminal,点击install...
  • 标题vue常用指令与动态绑定class样式 单选效果与多选效果 v-model:双向数据绑定一般用于表单元素 在这里插入图片描述 v-for:对数组和对象进行循环操作。 v-on:进行事件绑定,v-on:事件名 = ‘事件函数’。...
  • Vue事件绑定

    2020-04-20 17:06:12
    1.在原生js,我们有三种方式为一个属性绑定事件,分别为: 在HTML标签上添加事件属性 在js使用html节点的事件属性绑定事件处理程序,例如node.onclick=function(){} 在js使用addEventListener("click",...
  • 三.Vue-事件绑定

    2020-07-03 00:26:39
    1.vue如何处理事件: v-on指令用法 <div> <button type="button" v-on:click="num++">点击</button> </div> <div v-text="num"></div> data: { num:0
  • Vue指令和样式绑定

    2021-03-19 16:14:02
    VUE指令和样式绑定前言指令v-if 、v-show和:is指令参数静态参数动态参数指令修饰符灵感来源新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个...
  • 概述01 - Vue基本模板02 - 数据单向绑定03 - Vue数据双向绑定04 - 常用指令v-once05 - 常用指令v-cloak06 - 常用指令v-text 和 v-html07 - 常用指令v-if v-else-if v-else08 - 常用指令v-show09 - 常用指令v-for10 -...
  • 文章目录什么是 Vue框架和库的区别MVC 与 MVVM 的图解关系第一个 Vue 程序el...`v-bind` 指令Vue 的 `v-for` 指令Vue 的 `v-model` 指令事件修饰符(stop、prevent、capture、self、once)Vue 指令之 `v-for` 和 `key
  • Vue 2.x指令用于将热键绑定到组件。 和我一起玩 安装 $ npm i v-hotkey # or $ yarn add v-hotkey 用法 import Vue from 'vue' import VueHotkey from 'v-hotkey' Vue . use ( VueHotkey ) ...
  • 文章目录Vue 是什么指令v-cloakv-textv-htmlv-prev-once双向数据绑定v-modelmvvmv-onv-on事件函数传入参数事件修饰符按键修饰符自定义按键修饰符别名v-bind绑定对象绑定class绑定对象和绑定数组 的区别绑定style...
  • v-bind用于绑定数据和元素属性 语法糖简化为 : 等价于 v-bind: 可以绑定 href/class/style/src等多种属性 <template> <div class="hello"> <h1>{{ msg }}</h1> <ul> <li ...
  • 数据绑定Vue案例 ** 该案例展示了Vue.js最核心的功能:数据的双向绑定** <div class="app"> <input type="text" placdholder="请输入你的姓名"> <h1>"你好" {{name}} </h1> </div&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,356
精华内容 6,942
关键字:

vue中用于绑定事件的指令

vue 订阅