Vue.js语法简介(三)指令

指令是带有v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，当表达式的值发生改变时，将这个变化反映到DOM上

<h5 v-if="true">你能看到我吗？</h5>

这样界面就会出现 “你能看到我吗？” 如果把true改成false那么文字就会消失，后期做项目我们就可以设置变量放到引号当中，通过改变变量来控制消失或者显示。

我们最常使用的指令还得是v-on和v-bind

v-bind指令用于响应式地更新HTML属性，v-on是用来监听DOM事件

比如，我们在做项目的时候，后端传过来一堆数据我们不可能一个一个img src 肯定是用一个组件遍历，搞一个v-bind来监听数据

        <a :href="item.link">
        <img :src="item.image" alt="" />

这是我最近做商城项目中真实用到的，监听href属性，无论后面传来多少数据都可以添加到我们的页面上。而v-on常用来监听点击事件

  <div id="vm">
            {{message}}
        <h5 v-if="true">你能看到我吗？</h5>
        <button v-on:click="Click">点击</button>
    </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#vm",
           data:{
               message:"yang",
           },
           methods:{
               Click(){
                   console.log('-------')
               }
           }
        })
       
    </script>

当我们点击DOM上的按钮时，v-on就会监听到从而执行对应的方法。因为v-bind和v-on指令经常使用，为此，Vue.js为这两个指令提供了简写语法

        <!-- 完整写法 -->
        <a v-bind:href="url">你好世界</a>
        <!-- 简写语法 -->
        <a :href="url">你好世界</a>
        <!-- 完整语法 -->
        <button v-on:click="say"></button>
        <!-- 简写语法 -->
        <button @click="say"></button>

明天再仔细总结一下指令用法吧，今天有些累了。明天见啦