3.vue语法

关注
原创最新推荐文章于 2026-03-09 00:18:38 发布 904 阅读 AI 写同款· GEO 优化 ›
在一个使用vue框架的页面应用程序中，至少要创建一个Vue实例，语法为 new Vue(),vue实例充当了MVVM模式中的ViewModel。创建vue实例时，需要传入一个选项对象，该对象可以包含数据、方法、组件生命周期钩子等。

1.第一个实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入Vue的包（可以官方下载）-->
    <script src="../JS/vue.js"></script>
    <title>第一个vue程序</title>
</head>
<body>
<!-- 将来new出来的vue实例会控制这个元素中的所有内容   这也是MVVM中的V-->
<div id="app">{{ message }}</div>
<script>
    //创建一个Vue的实例
    // 当我们导入包之后，启动浏览器，然后在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var  vm  = new Vue({
        el: '#app', // el表示，当前我们 new 的这个 Vue 实例，
        //要控制页面上的哪个区域(也就是数据要绑定页面上的哪个值)(也可以叫做挂载)
        // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
        data: { // data 属性中，存放的是 el 中要用到的数据
        // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，
            message: 'Hello vue!'
            //程序员不再手动操作DOM元素了
            //【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
        }
    });
</script>
</body>
</html>

//另一种挂载方式：
var vm = new Vue({....}).$mount("#app");


2.插值：
{{message}} ->双花括号（也被叫做胡子语法） 用来表示文本插值
1.mustache 标签会替换为vue实例中数据对象上message属性的值。只要绑定的数据对象上
message属性发生了改变，插值处的内容就会被更新
2.mustache语法不能作用于HTML元素的属性上，要解决HTML元素属性值的绑定问题，
需要使用v-bind指令
3.mustache语法不能直接输出HTML元素，会将这些HTML元素当成文本输出出去，所以如果我
们真的想要输出HTML标签就需要使用V-html指令了
4.除了支持简单的绑定属性值外，对于所有的数据绑定，vue.js还提供了完全的
javascript表达式，所以我们还可以在mustache语法中使用表达式，如下：
{{a+b}}，{{isLogin?username:'not login'}},
{{message.split('').reverse().join('')}}，等。。。
5.插值表达式如果使用if()等语句或者是声明变量等，则不会生效，
会被当成字符串输出出去，如：{{var a =1}},{{if(ok){return message}}}


3.指令：
1.指令是带有v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，
当表达式的值发生改变，将这个变化反映到DOM上。
2.在DOM中使用模板时（直接在一个HTML文件里编写模板），
还需要避免使用大写字符来命名动态参数，这是因为浏览器会把元素的属性名全部转换为
小写字符
3.在vue.js 2.6.0版本开始，指令的参数可以是动态参数，语法为指令:[js表达式]，如下：
    <a v-bind:[attribute]="url">新浪网</a> 这里的attribute
    会被当做一个JavaScript的表达式进行动态求值，求得的值将作为最终的参数来使用
    假设vue实例中有一个数据对象属性为attribute，其值为href，那么这个绑定将等价于
    v-bind：href。如果attribute的值计算为null，那么这个绑定值将会被移除，
    最后的渲染效果如下：
            <a>新浪网</a>


4.指令详解：
指令是带有v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，当表达式的值发生改变时，将其产生的连带影响应用到DOM上
4.1.内置指令：

v-show：
v-show指令根据表达式的值的真假，来显示或者隐藏HTML元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-show</title>
</head>
<body>
<!--使用v-show时，我们可以看到元素本身是要被渲染出来的，
但是显示与否都是通过css样式属性display来控制的
，如果表达式的值计算为false，则样式会被设置为"display:none;",
如果计算出是true则不会。
-->
<div id="app">
    <h1 v-show="yes">yes！</h1>
    <h1 v-show="no">no！</h1>
    <!-- v-show中还可以使用js表达式来判断 -->
    <h1 v-show="age>25">age: {{age}}</h1>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            yes: true,
            no: false,
            age: 28
        }
    });
</script>
</body>
</html>



