什么是Vue.js

最新推荐文章于 2024-01-02 14:19:43 发布

MGQDLY

最新推荐文章于 2024-01-02 14:19:43 发布

阅读量639

点赞数 1

分类专栏： Vue的基础指令前端文章标签： vue.js

本文链接：https://blog.csdn.net/MGQDLY/article/details/105329339

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue的基础指令

1 篇文章 1 订阅

订阅专栏

初步认识Vue，以及其中常见的-指令

Vue简介
总结案例

Vue简介

Vue.js是一套用于构建用户界面的渐进式框架，它只注重于视图层，采用自底向上增量式的设计。

指令

指令是Vue.js的重要特征，他是带着v-前缀的特殊属性，从写法上来说，指令的值限定为绑定表达式。指令用于在绑定表达式的值发生改变时，将这种数据的变化应用到DOM上。当数据变化时，指令会根据指定的操作对DOM进行修改，这样就无需手动的去管理DOM的变化和状态，提高了程序的可维护性。

下面介绍几个Vue中的常见指令：

1. v-bind指令

v-bind指令可以为HTML元素绑定属性，就像下面的代码，通过v-bind指令将img元素的src属性与表达式imageSrc的值进行绑定。
v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class，class可以和v-bind:class同时存在，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名。
v-bind可以简写成 “：”

<img v-bind:src="imageSrc">;

使用v-bind为HTML元素绑定class属性。代码如下

<style>
        .title{
            color: #ff0000;
            border: 1px solid #ff00ff;
            display: inline-block;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
    //使用v-bind指令，将该标签的class属性与数据对象中的value属性绑定
    //数据对象中的value属性的值就是<span>标签的class属性值
        <span v-bind:class="value">武汉加油，中国加油</span>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                value:'title'//定义绑定的属性值
            }
        });
    </script>
</body>

2.v-on 指令

v-on指令用于监听DOM事件，该指令在模板中直接使用，在触发事件时会执行一些JavaScript代码，在HTML中使用v-on指令，指令后面可以是所有原生事件名称。
v-on可以简写成“@”
下面代码将click单击事件绑定到show()方法当中，当单击“显示”按钮时，将执行show（）方法，该方法在Vue实例中进行定义；

<button v-on:click="show">显示</button>

使用v-on绑定事件，实现动态改变图片的透明度功能：

<body>
    <div id="app">
        <img id="image" v-bind:src="url" v-on:mouseover="visible(1)" v-on:mouseout="visible(0)">
    </div>
    <script>
        var Vm=new Vue({
            el:"#app",
            data:{
                url:'./img/d.jpg'//图片的地址
            },
            methods:{
                visible:function(i){
                    var image= document.getElementById('image');
                    if(i==1){
                        image.style.opacity=0.5;
                    }else{
                        image.style.opacity=1;
                    }
                }
            }
        })
    </script>
</body

3.v-if、v-else 指令

v-if 指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素，如果表达式得值为true，就输出DOM元素和它包含的子元素，否则就将DOM元素及其子元素移除。
v-if后面“”中的内容是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
-v-else指令相当于JavaScript中的else部分，两个指令可以配合来使用，v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容

例如可以使用这两个指令来判断2020年二月份的天数。代码如下：

<body>
    <div id="app">
<p v-if="(year%4==0 && year%100!=0) || year%400==0">
    {{show(29)}}
</p>
<p v-else>
    {{show(28)}}
</p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                year:2020
            },
            methods:{
                show:function(days){
                    alert(this.year+'年2月份有'+days+'天');//弹出对话框
                }
            }
        })
    </script>
</body>

4.v-show 指令

<body>
   <div id="app">
       <p v-if="message">1</p>
       <p v-show="message">2</p>
   </div>
   <script>
       var vm = new Vue({
           el:"#app",
           data:{
               message:false
           }
       })
   </script>
</body>

在这里插入图片描述

v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染。
当 message的值为false条件不成立时，可以看到v-if的html并没有渲染出来，而使用v-show的div仅仅是更改了它的样式display: none。

小案例

点击按钮。来展示和隐藏文本：

<body>
    <div id="app">
        <p v-if="isShow">hello Vue</p>
        <!-- <p v-show="isShow">hello Vue</p> -->
        <button type="button" @click="show(1)">显示</button>
        <button type="button" @click="show(0)">隐藏</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                isShow:true,
            },
            methods:{
                show:function(type){
                    if(type){
                        this.isShow=true;
                    }else{
                        this.isShow=false;
                    }
                }
            }
        })
    </script>
</body>

5.v-for 指令

Vue.js提供了列表渲染功能，指令基于一个数组渲染一个列表，可以将数组中的数据循环渲染到DOM中，使用v-for指令进行渲染，其效果类似于JavaScript中的遍历。
使用v-for指令遍历数组使用item in items形式的语法，其中itmes为数据对象中的数组名称，item为数组元素的别名，通过别名可以获取当前数组遍历的每个元素。
例如：使用v-for指令输出数组中储存的名字：

