Vue中的绑定指令

最新推荐文章于 2024-04-21 18:51:25 发布
最新推荐文章于 2024-04-21 18:51:25 发布
阅读量248 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kalath_aiur/article/details/103981313
版权 
<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .page{
               background-color:  palegoldenrod;
           }
           .title{
               color: palevioletred;
           }
           .outer{
               width: 400px;
               height: 400px;
               background-color:  palegoldenrod;
           }
           .inner{
               width: 200px;
               height: 200px;
               background-color:  palevioletred;
           }
       </style>
       <script type="text/javascript"  src="../js/vue.js" ></script>
    </head>
    <body>
       <div id="box">
           <!--v-model双向绑定，这种方式在表单控件上较常见
           -->
           <p><input type="text"  v-model="model_message"></p>
           <p>{{model_message}}</p>
           
           
           <!--使用v-pre可以跳过预编译，保留标签的内容格式-->
           <p v-pre>{{content}}</p>
           
           <!--绑定事件可以使用对应的方法
           -->
           <button @click="btn_click">按钮1</button>
           <!--使用v-on可以绑定事件-->
           <button v-on:click="btn_click">按钮2</button>
           <!--
               常用的修饰符有：
                  1）.stop 阻止冒泡事件传递
                  2）.left 只有鼠标左键可以触发
                  3）.right 只有鼠标右键可以触发
                  4）.middle 只有鼠标滚轮可以触发
           -->
           <div class="outer"  @click.middle="outer_click">
               <div class="inner"  @click.stop="inner_click"></div>
           </div>
           
           <!--键盘事件绑定
               常用的修饰符有
                 1）.enter   只有按下回车键的时候触发
                 2）.tab     只有按下Tab键的时候触发
                 3）.delete    只有按下删除键的时候触发
                 4）.space    只有按下空格键的时候触发
                 5）.up     只有按上的时候触发
                 6）.down    只有按下的时候触发
                 7）.left    只有按左的时候触发
                 8）.right    只有按右的时候触发
           -->
           <input type="text"  @keydown.enter="key_down"   v-model="key_message"/>
           <p>{{key_message}}</p>
       </div>
    </body>
    
    <script>
       var data_obj={
           content:"123456",
           html_con:"<b>kalath</b>",
           single:"unchange",
           isshow:false,
           img_pic:"../img/pic15.jpg",
           classname:"page",
           classname1:"title",
           page_cls:true,
           title_cls:true,
           model_message:"",
           key_message:""
        }
       
       var methods = {
               btn_click:function(){
                  console.log("clicked")
               },
               outer_click:function(){
                  console.log("外层元素事件触发")
               },
               inner_click:function(){
                  console.log("内层元素事件触发")
               },
               key_down:function(e){
                  console.log(e.key)
                  this.key_message += e.key
               }
       }
       
       var vue = new Vue({
           el:"#box",
           data:data_obj,
           methods:methods,
       })
       
    
    </script>
</html>

 

kalath_aiur
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue事件绑定指令
m0_65063660的博客
08-26 1638
vue 提供了v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：注意：原生 DOM 对象有onclick、oninput、onkeyup等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：点击+、-按钮可以进行对count的加减操作。......
【vue】基础指令及属性绑定
webxuj的博客
08-29 747
可以为元素的属性动态绑定属性值 vue 规定（类似语法糖）v-bind:指令。插值表达式支持一些js数据类型，但window下面的全局变量不支持。
vue属性绑定指令
m0_65063660的博客
08-26 769
在开发中使用频率非常高，因此，vue 官方为其提供了。在 vue 提供的模板渲染语法中，除了支持。支持Javascript 表达式的运算。
vue动态绑定指令以及动态传参
qq_44052087的博客
11-15 744
vue动态绑定指令以及动态传参
vue双向绑定指令
weixin_42541725的博客
03-02 1025
vue双向绑定指令
vue数据绑定指令
fiona_0427的博客
06-30 870
指令 1.什么是指令 本质就是自定义属性（data-xxx） Vue中指定都是以 v- 开头 2.v-cloak 防止页面加载时出现闪烁问题–vue是先显示插值表达式，然后迅速替换。 v-cloak指令的用法 1、在style中提供样式 [v-cloak]{ display: none; } 2、在插值表达式所在的标签中添加v-cloak指令 v-cloak背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果 <
Vue:vue中的指令（属性绑定指令、事件绑定指令、修饰符、双向绑定指令...）
weixin_46682277的博客
03-08 5837
内容指令 v-text指令： v-text 和原生js中的 innerText 差不多，都无法解析标签，会把标签当做文本输出，在vue中使用 v-text指令会覆盖标签原来的内容 代码示范： <template> <div> # 最后输出结果为Hello Vue~~会被覆盖掉 <p v-text="msg">Vue~~</p> </div> </template> <script> export defaul
Vue基础--Vue中的事件绑定指令详解
qq_44749491的博客
09-24 6146
详解Vue中的事件绑定
三、Vue数据绑定及指令
Lvruoyu的博客
04-21 1233
02. Vue数据绑定 ​ Vue 框架很核心的功能就是双向的数据绑定。 双向是指：HTML 标签数据 绑定到 Vue 对象，另外反方向数据也是绑定的。通俗点说就是，Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化。 ​ 这样以来，就彻底变革了之前 Dom 的开发方式，之前 Dom 驱动的开发方式尤其是以 jQuery 为主的开发时代，都是 dom 变化后，触发 js 事件，然后在事件中通过 js 代码取得标签的变化，再跟后台进行交互，然后根
Vue常用指令2(事件绑定指令/属性绑定指令)(v-on/v-bind)
cyqwersj的博客
04-21 668
按钮- 按钮- 按钮
浅析vue数据绑定
11-26
本文将深入浅出地探讨Vue中的数据绑定机制，包括它的实现原理和优势。 在前端开发中，数据绑定允许开发者将应用程序的数据与用户界面（UI）直接关联，实现数据与视图的自动同步。Vue.js的数据绑定主要采用了三种...
Vue数据绑定实例写法
12-09
在 ” vue” 中，指令是带有 v- 前缀的特殊属性，用来修饰标签的（自定义组件在这里也统一归为标签，因为其使用方式和原生标签一样），其值的约束和模板语法一样，支持表达式、变量。 指令会监测其值的变化，并将其...
vue双向绑定简要分析
08-31
在 Vue 中，双向绑定是通过数据劫持和依赖追踪来实现的。数据劫持是指使用 Object.defineProperty() 方法来监测对数据的操作，而依赖追踪是指追踪依赖于某个数据的所有 watcher，从而在数据发生变化时通知它们更新...
vue自定义指令实现方法详解
10-17
在上面的例子中，`v-color`是一个自定义指令，`red`是绑定的值，可以通过Vue实例的数据属性访问。 ### 四、示例 #### 1. 颜色改变示例 ```html 我是自定义指令 ``` ```javascript Vue.directive('color', { ...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
最新发布
07-27
1250KVA本体基础图11
毕业设计之网上订餐系统.zip
07-27
毕业设计之网上订餐系统.zip
vue3自定义指令绑定事件
11-22
Vue3中自定义指令绑定事件可以通过`binding.value`来获取事件处理函数，然后使用`el.addEventListener()`方法将事件处理函数绑定到元素上。具体实现步骤如下： ```html 点击我触发事件 export default { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值