Vue.js学习笔记（二）

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

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

遍历数组，对象

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

class="app">
    
v-for="a in arrs">
        {{ a }}

class="app">
    
v-for="key in object">
        {{ key }}

绑定属性

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

class="app">
    v-bind:href="url">跳转到百度

绑定点击事件

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

class="app">
    v-on:click="clicks">点击

动态切换样式

html>
lang="en">

    charset="UTF-8">
    
    
    


class="app">
    点击切换背景type="checkbox" v-model="class1"/>
    
v-bind:class="{'div_back':class1}">
        我若是红色，证明你打了对勾，若不是，证明你取消了对勾

没有点击

点击之后

Vue.js组件

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

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

class="app">
    

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

class="app">
    

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

class="app">
    message="Hello,Abenr">

总得来说，对Vue.js学习，仅仅是一个开始，好多不明白的还在后面，也许，它还有未知的一面，待一层一层的去拨开，后续若还有Vue.js这方面的知识，我会继续整理关于它的笔记。