vue指令系统

一、vue基础

使用vue需在官网上先下载vue.js，网址：https://cn.vuejs.org/v2/guide/installation.html。然后：

在project中引入vue.js
vue实例化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script> <!--引入vue.js文件-->

</head>

<body>

<div id="app">{{info}}</div> <!--模版语言渲染数据-->

<script>

   var vm = new Vue({

       el:'#app', //目标区域

       data:{

           //数据属性

           info:'hello world!'

       }

   })

</script>

</body>

</html>

　　当进行实例化后，传入一个选项对象，其中以key-value存在的键值对，像el对象的就是所要操纵的区域，还有data数据属性对象。在将data中的数据渲染到页面上时需要使用vue中的模板语言（插值）。

#文本

{{ msg }}

#用 JavaScript 表达式

{{ number + 1 }}

{{ 3>2 ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

#注意，if条件语句是不行的

二、指令系统

vue中的指令是有着“v-”开头的特殊前缀，常用的指令有：

v-text

v-html

v-if

v-show

v-for

v-bind

v-on

1、v-if

<div id="app">

    <p v-if="seen">v-if</p>

</div> 

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            seen:true

        }

    })

</script>

此时页面输出是可以看到v-if的，因为在data对象属性中，seen的值为true，如果：

...

seen:false

...

不显示内容

另外，也可以在v-if中添加v-else进行条件渲染：

<div id="app">

    <p v-if="seen">v-if</p>

    <p v-else>no</p> //如果seen:false显示

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            seen:true

        },

    })

</script>

v-else-if，可以进行多次条件判断：

<div id="app">

    <div v-if="type === 'A'">

        A

    </div>

    <div v-else-if="type === 'B'">

        B

    </div>

    <div v-else-if="type === 'C'">

        C

    </div>

    <div v-else>

        Not A/B/C

    </div>

</div>

 var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            type:'B'

        },

2、v-show

它与v-if相似，根据条件展示元素，用法大致一样：

<div id="app">

    <p v-show="seen">可以看见我吗？</p>

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            seen:true

        }

    })

</script>

v-show 只是简单地切换元素的 CSS 属性 display，
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3、v-on

　　为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法，例如下面通过v-on指令绑定事件，从而修改seen的值，达到前端是否显示v-if的内容。

<div id="app">

    <p v-if="seen">v-if</p>

    <button v-on:click="ifSeen">切换</button>

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            seen:true

        },

        methods:{

            //声明事件

            ifSeen:function(){

                this.seen=!this.seen//修改data中seen的值,this表示vm对象

            }

        }

    })

</script>

4、v-bind

动态地绑定一个或多个特性

<div id="app">

 <!--动态绑定，数据根据data中的来填充-->

    <p v-show="seen" v-bind:title="title">可以看见我吗？</p>

    <img v-bind:src="data:imageSrc"><!--可以简写<img :src="data:imageSrc">-->

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            seen:true,

            title:"我是title",

            imageSrc:"./1.jpg"

    }

    })

</script>

动态的绑定class属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script> <!--引入vue.js文件-->

</head>

<style>

    .box1{

        background: aqua;

        width: 300px;

        height: 200px;

    }

    .box2{

        background: red;

        width: 300px;

        height: 200px;

    }

</style>

<body>

<div id="app">

    <div class="box1" v-bind:class="{box2:isRed}"></div> <!--如果isRed为true那么class中就会有box1、box2-->

    <button v-on:click="changeColor">切换颜色</button>

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            isRed:true

        },

        methods:{

            changeColor:function () {

                    this.isRed = !this.isRed

            }

        }

    })

</script>

</body>

</html>

上述是对象语法，还有数组语法：

//可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {

  activeClass: 'active',

  errorClass: 'text-danger'

}

//渲染为：

<div class="active text-danger"></div>

动态绑定style样式属性

#对象语法

<div id="app">

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">你好</div>

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            activeColor:'red',

            fontSize:30

        }

    })

</script>

#或者

<div id="app">

    <div v-bind:style="styleObject">你好</div>

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            styleObject:{

                color: 'red',

                fontSize: '20px'

            }

        }

    })

</script>

上述是style的对象语法，还有数组语法：

#v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

