vue指令总结
一、总述
二、代码实现（内含大量注释）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue入门</title>
<!-- 使用Vue 3官方CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<a :href="URL">链接1</a> <!-- 简写语法 -->
<a v-bind:href="URL">链接2</a> <!-- 简写语法 -->
<br>
<!-- 使用v-model绑定到表单元素上面-->
<!-- 在表单中要是改变了url也会改变数据模型，导致另外两个链接也会发生改变-->
<input type="text" v-model="URL">
<!-- 下面测试的是v-on的点击事件-->
<!-- value是给按钮取一个名字-->
<!-- 通过v-on设置触发的事件，后面要加上触发的事件。如点击等，=后面接的是触发后调用的函数，函数没有参数可以不带括号-->
<!-- 调用的函数需要在script中的methods中声明-->
<br>
<input type="button" value="点击按钮" v-on:click="handal">
<!-- 当然可以简写为下面的形式-->
<input type="button" value="点击按钮" @click="handal">
<br>
<!-- 测试v-if，v-else-if，v-else标签-->
<input type="text" value="测试年龄输入框" v-model="age">
<p>您输入的年龄为：</p>
<span v-if="age <= 35">青年</span>
<span v-else-if="age > 35 && age < 60">中年</span>
<span v-if="age >= 60">老年</span>
<br>
<!-- 测试v-show-->
<span v-show="age >= 60">经测试，您为老年人，老年人请优先</span>
<!-- 使用v-for标签来进行遍历-->
<div v-for="addir in addirs">{{addir}}</div>
<!-- 当要展示的是遍历的索引时可以这样来写-->
<div v-for="(addir,index) in addirs">{{index+1}} : {{addir}}</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
URL: "https://www.baidu.com",
age: 20,
addirs:["张三","李四","王五","赵六"]
};
},
methods:{
handal:function (){
alert("你点了我一下");
}
}
}).mount('#app');
</script>
</body>
</html>
