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

posted @ 2022-12-13 21:52 他还在坚持嘛阅读(45) 评论(0) 编辑收藏举报

刷新页面返回顶部

他还在坚持嘛

合作交流，邮箱:1113092340qq.com