양식 명령 V-모델
- 정의상 지시서는, 폼의 형태로 사용되는
- 그것의 사용은 :
v-model="变量"
이 v-model
입력 태그에 해당 value
속성,하지만 그들은 서로 영향을 미칠 수있다
- == 값 데이터 바인딩 양방향 변수 차례로 폼 태그의 값은 변수의 값에 영향을 미칠 수있는 폼 태그의 값에 영향을 미칠 수를 달성 할 수 ==
Copy<body>
<div id="d1">
<form action="">
<!--变量的值可以影响标签的值, 标签的值也可以影响变量的值-->
用户名:<input type="text" name="username" v-model="v1" placeholder="请输入用户名">
<!--上面输入什么, 这里就展示什么-->
<input type="text" v-model="v1">
{{ v1 }}
<hr>
<!--1.单选框-->
男:<input type="radio" name="gender" value="male" v-model="v2">
女:<input type="radio" name="gender" value="female" v-model="v2">
{{ v2 }}
<hr>
<!--2.单一复选框, true|false-->
卖身抵债: 同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
<hr>
<!--3.复选框-->
爱好: <br>
男:<input type="checkbox" name="hobby" value="male" v-model="v4">
女:<input type="checkbox" name="hobby" value="female" v-model="v4">
其他:<input type="checkbox" name="hobby" value="other" v-model="v4">
{{ v4 }}
<hr>
<button type="submit">提交</button>
</form>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
v1: 'username',
v2: 'male',
v3: false,
v4: ['female', 'male']
}
})
</script>
V-경우 조건부 명령어
- 조건부 지침이 페이지에 표시되지 않습니다 결국 사용자 제어 태그입니다
v-show="条件"
숨겨진 때, 두 조건 중 하나는, 디스플레이의 사용 거짓 : 없음 렌더링하지
v-if="条件"
숨겨진 때, 두 조건이 렌더링되지, 거짓, 오른쪽 검사는 관련 코드를 찾을 수 없습니다
v-if="条件" | v-else-if="条件" | v-else
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件指令</title>
<style>
.box {
height: 200px;
width: 200px;
}
.r {
background-color: red;
}
.g {
background-color: green;
}
.b {
background-color: blue;
}
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
<!--当is_show为false时, display:none-->
<div class="box r" v-show="is_show"></div>
<!--当is_show为false时, 直接不渲染, 右键检查找不到代码-->
<div class="box g" v-if="is_show"></div>
<hr>
<!--点击相应按钮显示对应颜色的box,且该按钮高亮-->
<div class="wrap">
<button @click="boxColor='r'" :class="{active: boxColor === 'r'}">红</button>
<button @click="boxColor='g'" :class="{active: boxColor === 'g'}">绿</button>
<button @click="boxColor='b'" :class="{active: boxColor === 'b'}">蓝</button>
<div class="box r" v-if="boxColor === 'r'"></div>
<div class="box g" v-else-if="boxColor === 'g'"></div>
<div class="box b" v-else></div>
</div>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
is_show: false,
boxColor: 'r'
}
})
</script>
</body>
</html>
V-용 루프 지시
v-for="v in string|array|obj
v-for="(v, i ) in string|array
v-for="(v, k, i) in dict
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环指令</title>
</head>
<body>
<div id="d1">
<p>{{ msg }}</p>
<span v-for="v in msg">{{ v }} </span>
<br>
<!--i:索引-->
<span v-for="(v, i) in msg">{{ i }}:{{ v }} </span>
<hr>
<!--对字典进行for循环拿到的是值-->
<div v-for="v in infoDic">{{ v }}</div>
<!--k:键, i:索引-->
<div v-for="(v, k, i) in infoDic">{{ i }}-{{ k }}:{{ v }}</div>
<hr>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'easy come easy go',
infoDic: {
name: 'bigb',
age: '18',
gender: 'male'
},
}
})
</script>
</body>
</html>
구분 구분 기호
- 구분 기호는 장고 템플릿 구문으로, 충돌 문법을 해결하기 위해 기호의 차이의 표현을 수정, 속성 :
{{ }}
뷰의 상징과 표현을 찾기 :{{ }}
delimiters: [ "[{" "}]" ]
차이는 표현이 상징 뷰 된 것입니다 [{ }]
Copy<body>
<div id="d1">
<p>{{ msg }}</p>
<p>[{ msg }]</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'easy come easy go',
},
// 将Vue的差值表达式符号变成 [{ }]
delimiters: [ '[{', '}]' ],
})
</script>
</body>
필터 필터
- 오브젝트 속성 필터 정의 뷰 여과법
- 여과, 여과 방법은 전달 될 수있는 복수의 파라미터에 대한 복수의 값 중 하나 일 수 있고, 추가적인 보조 파라미터를 전달할 수있다
- == 필터가 직렬로 복수 일 수 있고, 그 결과는 다시 한번 필터링 할 수 필터 ==
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="d1">
<p>{{ a|f1 }}</p>
<!--可以对多个值进行过滤, 也可以传辅助参数-->
<p>{{ a, b, c|f2(40)}}</p>
<!--可以对过滤的结果进行再过滤-->
<p>{{ a, b, c|f2(40)|f3}}</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
a: 10,
b: 20,
c: 30,
},
filters: {
// 传入需要过滤的值, 返回过滤结果
f1(arg) {
return arg * 10
},
f2(arg1, arg2, arg3, arg4) {
return arg1 + arg2 + arg3 + arg4
},
f3(arg) {
return arg * arg
}
}
})
</script>
</body>
</html>
계산 된 속성 계산
- 뷰의 계산 방법 정의 객체 속성 계산
- 리턴 값은 상기 속성의 계산 방법의 값인
- 이 방법을 발생하게 변화를 보내도록 표시 모든 변수 == 계산 방법 ==
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="d1">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<!--调用在computed中定义的result方法, 并渲染出返回值-->
<button>{{ result }}</button>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
n1: '',
n2: '',
},
computed: {
result() {
// 计算方法中出现的任何变量的值发生变化, 都会触发该方法
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2
}
}
})
</script>
</body>
</html>
리스너 등록 시계
- 청취자 변수 값을 수신하는 변경 여부 변경 리스너 방법하면 트리거 될
- 시계 뷰 객체 속성을 수신 항에있어서, 방법 == 이름과 동일한 이름 변수 모니터중인 ==
- 리스너 방법은 값을 반환하지 않습니다
- 리스너 방법은, 두 개의 매개 변수 n의 현재 값을 전달할 수 있으며, A는 O 변수의 값은
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听属性</title>
</head>
<body>
<div id="d1">
<p>姓名:<input type="text" v-model="fullName"></p>
<p>姓:<input type="text" v-model="lastName"></p>
<p>名:<input type="text" v-model="firstName"></p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
fullName: '',
firstName: '',
lastName: '',
},
watch: {
// 对fullName进行监听
fullName(n, o) {
// n表示变量的当前值, o表示变量的上一次的值
this.firstName = n.slice(1);
this.lastName = n.slice(0, 1);
}
}
})
</script>
</body>
</html>
프런트 엔드 데이터베이스
- 로컬 스토리지 : 영구 저장
- sessionStorage : 임시 저장 한 후, 태그가 닫혀있는 페이지가 비어
Copy// 存
localStorage.n1 = 10;
sessionStorage.n2 = 20;
// 取
let a = localStorage.n1
let b = sessionStorage.n2
// 存取数组等数据类型需要进行序列化和反序列化
localStorage.arr = JSON.stringify([1, 2, 3])
let arr = JSON.parse(localStorage.arr)
// 清空数据库
localStorage.clear()