Vue.js系列（四）：Vue基础指令及数据绑定！

最新推荐文章于 2023-03-01 20:01:51 发布

陈永佳

最新推荐文章于 2023-03-01 20:01:51 发布

阅读量733

点赞数 2

分类专栏： Vue系列 VsCode系列文章标签： Vue基础指令和数据绑定

本文链接：https://blog.csdn.net/Mrs_chens/article/details/100973701

版权

VsCode系列同时被 2 个专栏收录

24 篇文章 5 订阅

订阅专栏

Vue系列

14 篇文章 3 订阅

订阅专栏

Vue.js系列（四）：Vue基础指令及数据绑定！

前言

注意本次用cdn形式引入js学习，有node.js的玩家可以用node.js。CDN下载地址：https://vuejs.org/js/vue.min.js以及Node.js：Vue系列: windows下npm安装vue

今天博主将为大家分享Vue.js系列（四）：Vue基础指令及数据绑定！不喜勿喷，如有异议欢迎讨论！

有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！

目标

    学习如何使用Vue
    学习Vue插值,表达式绑定数据和v-指令
    学习基础指令v-show和v-text
    学习数据绑定指令v-model及指令修饰符.number,.trim,.lazy
    学习条件判断指令v-if,v-else,v-else-if的使用
    学习循环指令v-for的使用
    学习动态绑定指令v-bind
    使用v-bind动态绑定class和style属性

1.1.1学习如何使用Vue

在html标签body结束标记之前使用script标签引入vue.js文件

<body>

        ...html代码

        <!-- 引入vue.js -->

        <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    </body>

在html中添加一个dom元素作为Vue实例的挂载目标.

    <body>

        <div id="app" class="app">

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    </body>

创建Vue对象的实例

<body>

        <div id="app" class="app">

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

        <script type="text/javascript">

            var app = new Vue({

              el: '#app',//可以是css选择器.例如: #app或.app

            });

        </script>

    </body>

我们已经成功创建了第一个Vue应用！
现在数据和DOM已经被建立了关联，所有东西都是响应式的。

1.1.2 Vue插值及表达式绑定数据

插值

使用双大括号将数据编译成普通文本,并输出到插值的位置.

<body>

    <div id="app" class="app">

        {{msg}}

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                msg:"hello vue!!!"

            }

        });

    </script>

</body>

插值标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
打开浏览器的调试工具.修改msg的值.页面上会随之一起更新.
Vue的数据绑定是数据驱动.即:当数据发生变化时会触发html页面更新,所有相关联绑定的值也会随之一起变化.

表达式

vue的数据绑定不仅限于简单的属性键值,VUE对所有的绑定,都支持JavaScript表达式绑定

<body>

    <div id="app" class="app">

        <!--绑定三元表达式-->

        {{ count > 0 ? 'yes' : 'no' }}

        <!--绑定一个计算-->

        {{ count + 1 }}

        <!--绑定函数-->

        {{ msg.toUpperCase() }}

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                msg:"hello vue!!",

                count:0

            }

        });

    </script>

</body>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。 13 限制: 不能绑定语句({{ var a = 1 }}) 逻辑判断({{ if(true){ return msg } }})

1.1.3 基础指令v-text和v-show

指令 (Directives) 是带有 v- 前缀的特殊特性,绑定在DOM标签上。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-text指令

v-text 的效果完全等价于使用双大括号绑定的效果.

<body>

    <div id="app" class="app">

        <span v-text="msg"></span>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                msg:"使用v-text指令绑定数据.",

            }

        });

    </script>

</body>

使用v-text和{{ }}绑定的区别.

v-text是指令,只能绑定到dom标签上. {{ }}绑定可以放置在vue挂载目标节点内的任意位置,而不需要额外的dom标签.

v-show指令

<body>

    <div id="app" class="app">

        <span v-show="isShow">我是span标签,你看到我了吗?</span>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                isShow:true

            }

        });

    </script>

</body>

v-show指令将根据表达式isShow的值的真假来显示/隐藏元素。 v-show所绑定的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的 CSS属性 display。

1.1.4 数据绑定指令v-model及指令修饰符

v-model 绑定数据

v-model 指令(它负责监听用户的输入事件以更新数据)在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<body>

    <div id="app" class="app">

        <p v-show="isShow">我是p标签,你看到我了吗?</p>

        <label>

            <input name="isshow" type="checkbox" v-model="isShow" />

            显示/隐藏

        </label>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                isShow:true

            }

        });

    </script>

