vue学习笔记day03 指令v-bind v-on

最新推荐文章于 2022-10-04 20:18:02 发布
最新推荐文章于 2022-10-04 20:18:02 发布
阅读量210 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39209728/article/details/104539013
版权 
一 vue 指令
    指令 (Directives) 是带有 v- 前缀的特殊 attribute
        系统自带的指令：<div v-XXX><div>
        v-if 
        v-else

        v-bind:href
        <!-- 完整语法 -->
        <a v-bind:href="url">...</a>

        <!-- 缩写 -->
        <a :href="url">...</a>

        <!-- 动态参数的缩写 (2.6.0+) -->
        <a :[key]="url"> ... </a>

        v-on:click/v-on:keydown/v-on:keyup.37 可以添加参数
        v-on绑定事件 使用动态参数为一个动态的事件名绑定处理函数：
        <!-- 完整语法 -->
        <a v-on:click="doSomething">...</a>

        <!-- 缩写 -->
        <a @click="doSomething">...</a>

        <!-- 动态参数的缩写 (2.6.0+) -->
        <a @[event]="doSomething"> ... </a>
        事件
            事件的冒泡 
            事件的默认行为
                .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
                <!-- 阻止事件默认行为 -->
                <a :href="h" v-on:click.prevent="show">111</a>

例子1

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-if="arr.length != 0">{{arr}}</p>
        <p v-else>暂无数据</p>

        
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                arr: [1, 2, 3],
                str: "你好vue"
            }
        })
    </script>
</body>

</html>

例子2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a v-bind:href="h">b页面</a>
        <a :href="h">缩写形式</a>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                h: "b.htm;"
            }
        })
    </script>
</body>

</html>

例子3

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button v-on:click="run()">按钮</button>
        <!-- <input type="text" v-on:keydown="k()" /> -->
        <input type="text" v-on:keydown.37="k()" />
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {}, //数据
            methods: { //方法
                run: function() {
                    alert(1);
                },
                k: function(e) {
                    var e = window.event || e;
                    if (e.keyCode == 37) {
                        console.log(e.keyCode)
                    }
                    console.log(e.keyCode)

                }
            }
        })
    </script>
</body>

</html>

例子4

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 阻止事件默认行为 -->
        <a :href="h" v-on:click.prevent="show">111</a>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                h: "a.html"
            },
            methods: {
                show: function() {
                    alert(1);
                }
            }
        })
    </script>
</body>

</html>

例子5

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p @click="show">点击查看</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            methods: {
                show: function() {
                    alert("这是缩写");
                }
            }
        })
    </script>
</body>

</html>

 

