Vue: v-bind 绑定事件;
el：是挂起的含义，“”里填类名;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 导入vue文件 -->
<script src="vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="URL">点击一下</a>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
username: "",
URL: "https://www.baidu.com/",
};
},
});
</script>
</body>
</html>
Vue: v-model 绑定事件;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 导入vue文件 -->
<script src="vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<input name="username" v-model="username" type="text" />{{username}}
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
username: "",
};
},
});
</script>
</body>
</html>
Vue: v-on 简写 @click绑定事件;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<input @click="tests()" value="登录" type="button" />
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
methods: {
tests() {
alert("12346");
},
},
});
</script>
</body>
</html>
Vue: v-if ，v-if-else，V-show 绑定事件;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="css == 5">123456</div>
<div v-else-if="ctt == 3">456</div>
<div v-show="caa ==4">56789</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
css: 3,
ctt: 3,
caa: 5,
};
},
});
</script>
</body>
</html>
标签：基本,el,Vue,app,绑定,语法,new,Document From： https://www.cnblogs.com/ZhuAo/p/16839793.html