vue语法糖
语法糖是指在不影响功能的情况下, 添加某种方法实现同样的效果, 从而方便程序开发。
1. v-bind
v-bind, 可以省略 v-bind, 直接写一个冒号 “:”
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input :value="msg"></div><script src="vue.js"></script><script>var app = new Vue({el:'#app',data:{msg:'hello'}})</script></body>
</html>
2. v-on
v-on 可以直接用 “@” 来缩写:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p v-if="show">123</p><button @click="closeHandle">隐藏</button></div><script src="vue.js"></script><script>var app = new Vue({el:"#app",data:{show:true},methods:{closeHandle:function(){this.show = false;}}})</script>
</body>
</html>