标签：通过 1.0 框架 方法 func ext json app 数组
Vue.js是一套构建用户界面的渐进式框架。
Vue只关注图层，采用自底向上增量开发的设计。
通过尽可能简单的API实现响应的数据，绑定和组合的视图组件。
以下Vue案例，是v1.0.26版本
首先，先引入vue.js
<script src="vue.js"></script>
然后写一个div开启vue
<div id="div"> {{a}} //和angular一样vue也是用模板标记将数据展示在页面上的 </div>
接着写js
window.onload = function(){
//自定义过滤器：
Vue.filter("todou",function(input){
//小于10的数字前面加上0 , 大于10则返回
return input<10 ? ‘0‘ + input : input;
})
new Vue({ //定义vue对象 el:"#div", //el 是固定的参数，不能改 data:{ //data:也是固定的参数 //数据绑定的数据
a:"welcome to Vue",
//循环数据
arr:[1,2,3,4,5,6]，
json:{
a:‘apple‘,
o:‘orange‘,
p:‘pear‘,
b:‘banana‘
},
//过滤器的数据
str1: ‘welcome to Vue‘,
str2: ‘welcome to Vue‘,
str3: ‘WELCOME TO VUE‘,
arr: [1, 2, 3, 4, 5, 6, 7],
iNum:1234,
//自定义过滤器
iNum:1,
//转义输出
msg:"<strong>字体加粗</strong>"
},
//点击事件的数据
methods:{
add:function(){
//这里的this指向new Vue 中的对象
this.arr.push(this.arr.length+1);
}
}
});
}
当然Vue也有数据双向绑定
v-model 来实现数据绑定
结合上面的js来实现
eg:
<input type="text" v-model="a"/>
<p>{{a}}</p>
<p>{{*a}}</p> //*dataName *不受数据改变的影响
循环：v-for
结合上文js来实现
<div id="div">
<div v-for="item in arr">{{item}} {{$index}}</div> //$index数组中的小方法,可以获取元素的下标
</div>
循环一个json
<div id="div">
<div v-for="item in json">{{item}}{{$index}}{{$key}}</div>
//另外一种写法
<div v-for="(key,value) in item">{{item}}{{key}}{{value}}</div>
</div> //$index 可以获取下标 $key获取键
点击事件 v-on:click=""/@click=""
还是结合上文js
//这里用点击按钮往数组里添加元素为例 <div id="div"> <input type="button" value="添加" v-on:click="add()"/>
//第二种写法：
//<input type="button" value="添加" @click="add()"/>
<ul> <li v-for="item in arr">{{item}}</li> </ul> </div>
过滤器：
结合上文js
<div id="div"> {{iNum | currency ‘￥‘}} <br> {{str1 | capitalize}}<br> {{str2 | uppercase}}<br> {{str3 | lowercase}}<br> {{arr | limitBy 3}}<br> </div>
自定义过滤器：
结合上文js
<div id="div"> {{iNum1 | toDou}} </div>
转义输出：
<div id="div">
<!--转义输出-->
{{{msg}}}
</div>
今天的Vue就讲到这里，希望能帮到大家！谢谢
标签：通过 1.0 框架 方法 func ext json app 数组
原文地址：http://www.cnblogs.com/4thmonth/p/7152672.html