v-if / v-else-if / v-else:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-if、v-else-if、v-else</title>
</head>
<body>
<!--使用v-if、v-else-if、v-else这三个指令用于实现条件判断
v-if:和v-show效果相同，但是当我们打开控制台时，可以看到当表达式结果为false的时候，
我们可以看到结果为false的元素并没有生成
v-if和v-show的区别:
v-show是会渲染表达式结果为false的元素，只不过会将该元素的css样式设置为"display:none;"，
而v-if则不会生成相应元素
使用区别：v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，
如果需要非常频繁的切换元素，则使用v-show较好，如果在
运行时条件很少改变，则使用v-if较好

v-else-if、v-else：这两者都是和v-if一起使用的，可以实现互斥的条件判断

-->
<div id="app">
    <h1 v-if="yes">yes！</h1>
    <h1 v-if="no">no！</h1>
    <!-- v-if中也可以使用js表达式来判断 -->
    <h1  v-if="age>200">年龄是：{{age}}</h1>
    <h1 v-else="age>100">age: {{age}}</h1>
    <h1 v-else-if="age>50">年龄为：{{age}}</h1>

</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            yes: true,
            no: false,
            age: 28
        }
    });
</script>
</body>
</html>

需要注意的是当一个条件满足，后续的条件都不会再判断，
使用时，v-else-if和v-else要紧跟v-if



关于元素复用：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue元素复用</title>
</head>
<body>
<script src="../JS/vue.js"></script>
<!--vue底层会为了性能进行输入框复用（想验证的话可以在输入框输入一些数据
然后点击切换，会发现输入框里的数据未被清空）
        所以，如果我们不想进行一些元素的复用，可以给他单独设置一个key
        （key相同代表可以复用，key不相同代表不可以复用）
-->
<div id="app">
    <span v-if="type">
        <label>用户账号：</label>
        <input placeholder="用户账号" key="username">
    </span>
    <span v-else>
        <label>邮箱账号：</label>
        <input placeholder="邮箱账号" key="email">
    </span>
    <button @Click="type = !type">切换按钮</button>
</div>
<script>
    const app=  new Vue({
        el:'#app',
        data:{
            type:true
        }
            // ,
        // methods: {
        //    clicktype() {
        //        this.type= this.type === 'email' ? 'username' :'emails'
        //    }
        // }
    })
</script>
</body>
</html>



