목차
1. 템플릿 구문
1.1 보간
Vue.js는 개발자가 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있도록 하는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 합법적인 HTML이므로 사양을 따르는 브라우저와 HTML 파서로 구문 분석할 수 있습니다. Vue는 템플릿을 가상 DOM으로 컴파일하며, 응답 시스템과 결합하여 Vue는 다시 렌더링해야 하는 최소 구성 요소 수를 지능적으로 계산하고 DOM 작업 수를 최소화할 수 있습니다.
HTML 템플릿 구문: 문자열과 데이터를 입력으로 받아 정규식을 사용하여 자리 표시자를 필요한 데이터로 대체하여 완전한 HTML 문자열을 구성하는 문자열 기반 템플릿 기술입니다.
1.1.1 텍스트
{ {xxx}} 형식을 직접 사용하면 레이블이 데이터 객체(data)의 xxx 속성 값 으로 대체됩니다 . 바인딩된 데이터 객체의 xxx 속성 값이 변경되면 보간점의 값도 변경됩니다( 양방향 바인딩 )
<div id="xw">
{ {msg}}
</div>
1.1.2 HTML 파싱
html 형식으로 데이터를 출력하려면 v-html 명령을 사용해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html解析</title>
<!-- 1.导入工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<!-- 2.定义边界 -->
<div id="xw">
<div v-html="htmlstr"></div>
</div>
<!-- 3.构建vue实例并绑定边界 -->
<script>
new Vue({
el: "#xw",
data() {
return {
htmlstr: '<h3 style="color:blue;">这是一个html片段</h3>'
}
}
})
</script>
</body>
</html>
1.1.3 속성
HTML 속성의 값은 v-bind 지시문을 사용해야 합니다. 유형은 jQuery의 $("#xxx").attr(Name, Val) 과 동일합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html解析</title>
<!-- 1.导入工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.blueClass{
font-size: 30px;
color: skyblue;
}
</style>
</head>
<body>
<!-- 2.定义边界 -->
<div id="xw">
<p v-bind:class="hontColor">哈哈</p>
</div>
<!-- 3.构建vue实例并绑定边界 -->
<script>
new Vue({
el: "#xw",
data() {
return {
hontColor:"blueClass",
}
}
})
</script>
</body>
</html>
다음과 같이 작성할 수도 있습니다.
//在html使用v-bind:style指令设置样式
<p v-bind:style="color">哈哈</p>data() {
return {
//定义一个属性，其值为所需样式
color:"color: yellowgreen;"
}
}1.1.4 표현식
Vue는 완전한 JavaScript 표현식 지원을 제공합니다.
- { {str.substr(0,3)}}
- { { 숫자 + 1 }}
- { { 알았어? '예 아니오' }}
- <li v-bind:id="'list-' + id">내 ID는 js에 의해 동적으로 생성됩니다.</li>
예시 1: 문자 가로채기
<!-- 在html中加入元素，定义表达式 -->
<p>{
{str.substring(5,9)}}</p>data() {
return {
str: '大家都叫我king'
}
}
예시 2: 매우 간단하므로 하나씩 설명하지 않겠습니다.
<p>数字:{
{number+1}}</p>
<p>{
{ok ? 'yes' : 'no'}}</p>
<span :id="'users_id_'+id">小威</span>new Vue({
el: "#xw",
data() {
return {
number: 99,
ok: false,
id: 66
}
}
})
1.2 지침
1.2.1 핵심 지침
v-if|v-else|v-else-if: 후속 표현식의 bool 값을 기반으로 요소를 렌더링할지 여부를 결정합니다.
v-show: 뒤에 있는 표현식이 false인 요소를 렌더링하고 해당 요소에 CSS 코드를 추가한다는 점을 제외하면 v-if와 유사합니다: style="display:none"
v-for: JS와 유사한 순회
v-bind: 위에서 이미 사용되었으며 속성 또는 요소를 추가합니다.
v-on: v-on: (@로도 대체 가능)은 이전 글에서 언급한 것처럼 함수를 호출하는 데 사용됩니다.
v-model: 바인딩된 요소의 값을 자동으로 업데이트하는 데 사용됩니다.
예시 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>核心指令</title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="xw">
分数：<input v-model="score" />
<div v-if="score>80">优秀</div>
<div v-else-if="score>60">良好</div>
<div v-else="score<60">还需努力</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#xw',
data() {
return {
score: 60
}
}
})
</script>
</html>
예 2:
<div v-show="score==90">v-show-上优秀学员名单</div>
예시 3:
드롭다운 상자와 확인란을 구현하기 위해 v-model과 결합
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>核心指令</title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="xw">
<p>v-for</p>
<select v-model="hobbySelected">
<option v-for="h in hobby" :value="h.id">{
{h.name}}</option>
</select>
<div v-for="h in hobby">
<input :value="h.id" type="checkbox" />{
{h.name}}
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#xw',
data() {
return {
hobby: [{
id: "1",
name: "beautifulgirl"
},
{
id: "2",
name: "按摩"
},
{
id: "3",
name: "洗jio"
}
],
hobbySelected: 3
};
}
})
</script>
</html>
예시 4:
<!--参数：href-->
<div>
<a v-bind:href="url">baidu</a>
</div>
<!--
参数：动态参数.
attname需要在data中定义,
注意：attname要全部小写!!
-->
<div>
<a v-bind:[attrname]="url">baidu</a>
<button v-on:[evname]="clickme">点我看看</button>
</div>1.2.3 동적 매개변수
참고: 동적 매개변수에서 매개변수로 사용되는 변수 이름(예: attrname)은 모두 소문자여야 합니다. 그렇지 않으면 유효하지 않습니다! !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态参数</title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="xw">
<p>动态参数</p>
<input v-model="evname" />
<button v-on:[evname]="handle">动态参数</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#xw',
data() {
return {
evname:'dblclick'
}
methods: {
handle() {
alert("触发事件");
}
}
})
</script>
</html>
Vue는 가장 일반적으로 사용되는 두 가지 명령어인 v-bind 및 v-on에 대한 특정 약어를 제공합니다.
| 지침 | 약어 | 예 |
| v-바인드:xxx | :트리플 엑스 | v-bind:href는 다음과 같이 축약됩니다:href |
| v-on:xxx | @트리플 엑스 | v-on:click은 @click으로 축약됩니다. |
2. 필터
Vue는 일반적으로 일반적인 텍스트 형식에 사용되는 사용자 정의 필터를 허용합니다. 필터는 이중 중괄호 보간 및 v-바인드 표현식의 두 위치에서 사용할 수 있습니다. 필터는 파이프 연산을 사용하여 js 표현식 끝에 추가해야 합니다. 기호 " | "
2.1 로컬 필터
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器</title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="xw">
{
{msg}}<br />
{
{msg|single}}<br />
{
{msg|param(2,3)}}
</div>
<script type="text/javascript">
// 绑定边界 ES6具体体现
new Vue({
el: '#xw',
data() {
return {
msg: "bug快离开~bug快离开~"
};
},
filters: {
'single': function(val) {
return val.substring(2, 3);
},
'param': function(val, start, end) {
return val.substring(start, end);
}
}
})
</script>
</body>
</html>
참고 1: 필터 함수는 표현식의 값을 첫 번째 매개변수로 받아들입니다.
참고 2: 필터는 연결될 수 있습니다
. { { message | filterA | filterB }}
참고 3: 필터는 JavaScript 함수이므로 매개변수를 받아들일 수 있습니다:
{ { message | 필터A('arg1', arg2) }}
2.2 글로벌 필터
시간 변환 사례:
//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
//debugger;
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
function fmtDate(date, pattern) {
var ts = date.getTime();
var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
if (pattern) {
d = new Date(ts).format(pattern);
}
return d.toLocaleString();
};
date.js(날짜 형식)를 프로젝트 js 디렉터리에 복사하고 페이지에 도입합니다.
전역 필터 정의
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器</title>
<script src="js/date.js"></script>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="xw">
<p>{
{date | fmtDate}}</p>
无过滤器:<br />
{
{date}}
</div>
<script type="text/javascript">
// 全局过滤器
Vue.filter('fmtDate', function(value) {
return fmtDate(value, 'yyyy年MM月dd日')
});
// 绑定边界 ES6具体体现
new Vue({
el: '#xw',
data() {
return {
date: new Date()
};
}
})
</script>
</body>
</html>
3. 계산된 속성
계산된 속성을 사용하면 뷰에 표시된 속성을 빠르게 계산할 수 있습니다. 이러한 계산은 필요한 경우에만 캐시되고 업데이트됩니다.
사용 시나리오: 속성에 해당 값을 얻기 위해 복잡한 논리적 작업이 필요한 경우 계산된 속성을 사용할 수 있습니다. 결과가 반환되는 한 작업, 메소드 호출 등을 포함하여 다양한 복잡한 논리가 계산된 속성에서 완료될 수 있습니다. 끝.
구문: 계산:{}
장바구니 케이스:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="xw">
<p>计算属性</p>
<table border="1" style="width: 600px;height: 300px;">
<tr>
<td>物品</td>
<td>单价</td>
<td>
数量
</td>
<td>
小计
</td>
</tr>
<tr>
<td>帽子</td>
<td>{
{maoziDanjia}}</td>
<td>
<input v-model="maozi" />
</td>
<td>
{
{maoziTotal}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>{
{yifuDanjia}}</td>
<td>
<input v-model="yifu" />
</td>
<td>
{
{yifuTotal}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>{
{kuziDanjia}}</td>
<td>
<input v-model="kuzi" />
</td>
<td>
{
{kuziTotal}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{
{total}}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
// 绑定边界 ES6具体体现
new Vue({
el: '#xw',
data() {
//定义所需属性值
return {
maoziDanjia: 10,
yifuDanjia: 30,
kuziDanjia: 20,
maozi: 1,
yifu: 1,
kuzi: 1,
km: 2,
m: 2000
};
},
computed: {
maoziTotal() {
return this.maoziDanjia * this.maozi;
},
yifuTotal() {
return this.yifuDanjia * this.yifu;
},
kuziTotal() {
return this.kuziDanjia * this.kuzi;
},
total() {
return this.maoziTotal + this.yifuTotal + this.kuziTotal;
}
}
})
</script>
</html>
4. 모니터
듣기 속성 watch, watch를 통해 데이터 변경에 대응할 수 있습니다.
구문: 시계:{}
예: 미터와 센티미터 간의 단위 변환
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="xw">
<p>监听属性</p>
米：<input v-model="m" />
厘米：<input v-model="cm" />
</div>
</body>
<script type="text/javascript">
// 绑定边界 ES6具体体现
new Vue({
el: '#xw',
data() {
return {
m: 2,
cm: 200
};
},
watch: {
// v指的是m变量
m: function(v) {
this.cm = parseInt(v) * 100;
},
// v指的是km变量
cm: function(v) {
this.m = parseInt(v) / 100;
}
}
})
</script>
</html>
5. 좌석 배치 사례
<!DOCTYPE html>
<html>
<head>
<title>排座</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>排座</h2>
<input type="text" v-model="seatInput1">
<input type="text" v-model="seatInput2">
<input type="text" v-model="seatInput3">
<hr>
<h3>用户:</h3>
<ul>
<!-- 遍历过滤器传来的值 -->
<li v-for="user in filteredUsers" :key="user.id">{
{ user.name }}</li>
</ul>
<hr>
</div>
<script>
new Vue({
el: '#app',
data: {
seatInput1: '',
seatInput2: '',
seatInput3: '',
users: [{
id: 1,
name: '老王'
},
{
id: 2,
name: '老六'
},
{
id: 3,
name: '老八'
},
{
id: 4,
name: '老聂'
},
{
id: 5,
name: '老五'
}
]
},
/* 定义一个filteredUsers计算属性 */
computed: {
/* 使用filter方法来过滤users数组中的元素。filter方法接受一个回调函数作为参数，该回调函数会对数组中的每个元素进行判断，并返回一个新的数组，其中包含满足条件的元素。 */
filteredUsers() {
return this.users.filter(
/* 使用=>箭头函数的语法来定义一个匿名函数。这个匿名函数接受一个参数user，表示users数组中的每个元素。 */
user => {
/* 使用逻辑运算符&&来判断user.name是否不等于seatInput1、seatInput2和seatInput3的值。如果满足这个条件，说明user.name不等于任何一个输入框的值，那么这个元素就会被保留在过滤后的数组中。 */
return user.name !== this.seatInput1 &&
user.name !== this.seatInput2 &&
user.name !== this.seatInput3
});
}
}
});
</script>
</body>
</html>
요약: 계산된 속성과 청취 속성의 차이점
계산된 속성: 다른 속성을 기반으로 계산되는 속성입니다. 해당 값은 종속된 속성을 기반으로 동적으로 계산되고 , 캐시되며, 종속 속성이 변경될 때만 다시 계산됩니다. 계산된 속성은 복잡한 계산이나 다른 속성을 기반으로 한 처리가 필요한 시나리오에 적합합니다. 계산된 속성을 사용하면 복잡한 논리를 캡슐화하여 코드를 더 명확하고 유지 관리하기 쉽게 만들 수 있습니다.
Listening 속성: 지정된 속성의 변경 사항을 수신하고 해당 작업을 수행하는 데 사용되는 속성입니다. 모니터링되는 속성이 변경 되면 지정된 콜백 함수를 실행하여 변경 사항에 응답할 수 있습니다. 속성 수신은 속성이 변경될 때 비동기식 또는 비용이 많이 드는 작업을 수행해야 하는 시나리오에 적합합니다. 수신 속성을 사용하면 속성 변경 사항을 실시간으로 모니터링하고 네트워크 요청 전송, 복잡한 계산 수행 등 해당 작업을 수행할 수 있습니다.
계산된 속성은 다른 속성을 기반으로 결과가 계산되는 시나리오에 적합하고, 수신 속성은 속성 변경을 실시간으로 모니터링하고 해당 작업을 수행해야 하는 시나리오에 적합합니다. 둘 사이의 차이점은 계산된 속성은 다른 속성을 기반으로 결과를 계산하는 반면 수신 속성은 속성이 변경되면 해당 작업을 수행한다는 것입니다.