Vue学习笔记三:v-bind,v-on的使用
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的使用的更多相关文章
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- vue学习笔记(三):vue-cli脚手架搭建
一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入: npm install -g vue-cli ...
- VUE 学习笔记 三 模板语法
1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...
- vue学习笔记三:常见的表单绑定
<template> <div id="app"> <input type="checkbox" id="checked ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
随机推荐
- 微信小程序(基本知识点)
创建页面的两种方式: 1.通过创建文件夹的方式创建(.wxml/.wxss/.json/.js/) 2.在app.json的"pages": []中添加路径"pa ...
- Android深入理解Context(一)Context关联类和Application Context创建过程
前言 Context也就是上下文对象,是Android较为常用的类,但是对于Context,很多人都停留在会用的阶段,这个系列会带大家从源码角度来分析Context,从而更加深入的理解它. 1.Con ...
- ext整合highcharts实现饼图
extjs自身有图表的功能,但是与highcharts和echarts相比,ext不如它们功能强大.样式美观. 公司项目的前端框架使用的是ext,所以就有了ext整合第三方图表插件的需求. 笔者会一点 ...
- 安装Docker时错误提示 "could not change group /var/run/docker.sock to docker: group docker not found"的解决方案
安装Dock服务,主要命令是 yum install docker. 但是在启动的时候报错:warning msg="could not change group /var/run/doc ...
- codeforces#1152D. Neko and Aki's Prank(dp)
题目链接: https://codeforces.com/contest/1152/problem/D 题意: 给出一个$n$,然后在匹配树上染色边,每个结点的所有相邻边只能被染色一次. 问,这颗树上 ...
- [转帖]5G网速那么快,基站辐射会很大吗?
5G网速那么快,基站辐射会很大吗? 鲜枣课堂 2019-04-20 21:19收藏55评论6社交通讯 题图来自东方IC,本文来自微信公众号:鲜枣课堂(ID:xzclasscom),作者:小枣君 ...
- 电脑突然使用不了复制粘贴快捷键,Ctrl+C和Ctrl+V没用
今天不知道怎么回事,在复制代码的时候突然用不了Ctrl+C和Ctrl+V了 刚开始我还以为是eclipse出问题,然后我在idea中是可以复制 和 粘贴的,然后我又打开文本编辑器notepad++,发 ...
- Object.clone()方法与对象的深浅拷贝
转载:[https://www.cnblogs.com/nickhan/p/8569329.html] 引言 在某些场景中,我们需要获取到一个对象的拷贝用于某些处理.这时候就可以用到Java中的Obj ...
- java基础问题巩固(1)
你对java垃圾回收了解吗?什么时候需要使用? 答: 垃圾回收器的作用是查找和回收(清理)无用的对象,从而让jvm更 有效的使用内存.但是运行因为垃圾回收本身会有开销,过于频繁的使用会导致性能下降.比 ...
- centos7之openvpn搭建
一.环境介绍 操作系统centos7.4 openvpn版本:openvpn-2.1 lzo版本:lzo-2.03 二.搭建 关闭firewalld防火墙,并设置开机不启动.关闭selinux sys ...