</body>

v-model.number修饰符

自动将用户的输入值转为数值类型.

<body>

    <div id="app" class="app">

        <input v-model.number="n" type="number">

        <span v-text="n"></span>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                n:1

            }

        });

    </script>
    
</body>

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。

v-model.trim修饰符

自动过滤用户输入的首尾空白字符

<body>

    <div id="app" class="app">

        <input v-model.trim="msg" type="text">

        <input v-model="msg2" type="text">

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                msg:"hello",

                msg2:"hello2"

            }

        });

    </script>

</body>

v-model.lazy修饰符

在默认情况下，v-model 在每次 input (onInput)事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change (onChange)事件进行同步.

<body>

    <div id="app" class="app">

        <input v-model.lazy="msg" type="text">

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                msg:"hello",

            }

        });

    </script>

</body>

1.1.5 条件判断指令

v-if,v-else

在vue中使用v-if和v-else指令

<body>

    <div id="app" class="app">

        <span v-if="lowerCase" v-text="msg"></span>

        <span v-else v-text="msg.toUpperCase()"></span>

        <label>

            <input type="checkbox" v-model="lowerCase" />

            大写/小写

        </label>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                msg:"hello",

                lowerCase:true

            }

        });

    </script>

</body>

v-else使用限制 : 上一个兄弟节点必须包含 v-if或v-else-if指令之一

v-else-if

v-else-if，顾名思义，充当 v-if 的 else-if

<body>

    <div id="app">

        <label>

            <input type="radio" v-model="sex" value="0">男

        </label>

        <label>

            <input type="radio" v-model="sex" value="1">女

        </label>

        <label>

            <input type="radio" v-model="sex" value="-1">保密

        </label>

        性别:

        <span v-if="sex==0">男生</span>

        <span v-else-if="sex==1">女生</span>

        <span v-else>保密</span>

    </div>

     <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js">   </script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                sex:-1

            }

        });

    </script>

</body>

使用限制上一个兄弟节点必须包含 v-if或v-else-if指令之一

1.1.6 循环指令v-for的使用

v-for循环数组或对象表达式是 obj in objs 形式的特殊语法.objs是一个数组或对象,obj是元素迭代的别名.

也可以使用 (obj,index) in objs 形式的表达式.

当循环目标是数组时,第二个参数index是数组的下标.
\
当循环目标是对象时,第二个参数index是对象的键名.

<body>

    <div id="app" class="app">

        <h4>

            使用v-for指令循环一个数组

        </h4>

        <ul>

            <li v-for="l in lessons">

                <span v-text="l"></span>

            </li>

        </ul>

        <ul>

            <li v-for="(l,i) in lessons">

                <strong v-text="i"></strong>

                <span v-text="l"></span>

            </li>

        </ul>

        

        <h4>

            使用v-for指令循环一个对象

        </h4>

        <ul>

            <li v-for="(s,k) in student">

                <strong v-text="k"></strong>

                <span v-text="s"></span>

            </li>

        </ul>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                student:{

                    id:'1',

                    name:"张三",

                    age:18,

                    sex:0

                },

                lessons:[

                    "html5",

                    "css3",

                    "JavaScript",

                    "vue"

                ]

            }

        });

    </script>

</body>

1.1.7 动态绑定指令v-bind

它是一个 vue 指令，用于绑定 html 属性,v-bind指令可以被简写为:

<body>

    <div id="app">

        <p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>

    </div>

     <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js">   </script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                title:"title描述"

            }

        });

    </script>

</body>

这里的 html 最后会被渲染成：

<div id="app">

    <p title="title描述">

        html属性不能使用双大括号形式绑定，只能使用v-bind指令

    </p>

</div>

更多的v-bind部分使用场景:

<body>

    <div id="app">

        <!-- 绑定属性 -->

        <img v-bind:src="imgSrc" />

        <!-- 简写 -->

        <img :src="imgSrc" />

        <!-- 字符串拼接 -->

        <img :src="'/images/'+img" />

        <!-- 绑定标签状态 -->

        <button v-bind:disabled="isDis" type="button">按钮</button>

    </div>

     <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js">   </script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                imgSrc:"http://via.placeholder.com/10x10",

                img:"1.jpg",

                isDis:false

            }

        });

    </script>

