<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--# 语法糖是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发 #-->
<!--# vue.js的v-bind 和 v-on 指令都提供了语法糖,也可以说是缩写,比如v-bind,可以省略v-bind,直接写一个冒号 #-->
<a v-bind:href="url">这是一个链接</a>
<img v-bind:src="imgUrl">
<!--# 缩写为 #-->
<a :href="url">这是一个链接</a>
<img :src="imgUrl">
<!--# v-on可以直接用"@"来缩写 #-->
<button v-on:click="handleClose">点击隐藏</button>
<!--# 缩写为 #-->
<button @click="handleClose">点击隐藏</button>
</div>
</body>
</html>
vue.js语法糖
最新推荐文章于 2024-03-06 14:42:24 发布