前言
刚开始学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>