v-for：
v-for顾名思义就是通过循环的方式来渲染一个列表，循环的对象可以是数组，也可以是对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-for</title>
</head>
<body>
<!--使用v-for进行循环遍历
  1.表达式语法为item in items，其中items是源数据数组，而item是被迭代的数组元素的别名
  2.v-for中的in也可以使用of来替代: <li v-for="item of movies">{{item}}</li>
  3.v-for中的表达式还支持一个可选的参数作为当前项的索引
  4.vue的核心是数据与视图的双向绑定，为了监测数组中元素的变化，以便能及时将变化反应到视图中，
    vue对数组的一些方法做了变异方法(也就是当数组用以下方式进行改变时，页面的数据跟着变化)：
     4.1.push()
     4.2.pop()
     4.3.shift()
     4.4.unshift()
     4.5.splice()
     4.6.sort()
     4.7.reverse()
    数组中还有一些非变异方法：如filter(),concat()和slice(),它们不会改变原始数组，
    而是会返回一个新数组，面对这种方法时要想让vue帮我们更新视图，可以使用新数组替换原来的数组。
  5.vue检测到数组变化时，并不会直接重新渲染整个列表，而是会最大化的复用DOM元素，所以替换数组时，
    含有相同元素的项不会被重新渲染，所以我们可以大胆的使用新数组替换旧数组，而不用担心性能问题。
  6.有些方法导致数组发生变动，vue是不能检测到的：
    6.1.vm.movies[0] = e (根据数组下标来进行值的改变)
    6.2.vm.movies.length = 2 (修改数组的长度)
      如果要解决这种问题，我们可以使用以下的两种方式:
    6.1.1.Vue.set(vm.movies,0,"e") (使用Vue的全局set()方法） 等同于 vm.$set(vm.movies,0,"e")
    6.1.2.vm.movies.splice(0,2,"e") （使用数组原型的splice()方法）
      关于改变数组长度的问题，我们也可以使用数组原型的splice方法来解决：
    6.2.1：vm.movies.splice(2)
  7.过滤和排序问题：
    有时想要显示一个数组经过过滤和排序后的版本，但实际上不想改变原始数据的值，这种时候我们可以使用就算属性来
    帮我们完成这件事(如果计算属性不适用的情况下，我们也可以写一个方法进行)
  8.有关于v-for遍历对象：
    遍历对象的语法形式和遍历数组是一样的，即 value in object，其中object是被迭代的对象，vue是被迭代的对象
    属性的别名。如果要获取对象的属性名，可以使用可选参数的属性名参数(也就是键名)作为第二个参数，
    还可以用index作为第三个参数
  9.关于对象的更新检测：
    vue不能检测对象属性的添加和删除。要解决这个问题，可以使用vue全局的set()和delete()方法来添加或删除属性($set
    和$delete同理)，并触发视图更新
    9.1.Vue.set(vm.book,'publishData','2020-12-28')
    9.2.Vue.delete(vm.book,'name')
  10.在<template>上使用v-for:
     类似于v-show和v-if，也可以利用v-for指令来让<template>来循环渲染一堆包含多个元素的内容
  11.有关于v-for中的key属性：
     当vue正在更新使用v-for渲染的元素列表时，它默认使用的是"就地更新"策略。如果数据项的顺序被改变，vue将不会移动
     DOM元素来匹配数据项的顺序，而是就地更新每个元素，并保证它们在每个索引位置正确渲染。所以我们为了给vue一个提示，
     以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为列表的每一项提供一个唯一key属性，key属性的类型
     只能是String或者Number类型
  12.v-for和v-if一同使用时：
   v-for的优先级比v-if高，这意味着v-if将分别重复运行于每个v-for循环中。如果渲染一个列表时，对列表中的某些项需要
   根据条件来判断是否要渲染，那么就可以将v-if和v-for一起使用(说白了就是v-if和v-for可以一起使用)
-->
<div id="app">
    <li v-for="(item,index) in movies">{{index}}-》{{item}}</li>
    <button @Click="btnClick">修改</button>
    <br>
    <li v-for="number in evenNumbers">{{number}}</li>
    <br>
    <li v-for="n in even(numbers)">{{n}}</li>
    <br>
    <!--vue中还可以这样接受整数，它会把模板重复对应的次数-->
    <li v-for="num in 10">{{num}}</li>
    <hr>
    <li v-for="value in book">{{value}}</li>
    <br>
    <li v-for="(value,key) in book">{{key}}:{{value}}</li>
    <br>
<div>
    <ul>
        <!--如果决定要根据某个条件跳过整个循环的执行，那么可以将v-if置于外层元素(比如template)上 -->
        <template v-for="item,index in 5" v-if="item != 5">
            <div v-if="item != 2">{{index}}---{{item}}</div>
        </template>
    </ul>
</div>
    <br>
    <li v-for="(item,index) in numbers" v-if="item != 1">{{index}}-》{{item}}</li>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            movies: ["a", "b", "c", "d"],
            numbers: [1, 2, 3, 4, 5],
            book:
                {
                    name: "vue从入门到实战",
                    author: "孙鑫"
                },
            books: [
                {
                    name: "深入理解jvm",
                    author: "孙鑫1"
                },
                {
                    name: "深入理解vue",
                    author: "孙鑫2"
                },
                {
                    name: "深入理解微服务",
                    author: "孙鑫3"
                }
            ]

        },
        //计算属性的形式
        computed: {
            evenNumbers: function (numbers) {
                return this.numbers.filter(function (number) {
                    //  能取模干净的值
                    return number % 2 === 0
                })
            },
            nameEquals: (name) => {
                return name == "孙鑫2"
            }
        },
        //方法的形式
        methods: {
            even: function (numbers) {
                return this.numbers.filter((number) => {
                    return number % 2 === 0
                })
            },
            //Vue.set()的赋值测试
            btnClick() {
                //两者都可以
                // Vue.set(this.movies, 0, "e")
                this.$set(this.movies, 0, "e")
            }
        }

    });
