vue.js学习（一）

前言

刚开始学vue, 写写vue每天的学习收获。

正文

vue介绍

Vue.js是一个提供MVVM风格的双向数据绑定的库，专注于VM，也就是ViewModel，ViewModel绑定了Dom Listeners和Data Bingings监听器，从而保证视图和数据两者之间的一致性。熟悉AngularJS的人会发现Vue.js还借鉴了AngularJS的directive和filter的概念，但是API就比较简单易懂，整体也就轻巧了许多，上手比较容易。

vue安装

这里介绍简单的方法，类似于引入js文件一样，直接引入就好。vue.js下载链接

vue实例化

var example=new Vue({
    el:".box",
    data:{
        json:{a:'apple',b:'banana',c:'af'}
    },
    methods:{
        show:function(){
            this.arr.push("aa")
        }
    }
})

（1）el表明我们的Vue需要操作哪一个元素下的区域，’.box’表示操作class名为box的元素下区域。
（2）data表示Vue 实例的数据对象，data 的属性能够响应数据的变化。
（3）methods为要引用的方法。
（4）this指example这个实例化的对象

vue常用指令

1.v-model

v-model可用于一些表单元素,常见的input,checkbox,radio,select:

<div class="box">
            <input type=""  v-model="message" />
            <br>
            {{message}}
        </div>

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值

2.v-for

常用于列表渲染，对json，数组进行处理操作。

<ul class="box">
  <li v-for="(value,v,index) in json">
    {{value}} {{v}} {{index}}
  </li>
</ul>

{{value}}即为json里面的具体值，{{v}}指键值，{{index}}为索引，可以自行命名。
**PS:**2.0之前的版本索引值获取用 {{$index}}

3.v-on

用于监听DOM事件，典型的就是v-on:click

<div class="box">
    <input type="button" id="" value="dianji" v-on:click="show()"/>
    <br>
    {{arr}}
</div>

指令缩写：
v-bind:src可以缩写为： :bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on:click可以缩写为：@click

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

今天就到这儿~