vue基础之vue的常用指令

1.vue指令的使用前提

el挂载点

作用:el是用来设置Vue实例挂载（管理）的元素
几个疑问：
Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器？
可以，但是实际开发时选择id选择器
是否可以设置其他的dom元素？
可以，但是只能支持双标签（闭合标签），而且还不能使用在HTML和body上

{{message}}<h1 id="app" class="app">{{message}}<span>{{message}}</span></h1><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",//这是id选择器//el:".app",//这是类选择器//el:"div",//这是标签选择器//el:'#body',data:{message:"脱发程序员"}})</script>

data:数据对象

Vue中用到的数据定义在data中
data中可以写复杂的数据类型
渲染复杂类型数据时，遵守js语法即可
示例：


<script>var app = new Vue({el:"#app",data:{message:"你好 Vue",school:{name:"张三",mobile:"453-000"},campus:["上海","广州","深圳","北京"]}})</script>

2.什么是vue指令

Vue 指令就是以 “v-” 开头，作用于 DOM ，为 DOM 添加特殊行为的一种指令。简单的来说就是带有v-前缀的特殊属性。下面开始介绍常见的vue指令。

v-text指令

v-text指令的作用是：设置标签的内容
默认写法替换全部内容，使用差值表达式{{}}可以替换指定内容

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app"><p v-text="message">BOSS</p><h1 v-text="info">小怪</h1><h2>{{input}}哥布林</h2></div><script>var app = new Vue({el:"#app",data:{message:"老板",info:"老怪",input:"小怪变"}})</script>

v-html指令

v-html指令的作用是设置元素的 innerHTML
内容中有html机构会被解析为标签

与v-text的区别是
v-text指令无论内容是什么，只会解析为文本
所以在解析文本时使用v-text,需要解析html结构使用v-html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app"><p v-html="content"></p><p v-text="content"></p></div><script>var app = new Vue({el:"#app",data:{content:"<a href='http://www.qq.com'>腾讯qq</a>"}})</script>

v-on指令

v-on的作用是：为元素绑定事件
事件名不需要写on
指令简写成@
绑定方法定义在methods属性中
注意：methods跟el/data是平级的
方法的内部通过this关键字可以访问定义在 data数据
为元素绑定事件
当用户希望进行一些特定操作时，例如，点击，按键盘，滑动鼠标
前后添加一些自定义的逻辑就可以为对应的元素绑定事件
当数据更改以后页面是同步更新的，所以在v-on中不需要更改dom元素，重点放在更改的数据就可以了

<div id="app"><!-- <input type="button" value="v-on指令" v-on:click="doIt"> --><input type="button" value="v-on简写" @click="doIt"><input type="button" value="双击事件" @dblclick="doIt"><h2 @click="changeFood">{{food}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{food:"西红柿",},methods:{doIt:function(){alert("做it");},changeFood:function(){console.log(this.food);this.food +="好吃！"}}})</script>

v-on指令补充
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上修饰符可以对事件进行限制
enter可以限制触发的按键为回车
事件修饰符有多种

v-show指令

v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值

示例

<div id="app"><input type="button" value="切换显示状态" @click="changeIsShow"><br><br><input type="button" value="累加年龄" @click="addAge"><input type="button" value="减少年龄" @click="moveAge"><img v-show="isShow" src="./img/one world.jpg" alt="miaomiao" style="width: 30%; position: absolute; left: 40%; top: 10%;"><img v-show="age>=19" src="./img/one world.jpg" alt="miaomiao" style="width:30%; position:absolute;left:0; top: 13%;"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:'#app',data:{isShow:false,age:17},methods:{changeIsShow:function(){this.isShow = !this.isShow;},addAge:function(){this.age++;},moveAge:function(){this.age--;}}})</script>

v-if指令

v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操作dom元素来切换显示状态
表达式的值为true,元素存在于dom数中，为false，从dom中移除

<div id="app"><input type="button" value="点击显示" @click="qufan"><p v-if="message">黑马胖子</p><h2 v-text="message2">白马王子</h2><h1 v-if="time<=13">该吃饭了</h1></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:false,time:14,message2:"骑黑马的都是胖子"},methods:{qufan:function(){this.message = !this.message;}}})</script>

v-bind指令

v-bind指令的作用是为元素绑定属性
用法v-bind:属性名=表达式
完整写法是：v-bind：属性名
简写的话可以直接省略v-bind只保留：属性名
示例：
代码中v-bind使用的是简写

<div id="app"><img v-bind:src="imgSrc" :title="imgTitle"><br><br><!-- <a v-bind:href="aHref"></a> --><!-- <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active'':'" @click="toggleActive"> --><img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {imgSrc: "http://www.baidu.com/img/flexible/logo/pc/result.png",// imgSrc:"http://www.itheima.com/images/logo.png"imgTitle: "百度",isActive: false},methodes: {toggleActive: function () {this.isActive = !this.isActive}}})</script>

v-for指令

v-fo是和数据绑定的。
v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in数据其中item表示每一项 index表示索引
数据对应在data:{中}
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

<div id="app"><input type="button" value="添加美食" @click="add"><input type="button" value="删除美食" @click="remove"><ul><li v-for="(it,index) in arr">{{index+1}}地址：{{it}}</li></ul><h2 v-for="item in vagettables" v-bind:title="item.name">{{item.name}}</h2></div><script>var app = new Vue({el:"#app",data:{arr:["郑州","开封","新乡","信阳"],vagettables:[{name:"烧烤"},{name:"烩面"},{name:"羊肉"},{name:"毛尖"}]},methods:{add:function(){this.vagettables.push({name:"蛋炒饭"})},remove:function(){this.vagettables.shift({});}}})</script>

v-model指令

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<—— ——>表单元素的值

什么叫双向呢？
就是一解析以后message的值会同步到我们的表单元素的上面
当我们更改了表单元素的值以后，它也会把我们的这次的更新同步到message上面
双向就是更改两边的任何一边他们都会同步更新对方的值

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app"><input type="text" v-model="message" @keyup.enter="getMessage"><input type="button" value="修改message" @click="setMessage"></div><script>var app = new Vue({el:"#app",data:{message:"黑猫"},methods:{getMessage:function(){alert(this.message);},setMessage:function(){this.message = "变白猫";}}})</script>

以上就是vue常用的指令。