v-bind：绑定属性值，内容相当于js，缩写:

我添加了一个input标签，如下

<input type="button" value="按钮" title="title"></input>

这样显示的title是固定的，我想使用Vue的data里面的值，就需要加v-bind指令

<input type="button" value="按钮" v-bind:title="title + '---' +'相当于js'"></input>

Vue的data加一个title

 title:"这是一个v-bind指令的提示"

可以很清楚的看到，v-bind指令使用了之后，内容相当于js，title就是变量名，拼接的话就用+，内容用''，看一下浏览器展示效果

v-bind的缩写是：，可以写成如下

<input type="button" value="按钮" :title="title + '---' +'相当于js'"></input>

v-on:绑定方法，缩写@

我在Vue的笔记一中说过，Vue是不操作DOM的，这个v-on指令可以很好的解释这个

比如，上面的input的button按钮，我想写个点击事件，如果是原生js或者jquery，我们会这样写

 <input id="btn" type="button" value="按钮1" v-bind:title="title + '---' +'相当于js'"></input>

v-on的缩写是@，可以写成如下

 <input id="btn" type="button" value="按钮1" @title="title + '---' +'相当于js'"></input>

js会这样写

  document.getElementById('btn').onclick=function(){

            alert('hello 许嵩');

        }

这样不好，Vue就是不让我们操作DOM的，就是让我们专注于业务的，所以看看v-on的写法吧，下面是完整的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>

    <style>

        [v-cloak]{

            display: none

        }

    </style>

</head>

<body>

    <!-- 这个div就是MVVM中的V，View -->

    <div id="app">

        <!-- v-cloak方式 -->

        <p v-cloak>哈哈 {{ msg }} 许嵩来了</p>

        <!-- v-text方式 -->

        <p v-text="msg">许嵩说菜糊了不来了</p>

        <!-- v-html方式 -->

        <p v-html="msg2"></p>

        <!-- v-bind方式 -->

        <input type="button" value="按钮" v-bind:title="title + '---' +'相当于js'"></input>

        <!-- 普通的js方式 -->

        <input id="btn" type="button" value="按钮1" v-bind:title="title + '---' +'相当于js'"></input>

        <!-- v-on方式 -->

        <input type="button" value="按钮2" v-bind:title="title + '---' +'相当于js'" v-on:click="show"></input>

    </div>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

    <script>

        // 这个vm就是MVVM中的VM，ViewModel

        var vm=new Vue({

         el: '#app',

        //  这个data就是MVVM中的M，Model

         data: {

            msg: '许嵩',

            msg2:"<h1>大家好，我是Vae</h1>",

            title:"这是一个v-bind指令的提示"

         },

         methods: {

            show:function(){

                alert('hello 许嵩')

            }

         }  

        })

        document.getElementById('btn').onclick=function(){

            alert('hello 许嵩');

        }

    </script>

</body>

</html>

可以看到v-on方式是v-on:click="show"，这个show就是个方法名，所以Vue里写了个method方法，里面有一个show方法。

总结

又新学了两个指令，v-bind绑定属性，v-on绑定方法

防盗链接：本博客由蜀云泉发表

Vue学习笔记三：v-bind，v-on的使用的更多相关文章

  1. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  2. vue学习笔记(三)：vue-cli脚手架搭建

    一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入:  npm install -g vue-cli     ...

  3. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  4. vue学习笔记三：常见的表单绑定

    <template> <div id="app"> <input type="checkbox" id="checked ...

  5. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  8. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  9. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

随机推荐

  1. 一些android开发实用性网站记录

    android开发一些有用的网站有很多,可以方便我们开发,记录一下哈. 1.Android源代码在线阅读:https://www.androidos.net.cn/sourcecode 2.在线Jso ...

  2. MySQL 基础知识梳理学习（五）----半同步复制

    1.半同步复制的特征 (1)从库会在连接到主库时告诉主库,它是不是配置了半同步. (2)如果半同步复制在主库端是开启了的,并且至少有一个半同步复制的从节点,那么此时主库的事务线程在提交时会被阻塞并等待 ...

  3. C# 霍尼韦尔扫码枪扫码打印

    程序运行背景条件: 1.将扫码枪调制串口驱动模式 2.将扫码枪所在串口拆分成几个虚拟串口 3.扫码枪扫描条码就打印条码 4.WinForm程序 条码控件使用 DevExpress.XtraEditor ...

  4. C# 虚拟串口通信

    将主端口COM8拆分成 COM1和COM2两个虚拟端口 COM8接收的消息会传递给COM1和COM2 SerialPort spSend;//spSend,spReceive用虚拟串口连接,它们之间可 ...

  5. 二进制安装 mariadb

    默认路径安装MySQL,Mariadb 非常简单,解压,配置权限,修改配置文件基本即可使用:自定义安装稍微有点麻烦,需要修改的地方稍微多点: 下面详细介绍自定义目录,二进制安装mariadb, 使用传 ...

  6. VS code 中的各种变量 ${file},${fileBasename}

    VS code 中的各种变量 ${file},${fileBasename} 2017年08月24日 11:14:07 bailsong 阅读数:7108    from: https://blog. ...

  7. 《SQL CookBook 》笔记-第三章-多表查询-连接查询

    目录 1 内连接(inner join) 1.1 隐式的内连接 1.2 显式的内连接 2 外连接(outer join) 2.1 左连接(left outer join) 2.2 右连接(right ...

  8. k8s 集群部署问题整理

    1.hostname “master” could not be reached在host中没有加解析 2.curl -sSL http://localhost:10248/healthzcurl: ...

  9. Linux命令之常用篇

    一.文件和目录 1. cd命令 它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径. 指令 说明 cd /home 进入‘home’目录 cd .. 返回上一级目录 ...

  10. C# 中利用 CRC32 值判断文件是否重复

    需要在 NuGet 中引用 Crc32.NET 包 直接贴代码了: using Force.Crc32; using System; using System.Collections.Generic; ...