VUE基础 · 绑定（1）

前端三大框架：Angular.js、React.js、Vue.js，目前最热的是Vue，并且使用的热度还在递增中。

Vue已经将操作页面的方法封装好，我们只需要对数据进行修改就可以完成页面的显示。Vue核心思想：只要改变数据，页面就会发生改变

Vue的Js源码库：https://v2.cn.vuejs.org/v2/guide/installation.html

一、导入VUE

<script src="https://unpkg.com/vue/dist/vue.js"></script>

vue实例

el：vue接管的div元素，注：只可以接管一个div，所有需要vue处理的，必须需要这个div内。
data：存放数据
methods：方法

二、标签关联Vue

1、div标签关联vue

<body>

<!--    VUE只能接管一个div-->

<div id="app">

<!--模板语言-->

    {{msg}}

</div>

<!--导入-->

<script src="../js/vue.js"></script>

<!--编写VUE代码-->

<script>

        //创建对象

        new Vue({

            // 接管的标签

            el:'#app',

            //  数据源

            data:{

                msg:'test'

            }

        })

</script>

</body>

展示：

已把msg的值渲染到了页面中

2、input标签关联vue中methods

<body>

<!--    VUE只能接管一个div-->

<div id="app"><input type="button" @click="login" value="登录">

</div>

<!--导入-->

<script src="../js/vue.js"></script>

<!--编写VUE代码-->

<script>

        //创建对象

        new Vue({

            // 接管的标签

            el:'#app',

            //  数据源

            data:{

                msg:'test'

            },

            //存储所有的vue的方法

            methods:{

                login:function () {

                    //this代表Vue这个对象，下边是取到了data中的msg

                    alert(this.msg)

                }

            }

        })

</script>

</body>

展示：

三、指令

带有v-的在vue中叫做指令，就是声明Vue中的指令，指令实际就是vue封装的一些Js操作方法，当数据值发生变更后，将其产生的影响，作用与DOM中，创建的指令v-bind、v-on、v-if、v-for

1、v-on（绑定事件）

全写模式：v-on:click
简写模式：@click（推荐使用）

click对应的方法是：methods中的方法

<body>

<!--    VUE只能接管一个div-->

<div id="app">

<!--模板语言-->

    {{msg}}---{{count+1}}

    <input type="button" @click="login" value="登录">

</div>

<!--导入-->

<script src="../js/vue.js"></script>

<!--编写VUE代码-->

<script>

        //创建对象

        new Vue({

            // 接管的标签

            el:'#app',

            //  数据源

            data:{

                msg:'test',

                count:0

            },

            //存储所有的vue的方法

            methods:{

                login:function () {

                    //this代表Vue这个对象，下边是取到了data中的msg

                    this.msg='v-on方法'

                }

            }

        })

</script>

</body>

点击【登录】前：

点击【登录】后：

2、v-bind（标签属性绑定）

全写模式 v-bind:href
简写模式 :href

可以绑定方法中的data的数据使用

在魔板语言中，我们可以通过 {{ data }} 的形式将data中的数据渲染到页面上，如果我们将data中的属性赋值给标签的属性时，就不能用 {{ data }} 格式来写了，而是需要用到属性来绑定：

<body>

<!--    VUE只能接管一个div-->

<div id="app">

<!-- 完整写法   -->

  <a v-bind:href="url">百度</a>

<!--    缩写-->

 <a :href="url">跳转到百度地址</a>

</div>

<!--导入-->

<script src="../js/vue.js"></script>

<!--编写VUE代码-->

<script>

        //创建对象

        new Vue({

            // 接管的标签

            el:'#app',

            //  数据源

            data:{

                msg:'test',

                count:0,

                url:'http://www.baidu.com'

            },

            //存储所有的vue的方法

            methods:{

                login:function () {

                    //this代表Vue这个对象，下边是取到了data中的msg

                    this.msg='v-on方法'

                }

            }

        })

</script>

</body>

（1）class中数组的绑定方式

<head>

    <meta charset="UTF-8">

    <title>学无止境</title>

    <style>

        .bg{

            background-color: aqua;

            width: 100px;

            height: 100px;

        }

        .box{

            border: 2px red solid;

        }

    </style>

</head>

<body>

<!--    VUE只能接管一个div-->

<div id="app">

<!--动态的css绑定-->

<!--方式1：直接绑定-->

<div :class="['bg','box']"></div>

<!--方式2：关联绑定-->

 <div :class="classes"></div>

</div>

<!--导入-->

<script src="../js/vue.js"></script>

<!--编写VUE代码-->

<script>

        //创建对象

        new Vue({

            // 接管的标签

            el:'#app',

            //  数据源

            data:{

                classes:['bg','box']

            },

            //存储所有的vue的方法

            methods:{

            }

        })

</script>

</body>

练习：

需求：通过点击【按钮】把上边图片的红色边框去掉

<head>

    <meta charset="UTF-8">

    <title>学无止境</title>

    <style>

        .bg{

            background-color: aqua;

            width: 100px;

            height: 100px;

        }

        .box{

            border: 2px red solid;

        }

    </style>

</head>

<body>

<!--    VUE只能接管一个div-->

<div id="app">

<!--关联绑定-->

     <div :class="classes"></div>

<!--绑定方法，通过点击把【classes】替换成只有：bg属性-->

    <input type="button" value="changeClass" @click="changeClass">

</div>

<!--导入-->

<script src="../js/vue.js"></script>

<!--编写VUE代码-->

<script>

        //创建对象

        new Vue({

            // 接管的标签

            el:'#app',

            //  数据源

            data:{

                classes:['bg','box']

            },

            //存储所有的vue的方法

            methods:{

                changeClass:function () {

                    this.classes = ['bg']

                }

            }

        })

</script>

</body>

（2）绑定class，{}方式绑定（class属性字典的写法）

<head>

    <meta charset="UTF-8">

    <title>学无止境</title>

    <style>

        .bg{

            background-color: aqua;

            width: 100px;

            height: 100px;

        }

        .box{

            border: 2px red solid;

        }

    </style>

</head>

<body>

<!--    VUE只能接管一个div-->

<div id="app">

<!--关联绑定 bg、box为false时,也可引用变量is_bg、is_box，则不展示该属性 -->

     <div :class="{bg:true,box:true}"></div>

</div>

<!--导入-->

<script src="../js/vue.js"></script>

<!--编写VUE代码-->

<script>

        //创建对象

        new Vue({

            // 接管的标签

            el:'#app',

            //  数据源

            data:{

                classes:['bg','box'],

                is_bg:true,

                is_box:true

            },

            //存储所有的vue的方法

            methods:{

                changeClass:function () {

                    this.classes = ['bg']

                }

            }

        })

</script>

</body>

（3）绑定class（class属性数组的写法）

<!--数组的写法中，每个值代表一个样式，所以要写成字符串-->

<p v-bind:class="['blue','red']">蓝色字体红色背景色</p>

<!--如果isBlue为真，则blue显示，否则为空，则不显示-->

<p v-bind:class="[isBlue?'blue':'','red']">蓝色字体红色背景色</p

巴特西