Vue.js学习笔记（二）

最新推荐文章于 2023-12-26 20:00:20 发布

程序员一鸣

最新推荐文章于 2023-12-26 20:00:20 发布

阅读量365

点赞数 1

文章标签： Vue.js学习 Vue.js

本文链接：https://blog.csdn.net/ming_147/article/details/78469629

版权

对于上一篇的学习笔记，也许Vue.js并没有那么神奇，仅仅几个输出，看不出来它的可贵之处，如果用它，还不如直接用javascript,或者jQuery等，如果这样的认为的话，这一篇会让你，对它刮目相看，学习笔记，仅仅是一个学习的记录，我是希望大家可以去官方，或者专业的学习Vue.js地方，那样，你将会收获更多。

这一篇，我会从遍历数组，对象，绑定属性，绑定点击事件，动态切换样式，Vue.js组件这几个部分来记录我的学习情况。

遍历数组，对象

对于遍历数组，对象，其实就是复习第一篇的for循环，那么如何来遍历呢，在data下声明一个arrs的数组，遍历如下：

<body>
<div class="app">
    <div v-for="a in arrs">
        {{ a }}
    </div>
</div>
<script>
    new Vue({
        el: ".app",
        data:{
            arrs:[2,4,6,12,13,16,87,34,54,12]
        }
    });
</script>
</body>

<body>
<div class="app">
    <div v-for="key in object">
        {{ key }}
    </div>
</div>
<script>
    new Vue({
        el: ".app",
        data:{
            object:{
                name:"AbnerMing",
                age:25,
                sex:"男",
                email:"Lxm668723@163.com"
            }
        }
    });
</script>
</body>

绑定属性

以下的实现就是向href绑定url，实现跳转百度的

<body>
<div class="app">
    <a v-bind:href="url">跳转到百度</a>
</div>
<script>
    new Vue({
        el: ".app",
        data:{
            url:"http://www.baidu.com"
        }
    });
</script>
</body>

绑定点击事件

绑定点击事件，要用到的指令是v-on：

<body>
<div class="app">
    <button v-on:click="clicks">点击</button>
</div>
<script>
    new Vue({
        el: ".app",
        methods:{
            clicks:function () {
                alert("点击了button");
            }
        }
    });
</script>
</body>

动态切换样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_03</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style>
        .div_back{
            background-color: red;
        }

    </style>
</head>
<body>
<div class="app">
    点击切换背景<input type="checkbox" v-model="class1"/>
    <div v-bind:class="{'div_back':class1}">
        我若是红色，证明你打了对勾，若不是，证明你取消了对勾
    </div>
</div>
<script>
    new Vue({
        el: ".app",
        data:{
            class1:false
        }
    });
</script>
</body>
</html>

没有点击

点击之后

Vue.js组件

组件（Component）是 Vue.js 最强大的功能之一，可以扩展 HTML 元素，封装可重用的代码，按我所理解的意思，就是自定义标签，可以让我们的标签变得活灵活现。

来，自定义一个Abner标签，向浏览器输出，Hello,Abenr

<body>
<div class="app">
    <Abner></Abner>
</div>
<script>
    Vue.component("Abner",{
        template:"<h1>Hello,Abenr</h1>"
    });
    new Vue({
        el: ".app"
    });
</script>
</body>

以下这种方式和上面是一样的，都是向浏览器输出Hello, Abenr。

<body>
<div class="app">
    <Abner></Abner>
</div>
<script>
    var node={
        template:"<h1>Hello,Abenr</h1>"
    };
    new Vue({
        el: ".app",
        components:{
            Abner:node
        }
    });
</script>
</body>

如何向标签里传递动态的传递数据呢，这里就要说到prop，prop 是父组件用来传递数据的一个自定义属性，具体用法如下：

<body>
<div class="app">
    <Abner message="Hello,Abenr"></Abner>
</div>
<script>
    Vue.component("Abner",{
        props:["message"],
        template:"<h1>{{ message }}</h1>"
    });
    new Vue({
        el: ".app"
    });
</script>
</body>