</body>

1.1.8 使用v-bind动态绑定class和style属性

使用v-bind:class,v-bind:style 绑定多个值，vue 对 class 和 style 这两个 html 属性进行了一定程度的增强。

基于对象绑定针对 class 的增强

<body>

    <div id="app">

        <span class="static" v-bind:class="classObj">

            将对象绑定到class属性上

        </span>

    </div>

     <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js">   </script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                classObj: {

                    "hasError": true,

                    "isActive": false

                }

            }

        });

    </script>

</body>

页面渲染结果:

<span class="static hasError">

    将对象绑定到class属性上

</span>

当isActive或hasError发生变化时,class 列表将相应地更新。例如: isActive的值为true时,class将渲染为:

<span class="static hasError isActive">

    将对象绑定到class属性上

</span>

基于数组绑定针对 class 的增强

<body>

    <div id="app">

        <span class="static" v-bind:class="classArr">

            将数组绑定到class属性上1

        </span>

        <span class="static" v-bind:class="['hasError',isActive?'isActive':'',]">

            将数组绑定到class属性上2

        </span>

    </div>

     <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js">   </script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                isActive:false,

                classArr: [

                    "hasError","isActive"

                ]

            }

        });

    </script>

</body>

页面渲染结果:

<span class="static hasError isActive">

    将数组绑定到class属性上1

</span>

<span class="static hasError">

    将数组绑定到class属性上2

</span>

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表.

如果你也想根据条件切换列表中的 class，可以用三元表达式.

当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<span class="static" 

      v-bind:class="['hasError',{activeClassName:isActive}]">

    将数组绑定到class属性上2

</span>

class属性的值仅在 isActive的值为true时包含样式activeClassName.

基于对象绑定针对 style 的增强

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript对象。CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<body>

    <div id="app">

        <span class="static" v-bind:style="styleObj">

            将对象绑定到style上

        </span>

    </div>

     <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js">   </script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                styleObj: {

                    color:'red',

                    fontSize:'15px',

                    border:'solid 1px blue'

                }

            }

        });

    </script>

</body>

html渲染结果:

<span style="color: red; 

             font-size: 18px; 

             border: 1px solid blue;">

    将对象绑定到style上

</span>

基于数组绑定针对 style 的增强

<body>

    <div id="app">

        <span class="static" v-bind:style="styleArr">

            将数组绑定到style属性上

        </span>

    </div>

     <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js">   </script>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',//可以是css选择器.例如: #app或.app

            data:{

                styleArr: [{

                    color: "red"

                }, {

                    backgroundColor: '#ddd'

                }, {

                    fontSize: '20px'

                }]

            }

        });

    </script>

</body>

html渲染结果:

<span style="color: red; 

                 background-color: rgb(221, 221, 221); 

                 font-size: 20px;">

        将组绑绑定到style属性上

    </span>

style绑定数组时,数组中的每个有效的style对象,都将被输出到html标签的style属性中.

总结一下：

    使用script标签引入vue文件
    使用new Vue({...})创建Vue对象的实例
    使用双大括号插值绑定数据
    v-指令使用 v-text 和 v-show 
    使用v-model绑定数据了解v-model的修饰符作用
    学习条件判断指令v-if,v-else和v-else-if
    学习v-for指令输出对象和数组
    动态绑定指令v-bind绑定html标签的一些属性
    使用v-bind动态绑定class和style属性
    绑定class和style时使用对象和数组绑定以及根据表达式条件绑定

勇于尝试（做练习）：第二天博主会贴出答案！

    1. 创建一个vue实例页面.并使用指令显示或隐藏一个html节点
    2. 循环输出一个数组或对象
    3. 使用v-bind指令绑定html节点的样式,并通过vue的属性控制

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>第1章.基础指令及数据绑定</title>
    <style type="text/css">
        .r {
            color: red;
        }

        .b {
            color: blue;
        }

        .swipe {
            display: block;
            margin: 0px;
            padding: 0px;
        }

            .swipe li {
                width: 100%;
            }
    </style>
