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 ...
随机推荐
- koa上传excel文件并解析
1.中间键使用 koa-body npm install koa-body --save const koaBody = require('koa-body'); app.use(koaBody({ ...
- KNN最近邻算法
算法概述 K最近邻(K-Nearest Neighbor,KNN)算法,是著名的模式识别统计学方法,在机器学习分类算法中占有相当大的地位.它是一个理论上比较成熟的方法.既是最简单的机器学习算法之一,也 ...
- mysql自定义function 写递归查询子节点
#存储文本信息表 CREATE TABLE WordInfoEntity( word_id ) PRIMARY KEY NOT NULL, # 主键ID UUID word_greda :正文文本 , ...
- hdu5437 优先队列 长春网赛
优先队列做,然后遍历人数. #include <queue> #include <stdio.h> #include <string.h> #define maxn ...
- s3c6410时钟初始化
今天自己写bootloader做时钟初始化时遇到的问题,特记录下来.为了方便理解,我大部分都有截图, 在此我先说明下,图均来自数据手冊.也希望看了本篇文章的同志多多參看数据手冊才干理解的更加透 ...
- Directx11学习笔记【八】 龙书D3DApp的实现
原文:Directx11学习笔记[八] 龙书D3DApp的实现 directx11龙书中的初始化程序D3DApp跟我们上次写的初始化程序大体一致,只是包含了计时器的内容,而且使用了深度模板缓冲. D3 ...
- 2019-8-31-dotnet-控制台-Hangfire-后台定时任务
title author date CreateTime categories dotnet 控制台 Hangfire 后台定时任务 lindexi 2019-08-31 16:55:58 +0800 ...
- 非阻塞模式下，虽然connect出错，但是getsockopt取得的错误却是0的问题
调试项目代码时,发现了一个奇怪问题,记录如下: 非阻塞模式下,connect发起建链,返回-1(这在非阻塞模式下是很正常的现象).然后将该socket的写事件进行监听,在写事件触发后,getsocko ...
- @codeforces - 718E@ Matvey's Birthday
目录 @description@ @solution@ @accepted code@ @detail@ @description@ 给定一个长度为 n 的字符串 s,保证只包含前 8 个小写字母 ' ...
- 2018-11-26-WPF-通过-DrawingContext-DrawImage-绘制图片
title author date CreateTime categories WPF 通过 DrawingContext DrawImage 绘制图片 lindexi 2018-11-26 16:1 ...