avalon 显示html,avalon前端项目中使用解析

这次给大家带来avalon前端项目中使用解析，avalon前端项目中使用的注意事项有哪些，下面就是实战案例，一起来看一下。

1 小例子数据循环

序号项目名称开始时间合同金额支付金额支付比例

{{$index}}{{el.pro_name}}{{el.crt_time}}{{el.contract_money|number(2)}}{{el.pay_money|number(2)}}

0

{{el.pay_money / el.contract_money *100|number(2)}}%

vm = avalon.define({

$id: 'test',

data: {}

});

//这里是请求服务器

// $.ajax({

// url:'../json/avalon_for.json',

// type:'get',

// dataType:'json',

// success: function (ajax) {

// vm.data=ajax.data;

// // console.log(vm.data)

// }

// });

vm.data = [{

"pro_name": "沙湖，南湖水环境提升规划方案",

"crt_time": "2017-10-27",

"contract_money": "20000",

"pay_money": "0"

},

{

"pro_name": "保利升官渡项目新建地下车库通道方案论",

"crt_time": "2017-10-27",

"contract_money": "6000",

"pay_money": "555"

},

{

"pro_name": "邬家巷(鹦鹉大道-南城巷)道路排水修建规划",

"crt_time": "2017-10-28",

"contract_money": "7777",

"pay_money": "3333"

}

]

2 vm之间可以互相拿值

Document

{{@a}}

{{@a}}

{{@b}}

var vm = avalon.define({

$id: 'wrap',

a: '123'

});

var def = avalon.define({

$id: "wrap2",

a: "大家好",

b: vm.a //获取第一个Model里的属性值

});

3 内置指令$id, vm的名字

$watch, 用于添加监听函数

$fire, 用于触发监听函数

$events, 用于储存监听函数

$model, 返回一个纯净的JS对象

$element, 2.0新增, 当我们用ms-controller,ms-important指定一个VM的作用域,对应元素节点会放到这个属性上.

$computed, 2.2.1新增,用来集中定义计算属性

4 计算属性

4.1 get案例

Document

{{@fullName}}

var vm = avalon.define({

$id: 'test',

firstName: '司徒',

lastName: '正美',

$computed: {

//fullName依赖于firstName与lastName

fullName: function(){

return this.firstName+' '+this.lastName

},

//xxx只依赖于firstNaem

xxx: function(){

return this.firstName+'!!'

}

}

})

setTimeout(() => {

vm.lastName = '西瓜';

},3000);

4.2 set案例

Document

{{@firstName}}

{{@lastName}}

var vm = avalon.define({

$id: 'test',

firstName: '杀猪',

lastName: '牛刀',

$computed: {

//fullName依赖于firstName与lastName

fullName: {

get: function(){

return this.firstName+' '+this.lastName

},

set: function(val){

var arr = val.split(' ')

this.firstName = arr[0]

this.lastName = arr[1]

}

}

}

})

setTimeout(() => {

vm.fullName = "你有 病吧"

}, 3000);

4.3 计算属性模糊搜索案例

Document

{{@test1}}

{{el.community_name}}

avalon.component('ms-autocomplete', {

template: '

' +

'

• ' +

  '{{opt.community_name}}

',

defaults: {

search: '',

communities: [],

onReady:function(e){

e.vmodel.$watch('search', function(v){

avalon.log('current search word is '+ v)

})

},

$computed: {

aaa: {

get: function() {

var ret = [];

for (var i = 0; i < this.communities.length; i++) {

if ((this.communities[i].community_name.indexOf(this.search) > -1)) {

ret[ret.length] = this.communities[i];

if(ret.length === 5){

break

}

}

}

return ret;

}

}

}

}

});

communities = [{

community_id: 3,

community_name: 'This',

}, {

community_id: 5,

community_name: 'isnot',

}, {

community_id: 8,

community_name: 'agood',

}, {

community_id: 10,

community_name: 'example',

}, {

community_id: 22,

community_name: 'for',

}, {

community_id: 23,

community_name: 'such',

}, {

community_id: 43,

community_name: 'test',

}, {

community_id: 45,

community_name: 'thank',

}, {

community_id: 47,

community_name: 'you',

}, {

community_id: 50,

community_name: 'verymuch',

}, {

community_id: 51,

community_name: 'youre',

}, {

community_id: 53,

community_name: 'welcome',

}, {

community_id: 54,

community_name: 'too',

}, {

community_id: 55,

community_name: 'notsogood',

}, {

community_id: 56,

community_name: 'cheerful',

}];

var vm = avalon.define({

$id: 'avalon',

test1: 'test1',

communities: communities,

});

5 对象data里放数据学vue,不过vue方便得多

Document

{{@data.firstName}}

{{@data.lastName}}

var vm = avalon.define({

$id: 'test',

data:{

firstName: '杀猪',

lastName:'牛刀',

},

methods:{

}

})

setTimeout(() => {

vm.data.firstName = '哈哈'

}, 3000);

6 操作数组方法pushArray(el), 要求传入一数组，然后将它里面的元素全部添加到当前数组的末端。

remove(el), 要求传入一元素，通过全等于比较进行移除。

removeAt(index), 要求传入一数字，会移除对应位置的元素。

removeAll(arrayOrFunction), 有三种用法，如果是一个函数，则过滤比较后得到真值的元素，

如果是一数组，则将此数组中与原数组相等于的元素全部移除；如果没有任何参数，则全部清空。

clear()，相当于removeAll()的第三种方法，清空数组的所有元素。由于需要同步视图的缘故，不能通过vm.array.length

= 0的方法来清空元素。

ensure(el)，只有当数组不存在此元素时，才添加此元素。

set(index, el)，用于更新某一索引位置中的元素，因为简单数组元素的数组，是不会转换它的元素

toJSON()， 用于取得数组的$model, 2.2.2新添加的方法

6.1操作数组例子pushArray(不重复添加)

Document

var vm = avalon.define({

$id: 'xxx',

array: [1, 2, 3]

})

vm.array.push(4, 5, 6)

vm.array.pushArray([4, 5, 6]) //这个比push方法好用

vm.array.clear()

vm.array.ensure(3) //[3]

vm.array.ensure(3) //[3]

console.log(vm.array);

vm.array.ensure(4) //[3,4]

console.log(vm.array);

6.2 remove()数组操作例子删

Document

{{el}}点我删除该行

avalon.define({

$id: 'test',

arr: [1,2,3,4,5,6]

})

7 if显示隐藏包括站位隐藏

Document

var vm = avalon.define({

$id: "test",

aaa: "这是被隐藏的内容",

toggle: false

})

点我

{{@aaa}}

{{@aaa}}

9 arr和obj的for循环

Document

• {{el}}

• {{key}}--{{val}}

var vm = avalon.define({

$id: "test",

data:{

array:[1,2,3,4],

obj:{a:1,b:2,c:3}

}

})

10 事件animationend、

blur、focus change、input、

click 、 dblclick、 、 keydown、 keypress、keyup、

mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、

mouseover、 mouseup、 scroll、 submit简写 :click-1="@fn(el)" :click-2="@fn(el)"

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：