이번에는 Avalon 프론트엔드 프로젝트 사용에 대한 분석을 가져오겠습니다. Avalon 프론트엔드 프로젝트에서 사용되는 주의 사항은 무엇인가요?
1 작은 예제 데이터 루프
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
로그인 후 복사
| 序号 |
项目名称 |
开始时间 |
合同金额 |
支付金额 |
支付比例 |
| {{$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)}}%
|
<script>
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"
}
]
</script>
2 vm은 서로 값을 얻을 수 있습니다
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
<p>{{@a}}</p>
<p>
{{@a}}
<span>{{@b}}</span>
</p>
<script>
var vm = avalon.define({
$id: 'wrap',
a: '123'
});
var def = avalon.define({
$id: "wrap2",
a: "大家好",
b: vm.a //获取第一个Model里的属性值
});
</script>로그인 후 복사
3 내장 명령
$id, vm name
$watch, 청취 기능을 추가하는 데 사용
$fire, 청취 기능
$events를 트리거하는 데 사용, 청취 기능
$model을 저장하는 데 사용, 순수 JS 객체
$element를 반환합니다. 2.0의 새로운 기능, ms-controller, ms-important를 사용하여 VM의 범위를 지정하면 해당 요소 노드가 이 속성에 배치됩니다.
$computed, 2.2.1의 새로운 기능, 중앙에서 정의하는 데 사용됨 계산된 속성
4 계산된 속성
4.1 get 케이스
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
<p>{{@fullName}}</p>
<script>
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);
</script>로그인 후 복사
4.2 set 케이스
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
<p>{{@firstName}}</p>
<p>{{@lastName}}</p>
<script>
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);
</script>로그인 후 복사
4.3 계산된 속성 퍼지 검색 케이스
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
<p>
{{@test1}}
</p>로그인 후 복사
|
|
|
<script>
avalon.component('ms-autocomplete', {
template: '<p><input type="text" ms-duplex-string="@search" />' +
'<ul><li ms-for="($idx,opt) in @aaa">' +
'{{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,
});
</script>
5 데이터 학습 vue를 객체 데이터에 넣었는데 vue가 훨씬 편리합니다
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
<p>{{@data.firstName}}</p>
<p>{{@data.lastName}}</p>
<script>
var vm = avalon.define({
$id: 'test',
data:{
firstName: '杀猪',
lastName:'牛刀',
},
methods:{
}
})
setTimeout(() => {
vm.data.firstName = '哈哈'
}, 3000);
</script>로그인 후 복사
6 연산 배열 방법
-
pushArray(el)은 배열을 전달해야 하며, 배열의 모든 요소를 현재 배열의 끝에 추가합니다.
remove(el)에는 요소를 전달하고 동일 비교를 통해 제거해야 합니다.
removeAt(index)는 숫자를 전달해야 하며 해당 위치의 요소를 제거합니다.
removeAll(arrayOrFunction)에는 세 가지 용도가 있습니다. 함수인 경우 비교 후 참값을 얻는 요소를 필터링합니다.
배열인 경우 원래 배열과 동일한 배열의 모든 요소를 제거합니다. ; 매개변수가 없으면 모두 지워집니다.
clear()는 RemoveAll()의 세 번째 메서드와 동일하며 배열의 모든 요소를 지웁니다. 뷰를 동기화해야 하기 때문에 vm.array.length
= 0 메서드를 통해 요소를 지울 수 없습니다.
ensure(el), 이 요소가 배열에 없는 경우에만 추가하세요.
set(index, el), 간단한 배열 요소의 배열은 해당 요소를 변환하지 않기 때문에 특정 인덱스 위치에서 요소를 업데이트하는 데 사용됩니다.
toJSON(), 배열의 $를 가져오는 데 사용됩니다. 모델, 2.2.2 새로 추가된 메소드
6.1 연산 배열 예시 pushArray(반복 추가 없음)
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
<script>
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);
</script>
로그인 후 복사
6.2 제거() 배열 연산 예시 delete
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
<p>
{{el}}<button>点我删除该行</button>
</p>
<script>
avalon.define({
$id: 'test',
arr: [1,2,3,4,5,6]
})
</script>
로그인 후 복사
7 디스플레이 숨김에 스테이션 숨기기가 포함된 경우
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
<script>
var vm = avalon.define({
$id: "test",
aaa: "这是被隐藏的内容",
toggle: false
})
</script>
<p><button>点我</button></p>
<p>{{@aaa}}</p>
<p>{{@aaa}}</p>
로그인 후 복사
nbsp;html>
<meta>
<meta>
<meta>
<script></script>
<title>Document</title>
로그인 후 복사
10개 이벤트
animationend,
blur, 포커스 변경, 입력,
click, dblclick, , keydown, keypress, keyup,
-
mousedown、 mouseenter, mouseleave , mousemove, mouseout,
mouseover, mouseup, 스크롤, submit
약어: click-1="@fn(el)" :click-2="@fn(el)"
나는 당신을 믿습니다 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 Avalon 프런트엔드 프로젝트에서 구문 분석 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
