前言：大家都知道vue在今年即将推出vue3了，但是我发现自己对vue的一些常用指令还是很不熟悉，有的时候想到用什么就用什么，导致写出的代码质量不高。今天重新把这些指令梳理一下，发现自己以前很多地方用的不恰当。
1. 大家都知道我们在写Vue的时候，数据都是写在data里面，之后我们在获取。
<div id="app">{{message}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"世界你好"
}
})
</script>可以看到data的数据渲染上HTML结构上了。
除了上面的方法，在vue里面有一个v-text 指令，可以设置标签的文本值
<div id="app"> <h1 v-text="message"></h1> </div> <script> var app = new Vue({ el:"#app", data:{ message:"世界你好" } })v-html 设置标签 inner HTML
<div id="app"> <h2 v-html="content"></h2> </div><script> var app =new Vue({ el:"#app", data:{ content:"<a href='https:www.baidu.com'>百度教育</a>", message:"周末", info:"", school:{ name:'东华理工大学', mob:'18170877760' }, con:["北京","上海","深圳"] } })对比总结：
- v-text和v-html都可以将data的数据渲染在结构上去。
- v-html不仅可以写简单的数据，还可以写HTML结构。
- 一般我们写代码还是习惯性的使用{{item}}，比较简单，毕竟能少写几个字母也是好的。
作者：知悉
链接：https://juejin.cn/post/6844904083699007496
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
2. v-on 为元素绑定事件
- v-on 指令的作用是为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
<div id="app">
<h2 @click="change">{{message}}</h2>
</div>
<script>
var app =new Vue({
el:"#app",
data:{
message:"西兰花炒蛋",
}，
methods:{
change:function(){
var a = this.message+="好好吃"
console.log(a) } } })
大家可以看到v-on是给元素绑定方法，我们可以用在点击事件上，通过函数来改变事件的状态。
7. v-show 根据表达值的真假，切换元素的显示和隐藏
- v-show 指令的作用是：根据真假切换元素的显示状态
- 原理是修改的display,实现显示隐藏
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
- 数据改变之后，对应元素的显示状态会同步更新
<div id="app">
<input type="button" value="切换显示状态" @click="changeisshow">
<img v-show="isshow" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1583550568&di=9f26c500905d03a953d52a323e284041&src=http://pics7.baidu.com/feed/7aec54e736d12f2e60660804b070c264843568a8.jpeg?token=0359d5596c68e93e4ffb6615e0340093&s=FA64C14EC62000BE9F34DCB20300D010"alt=""> <img v-show="age>18" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1583550568&di=9f26c500905d03a953d52a323e284041&src=http://pics7.baidu.com/feed/7aec54e736d12f2e60660804b070c264843568a8.jpeg?token=0359d5596c68e93e4ffb6615e0340093&s=FA64C14EC62000BE9F34DCB20300D010"alt=""> </div>
<script>
var app = new Vue({
el: "#app",
data: {
isshow:false,
age:18
},
methods: {
changeisshow:function(){
this.isshow=!this.isshow
}
}
})
</script>8. v-if 根据表达式的真假，切换元素的显示和隐藏
- 本质是通过操作dom元素来切换显示状态
- 表达式的值为true，元素存在于dom树中，为false从dom树中移除
- 频繁的切换v-show,反之使用v-if，前者的切换消耗小
<div id="app">
<input type="button" @click="changeishsow">
<p v-if="isshow"> 世界真好</p>
<p v-if="tempture>35"> 世界真好</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isshow: false,
tempture:15
},
methods: {
changeishsow: function () {
this.isshow=!this.isshow
}
}
})
</script>9. v-bind 设置元素的属性
- v-bind:属性名=表达式
- v-bind指令的作用是：为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind,只保留 ：属性名
- 需要动态的增删class建议使用对象的方式
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgurl" alt="">
<img :src="imgurl" alt="" :title="title" :class="isActive?'active':''" @click="change"> <img :src="imgurl" alt="" :title="title" :class="{active:isActive}" @click="change">
</div> <script>
var app = new Vue({
el: "#app",
data: {
imgurl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583570751554&di=5f741b5931cbe03e392b8e0a3499ca78&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201410%2F20%2F20141020152020_n2Yeh.jpeg',
title:"您好,世界",
isActive:false
},
methods: {
change:function(){
this.isActive=!this.isActive
}
}
})
</script>10. v-for 根据数据生成列表结构
- v-for指令的作用是；根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index)in 数据
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
提示：大家记得引入vue
有两种版本，在开发的时候，建议使用开发环境，因为我们代码出错，它会给我们提示，如果项目上线，建议使用生产环境版本，因为它是压缩过了的，体积小。
结语：今天梳理了这些，明天再接再厉！希望大家也能够在前端学习的路上一起加油！