</script>
</body>
</html>



v-bind:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind</title>
</head>
<body>
<!--
   1.v-bind主要是用于更新HTML元素的属性，将一个或者多个属性或者一个组件的prop动态绑定到表达式
   2.v-bind指令还可以直接绑定一个有属性的对象
-->
<div id="app">
    <!--绑定一个属性-->
    <img v-bind:src="imgSrc" >
    <!--语法糖-->
    <img :src="imgSrc" >
    <!--动态属性名(2.6.0以后才支持)-->
    <a :[attrName]="url">链接</a>
    <!--内联字符串拼接-->
    <img :src="'images/'+fileName" >
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
           imgSrc: 'images/img.jpeg',
            attrName:'href',
            url:'https://fanyi.baidu.com/?aldtype=16047#en/zh/',
            fileName:'img.jpeg'
        }
    });
</script>
</body>
</html>



v-model:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-model</title>
</head>
<body>
<!--
    v-model指令用在表单<input>,<textarea>及<select>元素上创建双向数据绑定，它会根据控件类型自动获取
    正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对
    某些极端场景进行特殊处理

-->
<div id="app">
    <h3>{{message}}</h3>
    <input type="text" v-model="message">
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        }
    });
</script>
</body>
</html>


v-on:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-on</title>
</head>
<body>
<!--
    1.v-on指令用于监听DOM事件，并在触发时运行一些javaScript代码。v-on指令的表达式可以是一段javaScript代码，
      也可以是一个方法或者方法调用语句。
    2.方法是在选项对象的methods属性中定义的，该属性是一个对象属性。在methods属性中定义的方法，可以直接通过Vue
      实例来访问
    3.在开发中尽量不要使用javaScript语句，尽量使用方法的形式
    4.在页面渲染中，并不会在v-on指令所在的元素上出现对应的javaScript事件属性
    5.当vue实例销毁时，所有事件处理器都会被自动删除，所以无需担心如何清理它们
    6.如果在事件绑定的方法中需要访问原始的DOM事件，可以使用特殊变量$event把它传入方法。在使用v-on指令绑定事件
      处理时，就可以使用$event传入原始的DOM事件对象，然后在事件处理器方法中访问原生的事件对象。
    7.事件修饰符：
      事件修饰符是由（.）开头的指令后缀来表示，紧接在事件名称后书写。针对v-on指令，vue还提供了以下的修饰符：
      7.1:.stop：调用event.stopPropagation()（阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。阻止事件继续传播）
      7.2:.prevent:调用event.preventDefault()（通知浏览器不要执行与事件关联的默认动作）
      7.3:.capture:添加事件监听器时使用capture模式（.capture事件修饰符的作用是添加事件侦听器时使用事件捕获模式
          即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。
          若有多个该修饰符，则由外而内触发，就是谁有该事件修饰符，就先触发谁。 ）
      7.4:.self:只当事件是从特定的元素本身触发时才触发回调
      7.5:{keyCode|keyAlias}:只当事件是从特定按键触发时才会触发回调。
      7.6:.native监听组件根元素的原生事件
      7.7:.once:只触发一次回调
      7.8:初次之外还有一些需要在vue.js的版本在2.2.0以上时才会有
          .left:只当按鼠标左键时触发
          .right:只当按鼠标右键时触发
          .middle:只当按鼠标中键时触发
          .passive:以{passive:true}模式添加侦听器(2.3.0版本)
      7.9.样例:
           //阻止事件继续传播
           <a @click.stop="doThis"/>
           //提交事件不再重新加载页面
           <from v-on:submit.prevent="onSubmit"></from>
           //修饰符是可以串联的
           <a @click.stop.prevent=“doThis”/>
           //也可以只有修饰符
           <from v-on:submit.prevent></from>
           //添加事件监听器时使用事件捕获模式
           //即内部元素触发事件先在该事件处理函数中处理，然后交由内部元素进行处理
           <div v-on:click.capture="doThis">...</div>
           //只当在event.target是当前元素本身时触发函数
           //即事件不是从内部元素触发的
           <div v-on:click.self="doThis">...<div>
           //单击事件处理函数将只执行一次
           <a v-on:click.once="doThis"></a>
      7.10：需要说明的是：
        7.10.1：DOM事件规范支持两种事件模型，即捕获事件和冒泡型事件，捕获型事件从最外层的对象（window）开始，
                知道引发事件的对象;冒泡型事件从引发事件的对象开始，一直向上传播，直到最外层的对象结束。任何发生在
                DOM事件模型中的事件，首先进入捕获阶段，直到最外层对象结束。任何发生在DOM事件模型中的事件，首先进入
                捕获阶段，直到达到目标对象，再进入冒泡阶段。v-on指令提供.stop和.capture修饰符即与此有关。
        7.10.2：修饰符可以串联在一起使用，但顺序很重要。例如，使用v-on:click.prevent.self会阻止所有的单击，而
                v-on:click.self.prevent只会阻止对元素自身的单击
        7.10.3：如果某个时间只需要响应一次，可以使用.once修饰符
    8.按键修饰符：
        .enter
        .tab
        .delete
        .esc
        .space
        .up
        .down
        .left
        .right
      在2.1.0版本中新加：
        .ctrl
        .alt
        .shift
        .meta
      8.1：样例:
           //只有在按键是回车键时调用
           <input @keyup.enter="submit">
           //使用回车键的按键码(有的按键没有现成的时候，我们可以通过按键码来这样做)
           <input v-on:keyup.13="submit">
           //.exact修饰符是2.5.0中新增的，用于精确控制系统修饰符组合触发的事件
           //只有在按住ctrl键而不按其他按键时才会触发
           <button @click.ctrl.exact="onCtrlClick">A</button>
