VueJS方法

100 阅读 0 评论 66 点赞

我是靠谱客的博主活泼自行车，最近开发中收集的这篇文章主要介绍VueJS方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2019独角兽企业重金招聘Python工程师标准>>>

1、Vue.js

        vue.js是一个提供数据双向绑定的js框架，通过使用vueJS，可以实现DOM数据和数据绑定实时更新。
        vue.js以数据驱动和组件化思想构建。

相比AngularJS，VueJS的语法更加简洁。

2、Vue绑定数据

    <body>
        <div id="v_ele">
            //message为和绑定的数据，用{{}}括起
            {{message}}
        </div>
        <button id="btn">点击更换</button>
        <script src="jquery-3.1.1.js"></script>
        <script src="dist/vue.js"></script>
        <script>

        //创建一个对象用来存储数据，我们如果需要改变页面中的数据，只需要更改该对象里面的数据即可
        var exaStr = {message:"Hello World!"};
        //创建一个Vue对象，对象里面el代表了选中的页面元素，选择格式和CSS选择器规则一致，
        //data里面写需要加到页面的数据
        var vuedata=new Vue({
            el:"#v_ele",
            data:exaStr
        })
        //我们也可以将创建出来的vue实例化对象打印到控制台，查看其内容
        console.log(vuedata);
    
        //给页面按钮注册点击事件，当点击按钮时，exaStr里面的数据被更改；
        //这时候我们可以看到，当exaStr里面的数据被更改时，其绑定的元素的内容也被更改了，这就是vue的基本用法
        $("#btn").click(function () {
            if(exaStr.message == "Hello World!"){
                exaStr.message="The world is change!";
            }
            else{
                exaStr.message="Hello World!";
            }
        })
    
         </script>
    </body>

3、Vue绑定表单元素

<body>

<div id="app">
    <p>{{message}}</p>
    <input type="text" id="text" v-model="message"/>
</div>

<script src="dist/vue.js"></script>
<script src="jquery-3.1.1.js"></script>
<script>
    //    利用绑定相同的view，再给input定义一个v-model,从而实现了input和文本的数据绑定
    //    同时，给message一个初始值
    var exampleData={message:""}
    var vuedata=new Vue({
        el:"#app",
        data:exampleData
    })
    //    onchange事件，在表单内容发生改变，且失去了焦点的时候即触发
    $("#text").on("change", function () {
        console.log(vuedata.message);
    })

//
</script>
</body>

4、常用vue指令

(1)、v-if

<body>

    <div id="exaData">
        <h1 v-if="accept">呀呀呀呀呀</h1>
        <h2 v-if="deny">哇哇哇哇哇</h2>
        <h3 v-if="num<=30">哦哦哦哦哦</h3>
        <h4 v-if="str.indexOf('ok')>=0">咦咦咦咦咦</h4>
    </div>

    <script src="dist/vue.js"></script>
    <script src="jquery-3.1.1.js"></script>
    <script>
        var exam = new Vue({
            el:"#exaData",
            data:{
                accept:true,
                deny:false,
                num:25,
                str:"yesookk"
            }
        })
        //直接操作点方法即可改变data内部的值
            //例如exam.num = 30;
        //v-if后面接判断语句，判断语句调用data里面的数据，
        //判断完成根据结果的true或false判断该元素是否出现在页面中

    </script>
</body>

(2)、v-show

<body>

    <div id="exam">
        <h1 v-show="accept">1</h1>
        <h1 v-show="deny">2</h1>
        <h1 v-show="num<=40">3</h1>
        <h1 v-show="str.indexOf('ok')>= 0">4</h1>
    </div>

    <script src="jquery-3.1.1.js"></script>
    <script src="dist/vue.js"></script>
    <script>
        var exam = new Vue({
            el:"#exam",
            data:{
                accept:true,
                deny:false,
                num:32,
                str:"okkkkkokokokoko"
            }
        })
        //v-show跟v-if类似，后面也接判断句，根据计算的boolean来判断该元素是否显示出来；
        //v-show和v-if的区别在于，
        //      show方法无论条件是否成立，该元素都在DOM中存在；
        //      而if条件如果不成立，该元素不会出现在DOM中；

    </script>

</body>

(3)、v-else

