第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
2024-09-01 09:12:50
<!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 id="app">
<!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
<h4 v-text="msg"></h4>
<!-- 默认v-text是没有闪烁问题的 -->
<!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个 占位符，不会把整个元素内容清空 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<!-- v-bind：是Vue中，提供用于绑定属性的指令 -->
<!-- <input type="button" value="按钮" v-bind:title="mytitle+'123' "> -->
<!-- 注意：v-bind: 指令可以被简写为：要绑定的属性 -->
<!-- v-bind 中，可以写合法的js表达式 --> <!-- Vue 中提供了v-on:事件绑定机制 -->
<!-- <input type="button" value="按钮" :title="mytitle+'123' " v-on:click="alert('hello')"> --> <input type="button" value="按钮" v-on:click="show">
<!-- 鼠标覆盖事件 -->
<input type="button" value="按钮" v-on:mouseover="show">
</div> <script src="./lib/vue-2.6.10.js"></script> <script>
var vm = new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>哈哈，我是h1</h1>',
mytitle:'这是一个自己定义的title'
},
methods:{//这个 methods属性中定义了当前Vue实例所有可用的方法
show:function(){
alert('Hello')
}
}
})
</script>
</body>
</html> <!--v-on: Vue提供的事件绑定机制 它的缩写是 @ 所以 v-on:click="alert('hello') 可以写成 @click="alert('hello')
v-bind: Vue提供的属性绑定机制 它的缩写是 :
-->
最新文章
- 【整理】--linux指令
- offline .net3.5
- SqlSever基础 group by之后，加having 对分组之后的数据在进行处理
- Code is not literature
- JVM内存的那些事
- Python、Lua和Ruby——脚本大P.K.
- 纯css加伪类实现关闭提示创窗口
- 什么是比特币（Bitcoin）?
- cmake+qt+qtcreator的配置，解决Q_OBJECT的问题
- storm的并发机制
- RecyclerView onTouch & onClick 触摸事件与点击事件
- js字符串和数组方法总结
- PHP中目录解析函数
- Linux SDK之uClinux、Broadcom、Atheros、Realtek、Ralink、Marvell、Intel
- Mysql--alter命令小特点
- Codeforces Round #505 (Div 1 + Div 2 Combined) Solution
- 私有仓库harbor安装包括https
- php memcached在windows上的使用
- C语言:宽字符集操作函数（unicode编码）
- SteamVR Unity Plugin - v2.0.1中的InteractionSystem