-->
<div id="app">
    <h1>{{count}}</h1>
  <!--1.click事件直接使用javaScript语句-->
   <button @Click="count += 1">添加</button>
    <!--2.click事件使用内联语句调用方法-->
    <button @Click="say('hi')">弹窗</button>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },methods:{
            say(msg){
                alert(msg)
            }
        }
    });
</script>
</body>
</html>



v-text:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-text</title>
</head>
<body>
<!--
   1.v-text元素用来更新元素的文本内容
   2.如果只是更新部分文本内容，那么还是用{{Mustache}}插值形式
-->
<div id="app">
    <span v-text="message"></span>
   <!-- 等价于<span v-text>{{message}}</span> -->
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
           message:"HEllO Vue.js"
        }
    });
</script>
</body>
</html>



v-html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-html</title>
</head>
<body>
<!--
   1.v-html指令用于更新元素的innerHTML，该部分内容作为普通的HTML代码插入，不会作为Vue模板进行编译。
   2.在网站上渲染任意的HTML内容是十分危险的，因为容易导致XSS攻击。所以只在可信的内容上使用v-html，永远不要在用户
     提交的内容上使用v-html
-->
<div id="app">
<div v-html="hElt"></div>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
           hElt:"<h1>HEllO Vue.js</h1>"
        }
    });
</script>
</body>
</html>



v-once:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-once</title>
</head>
<style>
    a {
        margin: 20px;
    }
</style>
<body>
<!--
   1.v-once指令可以让元素或组件只渲染一次，该指令不需要表达式。之后再次渲染时，元素/组件及其所有的子节点将被视为
     静态内容并跳过。这可以用于优化更新性能。
   2.具体渲染效果：表面上是没有任何区别的，但是实际上，我们可以在浏览器的console窗口输入下面的语句回车测试
     vm.navs.push({name:'论坛',url:'/bbs'})
     你会发现页面没有任何变化，这就是v-once指令的作用，只渲染一次，渲染的结果在之后将作为静态内容而存在
-->
<div id="app">
    <h1>{{title}}</h1>
    <a v-for="nav in navs" href="nav.url" v-once>{{nav.name}}</a>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            title:"v-once指令的用法",
            navs:[
                {name:'首页',url:'/home'},
                {name:'新闻',url:'/news'},
                {name:'视频',url:'/video'}
            ]
        }
    });