<body>
    <!--当v-if或v-show的条件不成立的时候，v-else的条件成立，显示v-else绑定的内容-->
    <div id="exam">
        <h1 v-if="accept">00000001</h1>
        <h1 v-if="error">此时为true，00000002</h1>
        <h1 v-else>此时为false，00000003</h1>
        <h1 v-show="num<=30">此时num<=30，00000004</h1>
        <h1 v-else>此时num>30，00000005</h1>
    </div>

    <script src="jquery-3.1.1.js"></script>
    <script src="dist/vue.js"></script>
    <script>
        var exam = new Vue({
            el:"#exam",
            data:{
                accept:true,
                error:false,
                num:40
            }
        })
        //v-else,当if或者show的结果为false时，显示else的元素
        //一般和if或show配合使用
    </script>

</body>

(4)、v-for

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 500px;
            height: 200px;
            margin:100px auto;
        }
        th,td{
            width: 120px;
            height: 50px;
            border:1px solid #f0ad4e;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>gender</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="key in obj">
                    <td>{{key.name}}</td>
                    <td>{{key.age}}</td>
                    <td>{{key.gender}}</td>
                </tr>
            </tbody>
        </table>
    </div>
<script src="dist/vue.js"></script>
<script>
    var exam = new Vue({
        el:"#box",
        data:{
            obj:[{
                name:"jack",
                age:18,
                gender:"male"
            },{
                name:"rose",
                age:20,
                gender:"female"
            },{
                name:"LinearLaw",
                age:"1",
                gender:"male"
            }]
        }
    })
</script>
</body>
</html>

(5)、v-bind

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li{
            list-style: none;
            text-align: center;
        }
        a{
            text-decoration: none;
            width: 50px;
            height: 50px;
            border:1px solid lime;
            border-radius: 8px;
            color: #000;
            float: left;
        }
        .active{
            background-color: lime;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul class="pagination">
            <li v-for="n in Count">
                <a href="#" v-bind:class="actNum === n ? 'active' : ''">{{ n  }}</a>
            </li>
        </ul>
    </div>
    <script src="dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                actNum:1,
                Count:10
            }
        })
    //n从1开始遍历，一直到10结束
    //v-bind后面接冒号，可以接一些判断语句，用来决定属性名是否可用
    </script>
</body>
</html>

(6)、v-on

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #exam>div{
            width: 50px;
            height: 50px;
            border:1px solid #f0ad4e;
            margin:100px auto;
            background-color: lime;
            border-radius: 8px;
        }
    </style>
</head>
<body>

    <div id="exam">
        <div v-on:click="say()"></div>
        <div v-on:click="speak('Oh!')"></div>
    </div>

    <script src="dist/vue.js"></script>
    <script>
        var exam = new Vue({
            el:"#exam",
            data:{
                message:"you say what?"
            },
            methods:{
                say:function(){
                    alert("This is say method");
                },
                speak: function (msg) {
                    alert(msg+"No!");
                }
            }
        })
//        methods存放方法数据，
//        v-on用来给元素绑定事件
//        用法——→v-on:事件类型=事件名称
    </script>

</body>
</html>

    tips：v-if和v-show的区别在于，
            v-if中的判断条件不成立的时候，页面中不会出现该元素，即该元素不在DOM中出现，
            而v-show中的判断条件无论是否成立，其页面中都会出现该元素，判断条件只控制该元素的display属性，判断条件为false则display：none；

v-else则是if和show的一个互补，当if或show不成立，else的元素显示出来；

v-for一般用来生成多个元素，将一组数据循环生成到页面；

v-bind一般用来给元素绑定class属性，可以加判断条件；

v-on用来给元素添加事件；

tips：v-on和v-bind可以进行缩写

<a href="#" :class="actNum === n ? 'active' : ''">{{ n  }}</a>
<div @click="speak('Oh!')"></div>

转载于:https://my.oschina.net/LinearLawX/blog/858379

最后

以上就是活泼自行车为你收集整理的VueJS方法的全部内容，希望文章能够帮你解决VueJS方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JavaScript
浏览次数：100 次浏览
发布日期：2023-10-30 11:01:04
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_18_fz_13_zgx.html

VueJS方法

概述

最后

评论列表共有 0 条评论

发表评论取消回复

VueJS方法

概述

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复