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常用的指令。