양식 명령
사용 방법 :
v-model텍스트 상자
<input type="text" name="name" id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1" name="user">
v1:'123' 先定义一个默认值데이터는 2 개 개의 프레임 결합 될 것이다 값 상자 두 외곽 다름 값으로 변경한다
확인란
<p>男：<input type="radio" name="sex" value="male" v-model="v2"></p>
<p>女：<input type="radio" name="sex" value="female" v-model="v2"></p>
v2:'female' 默认选择的是female，页面刷新之后就会默认选择自定义的属性，必须与value一起使用checked 表示默认选中,参数확인란
111：<input type="checkbox" name="hobbies" value="111" v-model="v3">
222：<input type="checkbox" name="hobbies" value="222" v-model="v3">
333：<input type="checkbox" name="hobbies" value="333" v-model="v3">
v3:['111','222'] 会在页面上自动默认选中自己定义的框ID와 이름과 값
아이디
번호 ID는 ID를 한 번만, 고유합니다.
일반적으로 종종 자바 스크립트입니다.
값
- 버튼이 값이 버튼에 텍스트 참조는 등의 "OK", "삭제"로 표시 될
- 값에 대한 상자이 상자의 값을 참조
- 같은 값을 가진 라디오 버튼과 체크 박스
- 값 목록이 드롭 다운 메뉴는 각 자녀의 값입니다
- 값으로 숨겨진 필드는 상자 내용물 안에 표시됩니다
배경 확인란의 가치 당신이 폼 데이터 페이지에있을 때 얻을 데이터를 얻기 위해 취할 그 값의 내용을 원하는 경우는 다음의 값입니다
이름
- 이름 (S 컨트롤 동일한 이름을 취할 수있다) 제어의 이름, 값이 제어 값이고;
- 모든 컨트롤의 값이 아닌이 같은 체크 박스, 라디오, 숨김으로 표시됩니다;
- 이름이 제어 서버에 그 값을 얻을 수 있습니다 정의 컨트롤의 값;
- 브라우저가 또한 브라우저를 정의 제출하기 전에, 그 이름을 무시하는 이름을 제출 보지 못했다, 의미하지 않는다
- 서버가 동일한 이름과 값을 얻을 수 있습니다, 이름;
- 이름 / 값을 정의하지 않는 컨트롤은 이름 / 값을 정의 수신 편의상 저명한 서버에 표시 될 수 있습니다
- 물론 버튼 만 값과 그 값은 위치뿐만 아니라 표시합니다.
전자 형태의 동작은, VUE 전항 작성된 체계임을 의미하고, 이러한 설명은 선단부에 다수의 동작이다.
조건부 지침
조건이 충족되지 않은 상태의 이행에 설정되는 경우, 조건이 판정 수행하지
v-show = "布尔变量" 会以display的行式显示
v-if = "布尔变量" 为false的时候， 直接就不显示，页面代码也不显示，用的最多（保证不渲染的数据泄露）V-경우
v-if
v-else-if
v-else사이클 명령
루프 명령에 의해 사용
v-for = " c in info"
v-for = " (k,v) in info"
v-for = "(v,k,i) in info"사용 사례
<i v-for="c in info">{{ c }} </i>
<i v-for="(c, i) in info">{{i}}:{{c}}<br></i>
<div v-for="e in stus">{{ e }}</div>
<div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
<div v-for="v in people">{{ v }}</div>
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
<div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div> # 可以循环嵌套标签使用의 재활용을위한 몇 가지 방법에 대한
unshift, push 是首尾增
shift，pop 是首尾删
数组操作最全的方法：splice
splice(begin_index，count，...argsl,)분리기 (자세히 알아보기)
템플릿 문법 문법 VUE 구별하기 위해, 충돌을 이용하여 통상의 프론트 페이지 렌더링에 사용되는, 다음의 방법을 사용하여 구별 할
{{ msg }} # 正常的div页面
[{ msg }] # vue实例的页面中使用필터
필터의 효과는 필터 값의 요구에 따른 출력값
1. 정의 필터 방법 필터
필터링 될 수 값 2. 복수의 필터 통과 추가적인 보조 파라미터를 가질 수있다
결과는 일단 필터링 할 수 있습니다 3. 필터 다시 수
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}계산 된 속성
1.computed 계산 속성 (속성 메소드가 반드시 데이터 선언에서 반복되지 않음), 방법 속성으로 선언 할 수있다
방법 속성 페이지를 렌더링해야한다 2. 바인딩 방법을 가능하게 할 것이다, 방법을 결합하는 방법 속성의 반환 값은
3. 될 모니터에 표시되는 모든 변수를 결합하는 방법, 방법 바인딩 업데이트 재 트리거 값의 변화는 특성에있어서의 값을 업데이트하는
4. 일반적인 문제는 해결 될 : 다수의 변수에 의존하는 변수
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<button>{{ result }}</button>
</div>
data: {
n1: '',
n2: '',
},
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}리스너 등록
N 속성 청취의 현재 값이고, O는 콜백 청취자 속성 값이 메소드를 수신마다 값이다
요약 :
1. 리스너 속성 데이터에 선언 할 필요가, 방법은 청취자의 반환 값을 필요로하지 않습니다
속성 값이 업데이트 될 때 2. 리스너 메소드 이름은 속성 이름의 리스너 콜백 메소드를 수신 것이다
3. 모니터 콜백 방법은, 두 개의 매개 변수의 현재 값은 최종 값을 갖는다
여러 변수에 변수에 의존 : 문제를 해결하려면
<div id="app">
<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知',
},
watch: {
full_name(n, o) {
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
},
}
})버블 정렬
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
<script>
# 例1 将数组中的值进行排列
let arr = [3, 2, 5, 4, 1];
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
# 例2 按照分数来进行排列
stus = [
{
name: 'Bob',
grade: 98
},
{
name: 'Tom',
grade: 87
},
{
name: 'Jerry',
grade: 92
},
];
// 按照分数进行排名
for (let i=0; i<stus.length-1; i++) {
for (let j=0; j<stus.length-1-i; j++) {
// 处理条件即可
if (stus[j].grade > stus[j + 1].grade) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
console.log(stus);
</script>