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 ...
随机推荐
- Lambada. 计算和
Lambada. 计算和 import java.util.Arrays; import java.util.List; public class ListLambada { public stati ...
- [Vue CLI 3] 配置解析之 parallel
官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...
- Python 运算符括号
- JavaScript--函数表达式与函数声明的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android RecycleView添加HeaderView宽度不能撑满屏幕问题
下午做项目的时候,碰到页面布局需要使用RecycleView加HeaderView,本以为很简单东西,却有一个小小的坑:HeaderView布局的宽度不能撑满屏幕! 先看下出现问题的图: 天了噜,我写 ...
- Django-2.2.1版本关于无法使用makemigrations的错误
报错 django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0. ...
- JS 里的数据类型转换
JS的数据类型转换 一.js中的数据类型Js中的数据类型一共有六种,即number,string,boolean,underfine,null,object. 1.Number Number数据类型指 ...
- oracle如何启用审计
通过数据库初始化参数文件中的AUDIT_TRAIL 初始化参数启用和禁用数据库审计. DB 启用数据库审计并引导所有审计记录到数据库的审计跟踪 OS 启用数据库审计并引导所有审计记录到操作系统的审 ...
- bzoj2073 PRZ
Description 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 桥已经很旧了, 所以它不能承受太重的东西. 任何时候队伍在桥上的人都不能超过一定的限制. 所以这只队伍 ...
- Linux用户、群组和权限命令总结
新建用户natasha,uid为1000,gid为555,备注信息为“master” groupadd -g 555 natasha useradd -u 1000 -g 555 -c maste ...