이 글은 Vue 명령을 안내하고 일반적으로 사용되는 Vue 내장 명령 6개를 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.
명령 분류 지시문은 vue에서 개발자를 위해 제공하는 템플릿 구문 으로, 개발자가 페이지의 기본 구조를 렌더링하는 데 도움을 주는 데 사용됩니다. (학습 동영상 공유: vuejs 동영상 튜토리얼 )
에서 사용되는 데이터는 인스턴스의 data 에 정의되고, 이벤트는 인스턴스
콘텐츠 렌더링 지침의 methods 에 정의됩니다. 개발자가 DOM 요소를 렌더링하도록 지원합니다. 텍스트 콘텐츠
속성 바인딩 지침 : 개발자가 요소의 속성에 대한 속성 값을 동적으로 바인딩하도록 지원
이벤트 바인딩 지침 : 개발자가 요소에 대한 이벤트를 바인딩하도록 지원
양방향 바인딩 지침 : 개발자가 DOM을 작동하지 않고도 신속하게 양식 데이터를 얻을 수 있도록 지원합니다(데이터 소스의 변경 사항은 페이지에 동기화되고 페이지의 변경 사항도 데이터 소스에 동기화됩니다)
조건부 렌더링 지침 : 개발자가 누르도록 지원 DOM의 표시 및 숨기기를 제어해야 함
목록 렌더링 명령 : 개발자가 배열을 기반으로 목록 구조를 반복하고 렌더링하도록 지원
1. 콘텐츠 렌더링 명령 v-text
는 일반 텍스트 콘텐츠만 렌더링할 수 있으며 는 태그 내부의 원본 콘텐츠를 덮어씁니다.
<p v-text="gender">性别</p> 로그인 후 복사
{{ }} 보간 표현식
은 일반 텍스트 콘텐츠만 렌더링할 수 있지만 는 렌더링하지 않습니다. 덮어쓰기 태그 내부의 원본 콘텐츠
<p>性别：{{ gender }}</p> 로그인 후 복사
v-html
태그된 문자열을 html 콘텐츠로 렌더링할 수 있으며 태그 내부의 원본 콘텐츠를 덮어씁니다
<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 --> 로그인 후 복사
2. 속성 바인딩 지침 v-bind: 또는 :
은 요소의 속성입니다.
동적 바인딩 속성 값
<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以--> 로그인 후 복사
참고:
보간 표현식 및 v-bind도 javascript 표현식
{{ 1 + 2 }} //一元运算
{{ ok ? 'YES' : 'NO'}} //三元运算
{{ message.split('').reverse().join('') }} //字符串的反转 로그인 후 복사
<div :id="'list-' + id"></div> <!--字符串和变量的拼接--> 로그인 후 복사
의 작업을 지원합니다. 3. 이벤트 바인딩 지침 v-on: 또는 @
이벤트를 요소
<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
methods:{
add(){
this.count ++; //相当于vm.count ++;
}
}
})
</script> 로그인 후 복사
pass 매개변수
에 바인딩하려면 매개변수가 전달되지 않습니다. 기본 형식 매개변수 이벤트가 있습니다. 는 객체이며 내부의 대상 속성은 현재 바인딩된 이벤트의 DOM 요소를 가리킵니다. 매개변수 전달: 이벤트를 전달하고 유지하려면 이벤트를 덮어쓰세요. 다른 실제 매개변수를 수동으로 전달할 수 있습니다. 형식 매개변수는 선택사항입니다event，它是一个对象，里面的target属性指向的是当前绑定事件的DOM元素传一个参：event则会被覆盖，为了能用自己传的参又能保留event，则可以手动再传一个实参$event<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
methods:{
add(n,event){
//修改
this.count +=n;
//判断
if(this.count % 2 === 0)
event.target.style.color = 'red';
else
event.target.style.color = '';
}
}
})
</script> 로그인 후 복사
이벤트 수정자
이벤트 수정자 Description .prevent기본 동작 방지(예: 링크 점프 방지, 양식 제출 방지) 이벤트 버블링 방지 캡처 모드에서 현재 이벤트 핸들러를 트리거합니다 바운드 이벤트는 한 번만 트리거됩니다. 이벤트 핸들러는 event.target이 현재일 때만 트리거됩니다. 요소 자체 <!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button> 로그인 후 복사
키 수정자
키 수정자 설명 .esc입니다. 프레스 키보드에서 esc 키를 눌렀을 때 키보드에서 Enter 키를 눌렀을 때 <!--举个例子-->
<!--keyup是事件名称 .esc是按键修饰符 clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput"> 로그인 후 복사
4. 양방향 바인딩 명령
v-model
<input type="text" v-model="username"> 로그인 후 복사
<select v-model="city">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select> 로그인 후 복사
독점 수정자
독점 수정자Description .number 사용자가 입력한 값을 숫자형으로 자동 변환 사용자가 입력한 앞뒤 공백 문자 자동 필터링 자동으로 초점을 잃었을 때 데이터 업데이트(보통 실시간 업데이트) <!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span> 로그인 후 복사
五、条件渲染指令 v-show
控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换
<p v-show="flag">这是被 v-show 控制的元素</p> 로그인 후 복사
v-if
控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少
<p v-if="flag">这是被 v-if 控制的元素</p> 로그인 후 복사
v-else-if
配合 v-if 指令一起使用，否则将不会被识别
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div> 로그인 후 복사
六、列表渲染指令 v-for
基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"
item是 被循环的每一项 ，名字随意 items是 待循环的数组 ，名字随意 <table>
<thead>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
</thead>
<tbody>
<!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
<!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
<!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
<!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
<tr v-for="(item,index) in list">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
------------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
data: {
list: [
{ id: 1, name:'张三', gender:'男' },
{ id: 2, name:'李四', gender:'女' },
{ id: 3, name:'王五', gender:'男' }
]
}
})
</script> 로그인 후 복사
注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性
key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系） key 的属性值只能是 字符串/数字 类型，否则报错 key 的属性值必须具有唯一性（不重复 且 内容和值有一个强制的绑定关系 ） <tr v-for="(item,index) in list" :key="item.id"> 로그인 후 복사
（学习视频分享：web前端开发 、编程基础视频 ）
위 내용은 Vue 명령어 시작하기: 일반적으로 사용되는 6가지 내장 명령어에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
vue.js vs. React : 프로젝트 별 고려 사항
Apr 09, 2025 am 12:01 AM
vue.js는 중소형 프로젝트 및 빠른 반복에 적합한 반면 React는 크고 복잡한 응용 프로그램에 적합합니다. 1) vue.js는 사용하기 쉽고 팀이 불충분하거나 프로젝트 규모가 작는 상황에 적합합니다. 2) React는 더 풍부한 생태계를 가지고 있으며 고성능 및 복잡한 기능적 요구가있는 프로젝트에 적합합니다.
Vue 용 버튼에 기능을 추가하는 방법
Apr 08, 2025 am 08:51 AM
HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
vue.js로 JS 파일을 참조하는 방법
Apr 07, 2025 pm 11:27 PM
vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.
Vue에서 시계를 사용하는 방법
Apr 07, 2025 pm 11:36 PM
vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.
Vue 다중 페이지 개발은 무엇을 의미합니까?
Apr 07, 2025 pm 11:57 PM
VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.
Vue가 이전 페이지로 돌아 오는 방법
Apr 07, 2025 pm 11:30 PM
vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.
VUE 버전을 쿼리하는 방법
Apr 07, 2025 pm 11:24 PM
Vue DevTools를 사용하여 브라우저 콘솔에서 vue 탭을 보면 VUE 버전을 쿼리 할 수 있습니다. npm을 사용하여 "npm list -g vue"명령을 실행하십시오. package.json 파일의 "종속성"객체에서 vue 항목을 찾으십시오. Vue Cli 프로젝트의 경우 "vue -version"명령을 실행하십시오. & lt; script & gt에서 버전 정보를 확인하십시오. vue 파일을 나타내는 html 파일의 태그.
See all articles