<body>
    <div id="app">
        <ul>
            <li v-for="item in items">{{item.name}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                //自定义对象中的数组名称
                items:[
                    {name:'北京'},
                    {name:'上海'},
                    {name:'杭州'},
                    {name:'重庆'},
                    {name:'武汉'}

                ]
            }
        })
    </script>
</body>

在使用v-for指令遍历数组时，还可以指定一个参数作为当前数组元素的索引，语法格式为==（item,index）in items==,其中items为数据中的数组名称，item为数组元素的别名，index为数组元素的索引。
例如，给下列城市前添加相应的索引：

<body>
    <div id="app">
        <ul>
        //{{index}}与{{item.name}}中间的连接符号可以自定义
            <li v-for="(item,index) in items">{{index}}.{{item.name}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                //自定义对象中的数组名称
                items:[
                    {name:'北京'},
                    {name:'上海'},
                    {name:'杭州'},
                    {name:'重庆'},
                    {name:'武汉'}

                ]
            }
        })
    </script>
</body>

v-for指令除了可以遍历数组之外，还可以遍历对象。遍历对象使用value in object形式的语法，其中，object为对象的名称，value为对象属性值的别名。
例如，使用v-for只指令输出对象中储存的人物信息：

<body>
    <div id="app">
        <ul>
            <li v-for="value in object">{{value}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                //自定义数据中对象的名称
                object:{
                    name:'张三',
                    sex:'男',
                    age:20,
                    character:'活泼开朗'
                }
            }
        })
    </script>
</body>

在应用v-for遍历对象时，还可以使用第二参数为对象属性名（键名）提供一个别名，语法格式为==（value，key）in object ==,其中object为对象名称，value为对象属性值的别名，key为对象属性名的别名。
代码如下：

<body>
    <div id="app">
        <ul>
            <li v-for="(value,key) in object">{{key}}:{{value}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                //自定义数据中对象的名称
                object:{
                    name:'张三',
                    sex:'男',
                    age:20,
                    character:'活泼开朗'
                }
            }
        })
    </script>
</body>

v-for指遍历对象时，还可以使用第三个参数为对象提供索引，语法格式为==（value，index，key）in object==，其中value为对象属性值别名，index为对象索引，key为对象属性名别名。

代码如下：

<body>
    <div id="app">
        <ul>
            <li v-for="(value,key,index) in object">{{index}}.{{key}}:{{value}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                //自定义数据中对象的名称
                object:{
                    name:'张三',
                    sex:'男',
                    age:20,
                    character:'活泼开朗'
                }
            }
        })
    </script>
</body>

6.v-model 指令

v-model 指令可以实现对表单元素进行双向数据绑定，在修改表单元素值的同时。Vue实例中对应的属性值也会随之更新，反之亦然。
v-model还会根据控件类型自动选取正确的方法来更新元素。

使用v-model指令对单行文本框进行数据绑定，代码如下：

<body>
    <div id="app">
        <input v-model="message">
        <p>当前输入：{{message}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                message:""
            }
        })
    </script>
</body>

应用v-model指令将单行文本框得值和Vue实例中的message 属性值进行了绑定，当文本框中的内容发生变化时，message属性值也会相应的发生更新。

总结案例

<body>
    <div id="app">
        <!-- 表头 -->
        <div class="title">添加新用户</div>
        <div class="form">
            <!--使用v-model进行双向绑定 -->
            姓名：<input type="text" v-model="person.name"><br/>
            年龄：<input type="text" v-model="person.age"><br/>
            <!-- 使用v-on绑定点击事件 -->
            <button type="button" @click="add">添加</button>
        </div>
        <table>
            <tr class="thead">
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            <!-- 使用v-for遍历数组 -->
            <tr v-for="(item,index) in object">
                <td v-text="index+1"></td>
                <td v-text="item.name"></td>
                <td v-text="item.age"></td>
                <td>
                    <a href="javascript:;" @click="deleteItem(index)">删除</a>
                    <a v-if="item.age>=18" href="javascript:;" @click="marry(index)">成年</a>
                </td>
            </tr>
        </table>
    </div>
    <script>
        var vm =new Vue({
        el: '#app',
        data: {
            person:{
                name:'',
                age:'',
            },
            object:[{
                name:'章三',
                age:18
            },{
                name:'李四',
                age:23
            }]
        },
        methods:{
            add:function(){
                this.list.push(this.person);
                this.person = {name:'',age:''};
            },
            deleteItem:function(index){
                // 删除一个数组元素
                this.list.splice(index,1);
            },
            marry:function(){
                alert("你成年了");
            }
        },
        created:function(){
        }
    })
    </script>
</body>

MGQDLY

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
什么是Vue.js

初步认识Vue，以及其中常见的-指令Vue简介指令1. v-bind指令2.v-on 指令3.v-if、v-else 指令4.v-show 指令小案例5.v-for 指令6.v-model 指令总结案例Vue简介Vue.js是一套用于构建用户界面的渐进式框架，它只注重于视图层，采用自底向上增量式的设计。指令指令是Vue.js的重要特征，他是带着v-前缀的特殊属性，从写法上来说，指令的值限定...
复制链接

扫一扫