指令：
v-bind:动态更新html元素上的属性
v-on:绑定事件监听
语法糖:
v-bind:href 缩写为 :href
v-bind:src 缩写为 :src
v-on 可以用@缩写
<button v-on:click="close">隐藏</button>
<button @click="close">隐藏</button>
<!DOCTYPE html>
<html>
<head>
<title>指令与事件</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<p v-if="show">显示文本</p>
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl" width="200" height="200">
<!-- v-on -->
<button v-on:click="close">点击隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
show:true,
href:"https://www.baidu.com",
imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic33.photophoto.cn%2F20141007%2F0035035953529595_b.jpg&refer=http%3A%2F%2Fpic33.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638004758&t=54c0b2a59047ba45ce98b6518dbbe43d"
},
filters:{ // 过滤器
go:function( value ){
}
},
methods:{ //方法
close:function(){
this.show = false;
}
}
})
</script>
</body>
</html>