Vue 시작하기
26967 단어 javascript프런트엔드
Vue.js는 사용자 인터페이스를 구축하는 점진적인 프레임워크이다.통속적으로 말하자면, Vue.js는 경량급으로 손쉽게 사용할 수 있고 편리하며 유연성이 강한 전단 MVVM 프레임워크이다.간결한 API, 양호하고 건전한 중국어 문서로 개발자가 비교적 쉽게 베일 프레임워크를 만들 수 있다.
이 시리즈는 개인이 Vue를 사용하는 과정(cai) 테스트(keng)와 사례를 결합시켜 Vue 프레임워크에서 파악한 일부 지식을 출력하는 동시에 Vue 프레임워크에 대한 이해를 공고히 할 것이다.
Hello World 예
우선 Hello World 예시를 통해 Vuejs를 초보적으로 파악한다.
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../vue.js">script>
head>
<body>
<div id="app">{
{ message }}div>
<script>
//Vue
var app = new Vue({
el: "#app",
data: {
message: " Vue.js!"
}
})
script>
body>
html>
보시다시피 new Vue () 를 통해 Vue 실례를 만들고, 용기를 마운트해서 응답식 데이터 연결을 실현해야 합니다.마운트 컨테이너의 텍스트 값은 이중 괄호로 되어 있으며, 이 쓰기 방법은 Vue의 템플릿 문법입니다.일부 장면에서는
v-html 명령을 통해 데이터를 연결해야 한다.예를 들어 데이터 값에 html 라벨이 포함되어 있다.
<div id="app2" v-html="message">div>
<script>
//Vue
var app2 = new Vue({
el: "#app2",
data: {
message: " Vue.js!"
}
})
script>
아마도 당신은 v-html 명령에서 메시지를 사용할 때 쌍괄호가 없다는 것을 알아차렸을 것입니다. 이것이 바로 Vue 템플릿 문법의 쓰기 형식입니다. 텍스트가 삽입되었을 때만 쌍괄호를 사용하여 패키지를 만들 수 있고 다른 상황에서는 사용할 필요가 없습니다.
Vue 템플릿 구문에서는 javscript 표현식을 사용하여 값을 바인딩할 수도 있습니다.
<div id="app3">
{
{ total }} ， {
{ used }} ， {
{ total - used }} 。
div>
<script>
var app3 = new Vue({
el: "#app3",
data: {
total: 5,
used: 2
}
})
script>
Vue 명령
Vue 템플릿 구문에서 중요한 것은 명령입니다. 실제 프로젝트에서 Vue 명령 조작에 자주 사용됩니다.Vue 명령의 접두사는 모두
v-로 시작합니다.지금 바로 Vue 명령 조작에 대해 말씀드리겠습니다.v-text
사실은 텍스트 삽입값입니다.다음 예를 참조하십시오.
<div id="app" v-text="message">div>
<script>
var app = new Vue({
el: "#app",
data: {
message: " v-text "
}
})
script>
그래서 일반적인 상황에서는 바로 아래의 편리한 글씨를 쓴다.
v-html
v-html 지령은 값을 일반 html로 삽입하는 것이다.용법은 앞의 것과 같다.
v-model
값을 양방향 데이터로 연결합니다.예:
<div id="app2">
<input v-model="message">
<span>{
{ message }}span>
div>
<script>
var app2 = new Vue({
el: "#app2",
data: {
message: " v-model "
}
})
script>
v-model 양방향 데이터 귀속은 Vue의 본질입니다.우리는 v-모델을 통해 동적으로 데이터를 얻을 수 있다. v-모델은 대체적으로 일부 사용자가 입력하거나 조작하는form 폼 요소에 작용한다. 예를 들어 input,textarea,checkbox,radio,select 등이다.사용자의 동적 입력이나 조작이 데이터를 바꾸면 v-모델도 연결된 값을 동시 업데이트할 수 있으며 전통적인 조작을 통해 결과를 바꿀 필요가 없다.
v-on
Vue 이벤트 명령은 주로 감청 이벤트를 연결하는 데 사용됩니다.예:
<div id="app3" class="demo">
<button v-on:click="handleClick"> button>
div>
<script>
var app3 = new Vue({
el: "#app3",
methods: {
handleClick: function(){
alert(" ");
}
}
})
script>
보시다시피 v-on을 통해 button 요소에 클릭 이벤트
handleClick를 연결시켰습니다@click="handleClick".handleClick은 Vue 실례의 한 방법입니다.Vue 실례의 방법은 모두 methods키에 포함되어 있음을 알 수 있습니다.또한 Vue 인스턴스를 통해 바인딩된 이벤트 방법에 액세스할 수 있습니다.app3.handleClick();
자세한 설명은 구체적인 API 문서, Vue 이벤트 처리를 참조할 수 있습니다.
v-bind
동적 귀속 html 속성이나 구성 요소에 사용되는 props 값입니다.예:
<div id="app4" v-bind:class="className + ' demo'"> v-bind div>
<script>
var app4 = new Vue({
el: "#app4",
data: {
className: "current-index"
}
})
script>
v-bind 지령에도 줄임말이 있는데 이런 식으로 쓸 수 있다.
:class="className + ' demo'".v-for
동적 순환 데이터는 자바스크립트의 for 순환과 같지만 다른 점이 있다.예:
<div id="app5" class="demo">
<div>
<h2> ：h2>
<ul>
<li v-for="item in people" :key="item.name">
：{
{ item.name }}，
：{
{ item.sex }}，
：{
{ item.age }}
li>
ul>
div>
div>
<script>
var app5 = new Vue({
el: "#app5",
data: {
people: [
{name: " ", sex: " ", age: 28},
{name: " ", sex: " ", age: 26},
{name: " ", sex: " ", age: 22},
{name: " ", sex: " ", age: 22},
{name: " ", sex: " ", age: 28},
{name: " ", sex: " ", age: 12},
{name: " ", sex: " ", age: 30},
{name: " ", sex: " ", age: 20},
{name: " ", sex: " ", age: 30}
]
}
})
script>
v-for를 사용할 때 키 값을 연결하고 문서를 보는 것이 좋습니다.
v-if와 v-show
v-if와 v-show 지령은 사실 모두 요소를 조작하는 데 사용되고 작용은 모두 같지만 이들의 차이는
v-show ， true false ， CSS ； v-if ，v-if ， false ，v-if ， true ， DOM ， DOM ， v-show 。 구체적으로 문서 해석을 보면 다음과 같다.Vue 계산 속성 및 관찰자
속성을 계산하는 디자인은 사실 템플릿을 더욱 간결하게 하기 위한 것이다.템플릿 안의 표현식 문법이 너무 복잡하거나 템플릿에서 여러 번 어떤 표현식을 사용해야 하기 때문에 템플릿이 복잡해지기 때문에 일부 장면에서 속성을 계산하는 조작을 사용할 수 있다.예:
<div id="app" class="demo">
<input type="number" v-model="value1">
+
<input type="number" v-model="value2">
= {
{result}}
div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
value1: 0,
value2: 0
},
computed: {
result: function(){
return parseInt(this.value1) + parseInt(this.value2);
}
}
})
script>
계산 속성은 모두 컴퓨터 대상에 패키지되어 있으며, Vue가 실례화된 후에 계산 속성은 Vue의 실례적인 속성으로 간주됩니다.예에서 두 개의 입력 상자의 값을 수정하면 속성을 계산하면 두 개의 입력 상자가 연결된 값을 동적으로 얻을 수 있다.계산 속성의 값은return이 되돌아와야 합니다.
Vue는
watch를 사용하여 데이터의 변화를 감청하고 특정한 조작을 수행할 수 있다. 때때로 우리는 특정한 데이터의 변화를 감청하여 목적을 달성해야 한다.watch는 감청할 데이터가 포함된 대상이다.위의 예에서watch감청으로도 가능하다는 것을 알게 될 것입니다. 당신은 이렇게 실현할 수 있습니다.<div id="app2" class="demo">
<input type="number" v-model="value1">
+
<input type="number" v-model="value2">
= {
{result}}
div>
<script type="text/javascript">
var app2 = new Vue({
el: "#app2",
data: {
value1: 0,
value2: 0,
result: 0
},
watch: {
value1: function (val) {
this.result = parseInt(val) + parseInt(this.value2);
},
value2: function (val) {
this.result = parseInt(this.value1) + parseInt(val);
}
}
})
script>
이렇게 하면 효과를 실현할 수 있지만 계산 속성이 뚜렷하지 않아 더욱 편리하고 간결하기 때문에 적당한 장면에서watch 감청을 사용해야 한다. 예를 들어 데이터가 변동할 때 비동기 처리를 하거나 비용이 비교적 큰 조작을 할 때이다.상상해 보세요. 만약에 이런 장면이 있다면 상점의 검색란을 만들 때 사용자가 입력한 내용에 따라 관련 제품 데이터를 실시간으로 조회해야 합니다. 이럴 때watch로 감청할 수 있습니다.
<div id="shop-search" class="demo">
<input type="text" v-model="searchKey" placeholder=" ">
<ul>
<li v-for="item in resultData">{
{ item }}li>
ul>
div>
<script type="text/javascript">
var shopSearch = new Vue({
el: "#shop-search",
data: {
//
searchKey: "",
//
resultData: []
},
watch: {
searchKey: function() {
const vm = this;
vm.getResultData(true).then((data) => {
vm.resultData = data;
})
}
},
methods: {
getResultData: function(ready) {
const vm = this;
return new Promise((resolve, reject) => {
if (ready) {
const data = [
vm.searchKey,
vm.searchKey + vm.searchKey,
vm.searchKey + vm.searchKey + vm.searchKey
];
resolve(data);
} else {
reject("filed");
}
})
}
}
})
script>
이 사례는 함수 떨림 방지 처리를 소홀히 했다.자, 워치의 기본적인 사용은 이렇습니다.아마도 왓츠는 단지 하나의 데이터 값을 감청했을 뿐이다. 만약 감청하고자 하는 것이 하나의 데이터 대상이라면 어떻게 감청 값의 변화를 감청해야 하는가?정답은watch의 심도 있는 감청을 사용하는 것이다.
<div id="app3">
： {
{ user.name }}，
： {
{ user.age }}，
： {
{ user.author }}
div>
<script type="text/javascript">
var app3 = new Vue({
el: "#app3",
data: {
user: {
name: " ",
age: 10,
author: " "
}
},
watch: {
user: {
handler: function(val, oldVal){
alert(" user ");
},
deep: true
}
}
})
app3.user.name = " "; // ，
app3.user.age = 30; //
script>
깊이watcher를 사용하면 대상 데이터의 변동을 감청할 수 있지만 대상 데이터의 특정한 속성 변화를 감청하려면 예를 들어user를 감청하려고 한다.author의 값 변화를 어떻게 감청해야 합니까?심플하고 거칠음:
var app3 = new Vue({
el: "#app3",
data: {
user: {
name: " ",
age: 10,
author: " "
}
},
watch: {
"user.author": function(val, oldVal){
alert(" user.author ");
}
}
})
$watch 실례 감청을 사용할 수 있습니다.
var app3 = new Vue({
el: "#app3",
data: {
user: {
name: " ",
age: 10,
author: " "
}
}
})
app3.$watch("user.author", function(val, oldVal){
alert(" user.author !");
})
확장성
문제1: 왜 많은 항목이나 예시에서 Vue의 마운트el의 값이
#를 접두사로 합니까?마운트 지점은 원소 id만 가능합니까?Vue를 처음 시작한 초보 개발자에게는 API 문서를 자세히 읽지 않았거나 API에 익숙하지 않을 때 마운트 포인트가 요소 id일 수 있다는 오해가 있을 수 있습니다.사실은 그렇지 않다. 공식 API 문서에서 이미 s가 그에 대해 설명했다.
DOM Vue 。 CSS ， HTMLElement 。즉,el 마운트 포인트의 값은 id가 아니라 다른 css 선택기일 수도 있다. 예를 들어Demo:Vue 마운트 포인트의 값을 볼 수 있다.후기
학습과 총결의 태도에 따라 쓴 글에서 어떤 오류와 문제가 있으면github에서 issues를 지적할 수 있다.글의 사례는 모두github에 놓여 있습니다. 주소:github.com/webproblem/….
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
개별 마크다운 블로그 페이지 만들기 - 13부이를 통해 개별 마크다운 기반 블로그 게시물 작성을 시작할 수 있습니다! 이 기사를 따르려면 을 시작점으로 사용하십시오. blog 페이지 디렉토리에 동적 페이지를 생성하여 시작할 수 있습니다. 이 파일[slug].j...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
