Vue 属性绑定v-bing 事件绑定v-on
<!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>
<style>
/* [v-cloak] {
display: none;
}*/
</style>
</head> <!-- 1. 如何定义一个基本的Vue代码结构 -->
<!-- 2. 插值表达式 和 v-text -->
<!-- 3. v-cloak -->
<!-- 4. v-html -->
<!-- 5. v-bind Vue提供的属性绑定机制 缩写是 : -->
<!-- 6. v-on Vue提供的事件绑定机制 缩写是 @ --> <body>
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
<p v-cloak> {{ msg }} ----------</p>
<h4 v-text="msg">==================</h4>
<!-- 默认 v-text 是没有闪烁问题的 --> <div>{{ msg2 }}</div>
<div v-text="msg2"></div>
<!-- v-text会覆盖元素中原本的内容，且不会把内容当成HTML模式去解析
但是v-cloak插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空 -->
<!-- v-html 清空元素的内容 并且会把内容当成HTML标签去解析 -->
<div id='Hdmi' v-html="msg2">1212112</div> <input type="button" value="Bing按钮" v-bind:title="mytitle">
<input type="button" :value="mytitle1" v-bind:title="mytitle1">
<!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->
<!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
<!-- v-bind 中，可以写合法的JS表达式 --> <input type="button" value="按钮" @click="show">
<input type="button" :value="'点击自增'+sz" @click="add" :title="sz">
<!-- Vue 中提供了 v-on: 事件绑定机制 -->
<!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> -->
<!-- 注意：v-on：指令可以被简写成 @click -->
<!-- 注意：v-on：指令可以支持绑定多个事件 -->
</div> <script src="./lib/vue-2.4.0.js"></script> <script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
mytitle: '这是一个按键是自己定义的title',
mytitle1: '这是一个按键的名称是自己写的',
sz: 1
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
},
add: function () {
this.sz += 1
}
}
})
</script>
</body> </html>
Vue 属性绑定v-bing 事件绑定v-on的更多相关文章
- vue使用svg，animate事件绑定无效问题及解决方法
由于使用svg制作圆形进度条,但是进度展示的太生硬,没有过渡圆滑的效果,所以使用 animate(在svg元素里可以查到) 元素标签,但 这样使用了,还是没有效果,我前端使用的 vue ,所以通过 @ ...
- vue重温之mint-ui------------点击事件绑定
第一次接触mint-ui,在使用它的tabbar时,为了达到点击切换页面的效果,采用了点击事件的方式,然后就碰到了这么个问题: 是的,点击事件是不起作用的. 然后刚好一个朋友也在做这块,而且有一段时间 ...
- Vue知识整理12：事件绑定
采用v-on命令进行事件的绑定操作,通过单击按钮,实现按钮文字上数值的增加 带参数的事件过程 可以添加$event事件,实现事件信息的获取
- VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用
<body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button ...
- angularjs之事件绑定、解除事件绑定
今天在开发时,遇到一个坑,花了一下午时间也没找到原因,无奈小菜鸟只能寻求公司里大牛的帮助,果然,大牛就是大牛,对比了几个输出结果,就看出问题所在.所以小菜鸟当然不会错过这个分享的时机啦~废话不多说进入 ...
- MVVM设计模式和WPF中的实现（四）事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- MVVM设计模式和在WPF中的实现（四） 事件绑定
系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中的实现(三)命令绑定 MVVM模式解析和在WPF中的 ...
- MVVM设计模式的事件绑定
为什么要事件绑定 这个问题其实是很好理解的,因为事件是丰富多样的,单纯的命令绑定远不能覆盖所有的事件.例如Button的命令绑定能够解决Click事件的需求,但Button的MouseEnter.窗体 ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
随机推荐
- 使用Redis管道提升性能
首发于 樊浩柏科学院 Redis 的 管道 (pipelining)是用来打包多条无关命令批量执行,以减少多个命令分别执行带来的网络交互时间.在一些批量操作数据的场景,使用管道可以显著提升 Redis ...
- Python 运算符括号
- spring - constructor-arg的常规用法
1.使用构造子注入时,则使用constructor-arg子标签,来指定构造函数的参数. <bean id="provider" class="com.ap ...
- mysql存储过程小解
mysql 存储过程 1.创建语法 delimiter $$ --$$表示改变默认的分隔符,代表以下为存储过程,不然会以SQL的方式执行 drop procedure if exists pro_na ...
- MSSQL → 02：数据库结构
一.数据库的组成 在SQL Server 2008中,用户如何访问及使用数据库,就需要正确了解数据库中所有对象及其设置.数据库就像一个容器,它里面除了存放着数据的表之外,还有视图.存储过程.触发器.约 ...
- Python编码---转自金角大王
本节内容 编码回顾 编码转换 Python的bytes类型 编码回顾 在备编码相关的课件时,在知乎上看到一段关于Python编码的回答 这哥们的这段话说的太对了,搞Python不把编码彻底搞明白,总有 ...
- spring自动扫描的注解@Component @Controller @Service @Repository
@Component @Controller @Service @Repository的作用 1.@controller 控制器(注入服务)2.@service 服务(注入dao)3.@reposit ...
- LeetCode172 Factorial Trailing Zeroes. LeetCode258 Add Digits. LeetCode268 Missing Number
数学题 172. Factorial Trailing Zeroes Given an integer n, return the number of trailing zeroes in n!. N ...
- 快速删除项目中的输出日志console.log
项目开发时,控制台往往有许多忘记删除或注释掉的输出日志.但是上线后总不能一个一个删吧,最近总结出几个解决思路 重写console.log方法,使其失去 输出能力 这个最直接有效,用vue框架的话放在m ...
- 利用idea构建hibernate
1.创建项目 若勾选Use library,则点击右侧的Create,使用本地已下载的Hibernate 5.2.13框架(必须导入hibernate-release-5.2.13.Final\lib ...