一、如何使用vue

1、引入vue.js

vue靠redis启动 vue操作redis_自定义指令

2、展示HTML

<div id="app">

    <p>{{msg}}</p>

    <p>{{ 80+2 }}</p>

    <p>{{ 20>30 }}</p>

</div>

3、建立一个vue对象

<script>

    new Vue({

        el:"#app",  //表示当前这个元素开始使用vue

        data:{

            msg:"你好啊"

        }

    })

</script>

vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

二、vue的内置指令

指令

作用

v-show

根据表达式的真假值来显示和隐藏元素

v-html

插入标签

v-text

在元素中插入值

v-if和v-else

格局表达式的真价值来显示为何隐藏元素

v-for

根据变量的值来循环渲染元素

v-bind

绑定元素的属性并执行相应的操作

v-on

监听元素事件并执行相应操作

v-model

把input的值和变量绑定了，实现了数据和视图的双向绑定

v-once

可以让元素或者组件只渲染一次。一旦绑定数据就不会改变

v-pre

用于跳过这个元素和它的子元素的编译过程。对于大量没有指令的节点使用v-pre指令可以加快编译速度

v-cloak

可以解决初始化慢而导致页面闪动的问题。

三、自定义指令

通过自定义指令，我们可以对DOM进行更多的底层操作，这样不仅可以在某些场景下为我们提供快速解决问题的思路，而且让我们对vue的底层有了进一步的了解。我们可以通过Vue.directive({})或者directives:{}来定义指令

1.通过Vue.directive({})注册全局指令

钩子函数：

(1)bind: 此钩子函数只会被调用一次，可以定义一个在绑定时执行一次的初始化动作

     (2)inserted: 当被绑定的元素插入到父元素中是低调用（此处的父元素不局限于document中）

    (3)update: 不论被绑定的值是否发生了变化，在更新时都会被调用，

    (4)componentUpdated:被绑定的元素在模板完成一次更新周期时调用，

    (5)unbind: 只调用一次，元素解绑时调用

参数： 

(1)el: 指令所绑定的DOM元素，可以直接用来操作DOM

(2)binding: 一个对象，包含以下属性

     name: 指令的名称

     value： 指令绑定的值

     oldValue: 指令绑定前一个值

     expression: 绑定值的字符串形式

     arg： 传给指令的参数

     modifiers: 这是一个包含修饰符的对象

<div id="app">
        <p>页面载入时，input元素自动获取焦点</p>
        <input v-focus> <!--使用的时候要添加‘v-’ -->
    </div>
   <script>
    //注册一个全局自定义指令v-focus
       Vue.directive('focus',{//focus名字可以自己来定义
        // 当元素绑定到DOM 中
           inserted:function(el){//inserted是钩子函数：的那个绑定的元素插入到父元素时触发；el参数代表的是指令绑定的元素
               el.focus()//el元素获得焦点
           }
       })
    //    创建实例
       new Vue({
           el:'#app'
       })
   </script>

vue靠redis启动 vue操作redis_自定义指令_02

2、通过directives:{}注册局部指令：

注意：此处自定义的指令只能在app这个div里面使用

<div id="app">
        <p>页面载入时，input元素自动获取焦点</p>
        <input v-focus> <!--使用的时候要添加‘v-’ -->
    </div>
   <script>
//    创建一个实例 
    new Vue({
        el:"#app",
        directives:{
            focus:{
                inserted: function(el){
                    el.focus()
                }
            }
        }
    })
   </script>

vue靠redis启动 vue操作redis_自定义指令_02