</script>
</body>
</html>



v-pre:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-pre</title>
</head>
<body>
<!--
   1.v-pre指令也不需要表达式，用于跳过这个元素和它的子元素的编译过程。v-pre指令可以用来显示原始的
     Mustache标签，对于大量没有指令的节点使用v-pre指令可以加快编译的速度
-->
<div id="app">
    <h1 v-pre>{{message}}</h1>
   <!-- 等价于<span v-text>{{message}}</span> -->
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
           message:"HEllO Vue.js"
        }
    });
</script>
</body>
</html>



v-cloak：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-cloak</title>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
<!--
   1.v-cloak指令也不需要表达式，这个指令保持在元素上直到关联实例编译结束，编译结束后该指令被移除。当和
     CSS规则如: [v-clock]{display:none} 一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕
   2.浏览器在加载页面时，如果网速较慢或者页面较大，那么浏览器在构造完DOM树后会在页面中直接显示{{message}}字样，
     直到vue的js文件加载完毕，vue实例创建，模板编译后，{{message}}才会被替换成数据对象中的内容。这个过程中页面
     是会有闪烁的，这样用户体验不好，所以我们可以加上一项css规则：[v-cloak]{ display: none;}，配合v-cloak
     指令一起使用，就可以解决这个问题
-->
<div id="app">
    <h1 v-cloak>{{message}}</h1>
   <!-- 等价于<span v-text>{{message}}</span> -->
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
           message:"HEllO Vue.js"
        }
    });
</script>
</body>
</html>


自定义指令：
全局自定义指令：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-全局注册组件</title>
</head>
<body>
<!--
     自定义指令需要注册后才能使用，vue提供了两种注册方式：
       1.全局注册：
         1.1.全局注册使用 Vue.directive()方法来注册一个全局自定义指令，该方法接受两个
         参数，第一个参数是指令的ID（即名字）;第二个参数是一个定义对象或者函数对象，
         指令要实现的功能在这个对象中定义。
         //语法如下：Vue.directive(id,[definition]])，
         指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀
           全局注册的组件可以在任何Vue实例的模板中使用
           所有自定义组件的第二个函数还可以有其他的值，并且支持动态指令参数
-->
<div id="app" class="demo">
    <!-- 全局注册 -->
    <input type="text" placeholder="我是全局自定义指令" v-focus>
</div>
<script>
    Vue.directive("focus", {
        inserted: function(el){
            el.focus();
        }
    })
    new Vue({
        el: "#app"
    })

</script>
</body>
</html>


局部自定义组件：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-局部注册组件</title>
</head>
<body>
<!--
     自定义指令需要注册后才能使用，vue提供了两种注册方式：
       1.局部注册：
         1.1.局部注册的自定义指令只能在该实例绑定的视图中使用。
         所有自定义组件的第二个函数还可以有其他的值，并且支持动态指令参数
-->
<div id="app" class="demo">
    <!-- 局部注册 -->
    <input type="text" placeholder="我是局部自定义指令" v-focus2>
</div>
<script>
    new Vue({
        el: "#app",
        directives: {
            focus2: {
                inserted: function(el){
                    el.focus();
                }
            }
        }
    })
</script>
</body>
</html>



自定义指令的钩子函数：
自定义指令的功能是在定义对象中实现的，而定义对象则是由钩子函数组成的，
vue提供了以下几个钩子函数，这些钩子函数都是可选的。
  1.bind:只调用一次，指令第一次绑定到元素时调用。
    指令如果需要一些一次性的初始化设置，可以放在这个钩子函数中。
  2.inserted:被绑定元素插入父节点时调用(父节点存在即可调用，不比存在于document
  对象中)
  3.update:所在组件的VNode更新是调用(无论指令的值是否发生了变化)，但是可能发生
  在其子VNode更新之前。可以通过比较更新前后的值来忽略不必要的模板更新。
  4.componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用。
 5.只调用一次，指令与元素解绑时调用