</head>
<body>
    <div id="app">

        <!--4.双大括号绑定数据(语句)-->
        <div>
            数字(id): {{id}} , n:{{n}}
        </div>
        <div>
            字符串(msg): {{msg}}
        </div>
        <!--可绑定(对象,函数)不可绑定(语句)-->
        <div>
            对象:{{obj}}<br />
            <span>调用对象的 JSON.stringify(obj,null,2) 2个空格缩进</span>
        </div>
        <div>
            数组:{{arr}}
        </div>
        <!--调用函数-->
        <div>
            调用函数:{{arr.toString()}}
        </div>
        <div>
            调用函数:{{reverseMsg()}}
        </div>
        <!-- 可使用三元表达式 -->
        <div>
            三元表达式:{{show?'显示':'隐藏'}}
        </div>


        <!--vue指令-->
        <div>
            v-text:
            <span v-text="msg"></span>
        </div>
        <div>
            v-show:
            <span v-show="show" v-text="msg"></span>
            <!--控制台修改vm.show=false-->
            <a href="javascript:;">
                <span v-text="show?'隐藏':'显示'"></span>
            </a>
<small>打开控制台修改vm.show看看效果</small>
        </div>
        <div>
            v-model:<br />
            v-model:<input type="text" v-model="msg" /> <br />
            v-model.trim:<input type="text" v-model.trim="msg" /><br />
            v-model.lazy:<input type="text" v-model.lazy="msg" /><br />
            v-model.number:<input type="number" v-model.number="n" />
        </div>

        <div>
            v-if,v-else:<br />
            <span v-if="show" v-text="msg"></span>
            <span v-else v-text="reverseMsg()"></span>
        </div>

        <div>
            v-for:
            <ul>
                <li v-for="n in arr">
                    <span v-text="n"></span>
                </li>
            </ul>
        </div>

        <div>
            v-bind:
            <span v-bind:class="[show?'r':'b']"
                  v-bind:style="[sty,{fontSize:show?'20px':'12px'}]"
                  v-bind:data-num="n"
                  v-text="msg"></span>
            <button v-bind:disabled="show" type="button">
                状态:<span v-text="show?'禁用':'启用'"></span>
            </button>


            <p>
                <strong>v-bind条件组合:</strong>
                <!--控制台修改vm.n++,vm.show=true-->
                <button type="button" v-bind:disabled="show && n>1">
                    按钮状态
                </button>
                条件判断 show:<span v-text="show"></span>, n:<span v-text="n"></span> ,
                <span v-text="'(show && n>3) is:'+(show && n>1)"></span>
            </p>
        </div>

    </div>
    <!--1.引入vue.js-->
    <script src="../../libs/vue/vue.js"></script>
    <script type="text/javascript">
        //2. 实例化vue对象
        var vm = new Vue({
            el: "#app",
            //3. Vue 实例的数据对象.
            /*
             可以通过 vm.$data 访问原始数据对象。
             Vue 实例也代理了 data 对象上所有的属性，
             访问 vm.id 等价于访问 vm.$data.id。
             */
            data: {
                id: 1,
                n: 0,
                msg: "hello vue!",
                show: true,
                obj: {
                    a: 1,
                    b: true,
                    c: "string",
                    d: [6, 7, 8, 9, 0],
                    e: {
                        name: "张三",
                        age: 18,
                        sex: "男"
                    }
                },
                arr: [1, 2, 3, 4, 5],
                sty: {
                    color: 'red',
                    display: 'inline-block',
                    border: 'solid 1px blue'
                }
            },
            methods: {
                reverseMsg: function () {
                    return this.msg.split('').reverse().join('');
                }
            },
            mounted: function () {

            }
        });


        function cat() {
            this.food = "fish";
            this.say = function () {
                console.log("i love " + this.food);

            }
        }
        var dog = { food: "bone" };
        var blackCat = new cat();
        blackCat.say();
        blackCat.say.apply(dog);
    </script>
</body>
</html>

Vue.js系列（四）：Vue基础指令及数据绑定！分享完毕了！各位小伙伴快去试试吧！

最后

更多参考精彩博文请看这里：《陈永佳的博客》
喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！

陈永佳

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue.js系列（四）：Vue基础指令及数据绑定！

Vue.js系列（四）：Vue基础指令及数据绑定！前言今天博主将为大家分享Vue.js系列（四）：Vue基础指令及数据绑定！不喜勿喷，如有异议欢迎讨论！有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！目标学习如何使用Vue 学习Vue插值,表达式绑定数据和v-指令学习基础指令v-show和v-text 学...
复制链接

扫一扫