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为TV端助力 电影栏目移动到底部或者顶部时抖动动画

    1 移动到底部上下抖动ObjectAnimator animatorX = ObjectAnimator.ofFloat(holder.itemView,"translationX" ...

  2. C学习笔记（逗号表达式）

    (1)书写: ① int i; i=(i=*,i*); printf("%d\n",i); i=60; ② int i; i=i=*,i*; printf("%d\n&q ...

  3. 基于 libevent 开源框架实现的 web 服务器

    /* 原创文章 转载请附上原链接: https://www.cnblogs.com/jiujue/p/10707153.html   */ 自己实现的如有缺漏欢迎提出 直接代码 一切皆在代码中 首先是 ...

  4. 使用Navicat快速生成MySQL数据字典

    1.通过information_schema.COLUMNS表 查询该表可得到所需字段信息 SELECT * FROM information_schema.COLUMNS; 如下图所示: 2.示例 ...

  5. Web Storage：浏览器端数据储存机制

    目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...

  6. Mysql原理与优化

    原文:https://mp.weixin.qq.com/s__biz=MzI4NTA1MDEwNg==&mid=2650763421&idx=1&sn=2515421f09c1 ...

  7. 19 款仿 Bootstrap 后台管理主题免费下载

    声明: 1. 本篇文章提到的仿 Bootstrap 风格的主题,是基于 jQuery 的 ASP.NET MVC 控件库的主题. 2. FineUIMvc(基础版)完全免费,可以用于商业项目. 目录 ...

  8. Visual Studio 2019 正式版 更新内容

    大早上更新了Visual Studio 2019, 试用一下 一.界面改变 1.项目创建界面 首先启动界面改变就不说了,创建项目的界面做了较大改变,感觉在向vs for mac 靠拢 ,而后者感觉像x ...

  9. easyui validatebox textbox 取值和赋值

    总结:表单元素使用easyui时,textbox和validatebox设置值和获取值的方式不一样 text-box设置值只能使用id选择器选择表单元素,只能使用textbox("setVa ...

  10. Centos 7（linux）系统下如何给jar应用程序创建桌面快捷方式

    1.创建系统自带的应用程序快捷方式 对于系统自带的应用程序,其桌面快捷方式存储的位置为以下三个目录中的其中一个: /usr/share/applications ~/.local/share/appl ...