vue.js入门代码
程序员文章站
2022-04-11 08:53:43
+++++{{msg}}----- ========== 百度一下,不跳转 百度一下,跳转 ......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
[v-cloak]{/*网速比较慢可以用此命令隐藏msg*/
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>+++++{{msg}}-----</p><!--接受消息-->
<h4 v-text="msg">==========</h4><!--接受消息-->
<input type="button" value="点我啊" @click="btnHandler">
<input type="button" value="传送门" @click="ch">
<a href="http://www.baidu.com" @click.prevent="onclick">百度一下,不跳转</a><!--阻止自动跳转-->
<a href="http://www.baidu.com" @click="onclick1">百度一下,跳转</a>
</div>
<!--引入vue.js-->
<script src="./WEB-INF/lib/vue.js"></script>
<script>
//创建Vue的实体
var vm=new Vue({
el:'#app',
data:{
msg: 'Hello Vue.js!'
},
//方法的合集,都写在此处
methods:{
onclick1(){
alert("直接跳了")
},
onclick(){
alert("阻止baidu的跳转")
},
ch(){
alert("传送出来了")
},
btnHandler (){
alert("显示出来了")
}
}
})
</script>
</body>
</html>
上一篇： 详解iOS集成融云SDK即时通讯整理