桑丘紫言
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE-2.X学习笔记day8
04-30
4. **指令与修饰符**：Vue有许多内置指令，如`v-bind`（简写为`:`)用于绑定属性，`v-on`（简写为`@`)用于绑定事件。修饰符如`.prevent`阻止默认行为，`.lazy`使输入元素变为懒加载等，能更精细地控制指令的行为。 5...
Vue - v-if、v-show、attribute key、v-else、v-else-if
kaven
11-10 923
推荐：Vue学习汇总 Vue学习（十一）- v-if、v-show、v-else、v-else-if v-if 根据表达式的真假值，来有条件地渲染元素。在切换时元素及它的数据绑定 、组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。 当条件变化时该指令触发过渡效果。 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。 代码： <!DOCTYPE html> <html lang="en"> <head> &
Vue学习笔记-插槽
木玄客的博客
04-15 226
Vue过去对于插槽的使用基本依赖于slot以及slot-scope（默认插槽|具名插槽|作用域插槽），但是现在这个两个attribute已经被v-slot指令所取代（Vue2.6.0）； 这两个attribute虽然已经被官方废弃且不会出现在 Vue 3 中，但在接下来所有的 2.x 版本中slot和slot-scopeattribute 仍会被支持； 1、默认插槽（未改变） 不需要声明name或者作用域，直接进行使用，一个组件中只能有一个该类插槽： // 父组件 <templat...
Vue学习总结
zhiouzhiou11的博客
10-04 1118
Vue框架是一个MVVM的渐进式JavaScript框架，是初创项目的首选前端框架。它是轻量级的，有很多独立的功能或库，在vue里我们可以根据自己的项目来选用它的一些功能。Vue 的核心库只关注视图层，所以开发者关注的只是m-v的映射关系。其中提到的“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念。
vue 配置eslint代码检查
lzc的博客
01-11 3万+
1.安装依赖： "eslint": "^5.12.0", "eslint-config-standard": "^12.0.0", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.1.1", "eslint-plugin-import": "^2
初学Vue(学习笔记 一) day one
01-20
它们提供了额外的行为，如`v-if`用于条件渲染，`v-for`用于循环，`v-bind`用于动态绑定属性，`v-on`用于事件监听等。 - **v-cloak**指令：用于解决在Vue实例初始化期间，模板中的`{{ }}`表达式会短暂显示的问题。...
vue2-day7.zip
08-10
3. **指令**：Vue提供了多种内置指令，如`v-if`（条件渲染）、`v-for`（循环渲染）、`v-on`（绑定事件监听器）和`v-bind`（绑定属性）。它们在HTML元素上以`v-`开头，帮助我们扩展HTML的功能。 4. **计算属性**：在...
Vue基础day4学习资料.zip
03-31
2. **模板语法**：Vue允许在HTML中使用特殊的指令（如`v-if`, `v-for`, `v-bind`, `v-on`等）来控制DOM。这使得数据和视图之间的交互变得简单直接。 3. **数据绑定**：Vue的核心特性之一是双向数据绑定，通过`v-...
Vue入门day01笔记
10-27
- **指令**：Vue 提供了一系列内置指令，如 `v-bind`、`v-on`、`v-if` 等，这些指令可以更方便地操作 DOM 元素。 #### Vue 指令详解 - **`v-bind`**：用于动态绑定 HTML 属性，如 `v-bind:href="url"` 可以动态...
vue 使用v-if时遇到的问题
lx_1024的博客
02-07 1万+
在vue中使用v-if时遇到的问题记录v-if和v-else之间不能加入其它的元素，否则会报错，错误为：v-else used on element &lt;input&gt; without corresponding v-if，错误示例如下：&lt;input type="text" v-if="id===0"&gt; &lt;span&gt;提示信息&lt;/span&gt; &lt;p v
vue使用v-if时的注意点
热门推荐
挥别了青春的博客
07-12 5万+
v-if和v-else或v-else-if之间不能添加其他元素。   以下是错误事例&lt;span v-if="type==1"&gt;错误示范&lt;/span&gt; &lt;span&gt;哈哈哈&lt;/span&gt; &lt;p v-else&gt;嘿嘿嘿&lt;/p&gt;以下是正确实例&lt;span v-if="type==1"&gt;正
Vue 常用内置指令（v-if、v-for、v-bind、v-on）
QIANDXX的博客
07-23 1559
指令：是指 Vue 提供的以 “v-” 前缀的特性，当指令中表达式的内容发生变化时，会连带影响 DOM 内容发生变化。 v-if 指令 条件渲染指令，动态在 DOM 内添加或删除 DOM 元素； 使用场景： 多个元素 通过条件判断展示或者隐藏某个元素； 进行两个视图之间的切换； 示例： <script> window.onload =function(){ //创建一个vue实例 var app = new Vue({ el: '#app',
v-bind和v-on
qq_42931285的博客
10-09 92
v-bind 动态地绑定一个或多个 html属性 <!-- 绑定一个 attribute --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> v-on 绑定html事件。 <!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 缩写 --> <button.
3. Vue基础指令:{{}}；v-bind；v-on；v-model；v-if；v-for
cxrlover的博客
04-25 268
文章目录绑定数据'{{}}'绑定属性 v-bind绑定事件 v-on表单输入绑定 v-model 下面的例子，都是在原生的html页面中书写的，并没有使用Vue的工具构建项目。 绑定数据’{{}}’ 采用模板语法声明式的对数据进行渲染。 使用{{}}对数据与DOM建立关联，构建响应式的页面。 下面的例子，使用了在线CDN的方式引入Vue，counter的值，将会每秒递增。 <head> <meta charset="UTF-8"> <title>声明式渲染
Vue 脚手架 路由3
weixin_39209728的博客
11-20 645
vue-loader 1&gt;什么是Vue-loader? 其实是webpack的loader （webpack 模块打包工具） 2&gt;Vue项目是基于webpack来搭建的 3创建Vue脚手架 npm install vue-clie -g vue init webpack-simple [项目名称] 进入到项目目录 cd demo 安装项目依赖 npm install 运行...
vue 学习笔记20 使用钩子函数实现动画
weixin_39209728的博客
03-08 608
一 vue的过渡 （动画） 钩子函数 vue动画的js钩子函数相当于动画的生命周期函数 。before-enter:进入之前触发 。after-enter：进入后触发 。enter-cancelled：结束进入阶段 。before-leave:进入之前触发 。after-leave：进入后触发 ...
vue学习笔记day19 动画之animate.css库使用
weixin_39209728的博客
03-08 576
一 vue的过渡 （动画） 2》利用css动画库 (animal.css) bower install animate.css 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...
vue学习笔记day17 子组件和子组件之间的传值
weixin_39209728的博客
02-29 493
一 vue的组件传值 （通讯） a>父子组件通信 props 父组件给子组件传值 子组件使用父组件数据 1》在子组件props:[定义数据名称] 子组件中使用 {{子组件props定义的数据名称}} 2》<com :子组件名称="父组件数据名称"></com> 将父组件数据名称传给子组件中 props是单向数据流 ...
vue v-bind 与 v-on
最新发布
01-18
Vue中的v-bind和v-on是两个常用的指令，用于属性绑定和事件绑定。 1. v-bind用于属性绑定，可以将Vue实例中的数据绑定到HTML元素的属性上。通过v-bind指令，可以动态地将Vue实例中的数据绑定到HTML元素的属性上，实现数据的动态更新。例如： ```html <div v-bind:class="className"></div> ``` 上述代码中，v-bind:class将Vue实例中的className属性绑定到div元素的class属性上。 2. v-on用于事件绑定，可以在HTML元素上监听指定的事件，并在触发事件时执行相应的方法。通过v-on指令，可以将Vue实例中的方法绑定到HTML元素的事件上。例如： ```html <button v-on:click="handleClick">点击按钮</button> ``` 上述代码中，v-on:click将Vue实例中的handleClick方法绑定到按钮的点击事件上。 综上所述，v-bind用于属性绑定，v-on用于事件绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值