<!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>vue 入门</title>
<style>
[v-cloak]{
display: none;
}
</style>
<!--1 导入vue.js库-->
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式，只会替换自己的占位符，不会把整个元素清空-->
<p v-cloak>--------{{msg}}-------</p>
<!--会将整个元素原有值清空-->
<h4 v-text="msg">--------------------</h4>
<!--将msg的内容按html样式输出-->
<h5 v-html="msg"></h5>
<!--v-bind:xxx用于绑定属性的指令，会将引号内的内容当做js脚本执行
简写模式 ::title="btTitle + 'aaa' "
-->
<input type="button" value="v-bind:" v-bind:title="btTitle + 'aaa' " />
<input type="button" value="冒号:" :title="btTitle + 'bbb' " />
<!--Vue中提供了v-on事件绑定机制
缩写是@
-->
<input type="button" value="v-on:click" :title="btTitle + 'bbb' " v-on:click="show" />
<input type="button" value="@" :title="btTitle + 'bbb' " @click="show" />
<input type="button" value="v-on:mouseover" :title="btTitle + 'bbb' " v-on:mouseover="show" />
</div>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'test',
btTitle: "我是一个按钮"
},
methods: { //定义当前Vue实例的所有方法
show: function () {
alert('hello')
}
}
})
</script>
</body>
</html>
v-cloak
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
上一篇： Oracle基础查询练习（三）
下一篇：
双亲委派机制
最后一次编辑于 2023年11月14日
0
暂无评论
推荐阅读
作者其他文章
更多
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
最新推荐
更多
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14
2024-06-14