Vue에서 일반적으로 사용되는 명령어 요약
- 不言원래의
- 2018-07-26 12:53:231451검색
이 글에서 공유한 내용은 Vue에서 일반적으로 사용되는 지침을 요약한 것입니다. 내용이 매우 상세합니다. 다음으로 구체적인 내용을 살펴보겠습니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
1 v -model- v-on directive
- v-text directive
-
1.1
v-if는 조건부 렌더링 지시어로, 요소를 기반으로 삭제하고 삽입합니다. true 또는 false 표현식에서 기본 구문은 다음과 같습니다.
v-if="expression"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>표시된 결과는 다음과 같습니다. 
참고: v-if 지시문은 조건식의 값을 기반으로 요소의 삽입 또는 삭제를 수행합니다.
v-for 명령어는 배열을 기반으로 목록을 렌더링합니다. 이는 JavaScript의 순회 구문인 v-for="item in items"
name
age
{{item.name}}
{{item.age}}
v-bind: class<p><pre class="brush:js;toolbar:false;">v-bind:argument="expression"</pre></p>1.4 v-model
v-model(양식 요소가 설정된 후 값, 선택 및 선택이 무시됨), 일반적으로 d5fd7aea971a85678ba271703566ebfd 및 4750256ae76b6b9d804861d8f69e79d3 양식에 사용됩니다. h4 >양식 요소와 데이터가 양방향 바인딩(매핑 관계)을 구현하도록 합니다
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：<p id="app">
<p v-text="message"> </p>
<input type="text" v-model="message">
</p>
</body>
<script type="text/javascript"> var app = new Vue({
el:"#app",
data:{
message:"nice to meet you"
}
})</script>
expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：
<a v-on:click="doSomething">
显示结果如下、
注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。
1.2 v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --> <p v-on:click.capture="doThis">...</p> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <p v-on:click.self="doThat">...</p>
items是一个数组，item是当前被遍历的数组元素。
示例代码：
<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>1.3 v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
v-text="expresstion"
1.4 v-model
v-model（表单元素设置了之后会忽略掉value，checked，selected），常用在表单 d5fd7aea971a85678ba271703566ebfd 及 4750256ae76b6b9d804861d8f69e79d3
让表单元素和数据实现双向绑定（映射关系）
示例代码
rrreee1.5 v-on 指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听3499910bf9dac5ae3c52d5ede7383485元素的点击事件：
rrreee有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。
Greet按钮将它的单击事件直接绑定到greet()方法，而Hi按钮则是调用say()方法。
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop.prevent.capture.self.once-
rrreee.passive샘플 코드 1.5 v-on 지시문은 DOM 이벤트를 모니터링하는 데 사용됩니다. 구문은 다음과 같습니다. v-bind. 마찬가지로, 3499910bf9dac5ae3c52d5ede7383485 요소의 클릭 이벤트를 수신합니다.
메소드 호출에는 두 가지 형태가 있습니다. 메소드 바인딩(이벤트가 메소드에 대한 참조를 가리키도록 함) ) 또는 인라인 문을 사용합니다.
Greet 버튼은 클릭 이벤트를 Greeting() 메소드에 직접 바인딩하는 반면 Hi 버튼은 say() 메소드를 호출합니다. 이벤트 핸들러에서 event.preventDefault() 또는 event.stopPropagation()을 호출하는 것은 매우 일반적인 요구 사항입니다. Vue.js는 v-on에 대한 이벤트 수정자를 제공합니다. 앞에서 언급했듯이 수정자는 점으로 시작하는 명령 접미사로 표시됩니다.
.stop
.self code>🎜🎜🎜🎜<code>.once🎜🎜🎜🎜.passive🎜🎜🎜rrreee🎜🎜Vue.js는 가장 일반적으로 사용되는 두 가지 명령 v-bind 및 v-입니다. on은 약어를 제공합니다. v-bind 명령어는 콜론으로 축약할 수 있고, v-on 명령어는 @ 기호로 축약할 수 있습니다. 🎜🎜rrreee🎜1.6 v-text 지시어는 주로 페이지가 처음 로드될 때 {{}}가 페이지에 표시되는 것을 방지하는 것입니다🎜rrreee🎜관련 권장 사항: 🎜🎜🎜ECMAScript에서 typeof 사용 예🎜🎜🎜 🎜vue. js 트리 모양 테이블 캡슐화를 구현하는 방법은 무엇입니까? vue.js🎜🎜에서 트리 테이블을 구현하는 방법
위 내용은 Vue에서 일반적으로 사용되는 명령어 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!