#<div v-bind:style="[baseStyles, overridingStyles]"></div>

<div id="app">

    <div v-bind:style="[baseStyles, overridingStyles]">你好</div>

</div>

<script>

    var vm = new Vue({

        el:'#app', #目标区域

        data:{

            #数据属性

            baseStyles:{

                color: 'red',

                fontSize: '50px'

            },

            overridingStyles:{

                color: 'green'

            }

        }

    })

</script>

5、v-for

　　v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">

  <li v-for="item in items">

    {{ item.message }}

  </li>

</ul>

var example1 = new Vue({

  el: '#example-1',

  data: {

    items: [

      { message: 'Foo' },

      { message: 'Bar' }

    ]

  }

})

另外，v-for中还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">

  <li v-for="(item, index) in items">

    {{ parentMessage }} - {{ index }} - {{ item.message }}//index是从0开始

  </li>

</ul>

var example2 = new Vue({

  el: '#example-2',

  data: {

    parentMessage: 'Parent',

    items: [

      { message: 'Foo' },

      { message: 'Bar' }

    ]

  }

})

v-for还支持遍历对象：

new Vue({

  el: '#v-for-object',

  data: {

    object: {

      title: 'How to do lists in Vue',

      author: 'Jane Doe',

      publishedAt: '2016-04-10'

    }

  }

})

获取对象的属性

<ul id="v-for-object" class="demo">

  <li v-for="value in object">

    {{ value }} //获取值   {{ name }}: {{ value }} //获取键值和值  {{ index }}. {{ name }}: {{ value }}  //获取索引、键值和值

</li> </ul>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script> <!--引入vue.js文件-->

</head>

<style>

    .box{

        width: 400px;

        height: 200px;

    }

   ul{

       list-style: none;

   }

    li{

        float: left;

        width: 30px;

        height: 20px;

        background: blueviolet;

        margin-left: 15px;

        text-align: center;

        color: white;

    }

</style>

<body>

<div id="app">

    <div class="box">

        <img v-bind:src="currentSrc" v-on:mouseenter="closeTimer" v-on:click="openTimer">

        <ul>

            <li v-on:click="preImg" style="width: 50px ">上一张</li>

            <li v-for="(item,index) in imgArr" v-on:click="selectImg(item)">{{item.id}}</li>

            <li v-on:click="nextImg" style="width: 50px ">下一张</li>

        </ul>

    </div>

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            imgArr:[

                {id:1,src:'1.jpg'},

                {id:2,src:'2.jpg'},

                {id:3,src:'3.jpg'},

            ],

            currentSrc:'1.jpg',

            currentIndex:0,//用于点击上一张和下一张使用

            timer:null,//用于接收定时器对象，用于关闭定时器对象

        },

        created(){

            //设置定时器，每2s进行轮播

          this.timer=setInterval(this.nextImg,2000)

        },

        methods:{

            selectImg:function (item) {

                //点击图片下面的数字进行切换

                this.currentSrc=item.src;

            },

            nextImg:function () {

                //切换到下一张图片

                if(this.currentIndex==this.imgArr.length-1){

                    this.currentIndex=-1

                }

                this.currentIndex++;

                this.currentSrc=this.imgArr[this.currentIndex].src;

            },

            preImg:function () {

                //切换到上一张图片

                if(this.currentIndex==0){

                    this.currentIndex=this.imgArr.length

                }

                this.currentIndex--;

                this.currentSrc=this.imgArr[this.currentIndex].src

            },

            closeTimer:function () {

                //鼠标放置在图片上，关闭定时器

                clearInterval(this.timer)

            },

            openTimer:function () {

                //鼠标移开图片开启定时器

                this.timer=setInterval(this.nextImg,2000)

            }

        }

    })

</script>

</body>

</html>

实现简单的轮播图效果

6、v-html

用于解析html标签

<div id="app">

    <div>{{str}}</div>

</div>

<script>

    var vm = new Vue({

        el:'#app', //目标区域

        data:{

            //数据属性

            str:'<p>I am a tag!</p>'

        }

    })

</script>

//输出 含有p标签

<p>I am a tag!</p>

如果使用v-html

<div id="app">

    <div v-html="str">{{str}}</div>

</div> 

//输出 不含p标签

I am a tag!