Vue会根据不同的标签指令，实现不同的功能。
指令：指的是带有v-前缀的的特殊标签属性。
我们常见的vue指令有：
1.v-html：类似于js中innerHTML，用于设置元素的HTML。案例如下：
<div id="app">
<div v-html="msg"></div>
<div v-html="h"></div>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器，即选择容器
data:{ //通过data提供渲染数据
msg: '<a href="https://www.baidu.com">百度</a>',
h:'<h1>标签</h1>'
}
})
</script>注意如data里面属性的值为html标签注意用单引号括起来。
2.v-on:用来注册监听事件，为了方便编写v-on可用@代替。v-on有两种用法，一个是内联函数，当我们的处理逻辑简单是可以用内联函数，如下：
<div id="app">
<button @click="count++">+</button>
{{count}}
<button @click="count--">-</button>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器，即选择容器
data:{ //通过data提供渲染数据
count:100
},
})
</script>
点击加按钮
点击减按钮
第二种用发就是当我们的处理逻辑复杂时我们可以通过data里面的methods属性里面写我们的处理逻辑，案例如下：
<div id="app">
<button @click="fuadd()">+</button>
{{count}}
<button @click="funj()">-</button>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器，即选择容器
data:{ //通过data提供渲染数据
count:100
},
methods:{
fuadd(){
this.count = this.count*2;
},
funj(){
this.count = this.count/2
}
}
})
</script>
v-on还可以调用参数，案例如下：
<div id="app">
<button @click="fu(nn)">牛奶{{10}}元</button>
<button @click="fu(jd)">鸡蛋{{5}}元</button>
<div>余额：{{yuer}}</div>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器，即选择容器
data:{ //通过data提供渲染数据
yuer:100,
nn:10,
jd:5
},
methods:{
fu(x){
this.yuer = this.yuer-x;
}
}
})
</script>
3.v-show和v-if：这两个指令都是用来控制元素的显示和隐藏，但应用场景和底层原理不同，v-show的底层原理是通过控制css的display:none来实现元素的显示于隐藏的，而v-if则是通过控制元素的创建与移除来实现元素的隐藏和显示的。v-show适用于经常显示与隐藏的场景而v-if则适用于不经常显示与隐藏的场景。案例如下：
<div id="app">
<button @click="fu()">切换显示与隐藏</button>
<div v-show="isShow">v-show控制</div>
<div v-if="isShow">v-if控制</div>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器，即选择容器
data:{ //通过data提供渲染数据
isShow:true
},
methods:{
fu(){
this.isShow=!this.isShow;
}
}
})
</script>
未隐藏时：
隐藏后：
由此可看出v-if和v-show的底层原理的不同。
4.v-if和v-else和v-else if的联合用法：使用v-else和v-else if时必须使用v-if，案例如下：
<div id="app">
<div>小明的成绩是:{{count}}</div>
<div v-if="count>90">小明的等级是：A</div>
<div v-else-if="count > 70 && count <= 90">小明的等级是：B</div>
<div v-else-if="count > 60 && count <= 70">小明的等级是：C</div>
<div v-else>小明的等级是：D</div>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器，即选择容器
data:{ //通过data提供渲染数据
count:94
},
methods:{
}
})
</script>
注意Vue.js中不支持链式的写发如：70>count>60这种写法是不允许的。
5.v-bind：可以用来动态地绑定 HTML 元素的属性，例如 href、src、class、style 等。它可以简写为冒号 :。案例如下：
<div id="app">
<a :href="tbUrl">淘宝</a>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器，即选择容器
data:{ //通过data提供渲染数据
tbUrl:'https://www.taobao.com/'
},
methods:{
}
})
</script> 
6.v-for：v-for用来渲染元素，必须加上key值。案例如下：
<div id="app">
<div v-for="(item,index) in list" :key="item.id">{{item}}</div>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器，即选择容器
data:{ //通过data提供渲染数据
list:[
'苹果','牛奶','香蕉'
]
},
methods:{
}
})
</script>
7.v-model：实现文本框的双向绑定。
点击登录按钮后：
点击重置按钮后：
以上就是Vue常用指令及用法案例，希望能帮助到有需要的人。
标签：count,el,Vue,vue,app,用法,指令,data From： https://blog.csdn.net/qq_63044079/article/details/140123995