Home > Article > Web Front-end > Getting started with Vue instructions: Let's talk about the six commonly used built-in instructions
This article will take you through the Vue instructions and introduce the six commonly used built-in instructions in Vue. I hope it will be helpful to everyone!
Directives are the template syntax provided by vue for developers. The basic structure used to assist developers in rendering pages. (Learning video sharing: vuejs video tutorial)
The data used is defined in the data of the instance, and the event is defined in the methods of the instance Medium
v-text
can only render plain text content, Will overwrite the original content inside the tag
<p v-text="gender">性别</p>
{{ }} The interpolation expression
can only render plain text content,Will not overwrite The original content inside the tag
<p>性别:{{ gender }}</p>
v-html
can render the tagged string into html content, will overwrite the original content inside the tag
<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->
v-bind : or:
is the attribute of the element Dynamic Binding attribute value
<input v-bind:placeholder="tips"> <!--两种写法都可以--> <input :placeholder="tips"> <!--两种写法都可以-->
Note: Interpolation expressions and v-bind Also supports the operation of javascript expressions
{{ 1 + 2 }} //一元运算 {{ ok ? 'YES' : 'NO'}} //三元运算 {{ message.split('').reverse().join('') }} //字符串的反转
<div :id="'list-' + id"></div> <!--字符串和变量的拼接-->
##v-on: Or @
Bind events for elements<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 parameters
is an object, and the target attribute inside points to the DOM element of the currently bound event
, and the formal parameter is optional
<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>
Event modifier
As long as it is an event, you can use the modifiers. Here are 5 commonly usedDescription | |
---|---|
Prevent default behavior (for example: prevent the jump of a link, prevent the submission of the form) | |
Prevent event bubbling | |
Trigger the current event handler in capture mode | |
The bound event is only triggered once | |
Only when event.target is the current element itself Trigger event processing function |
Key modifier
Modifiers that can only be used when triggering keyboard events are listed below 2 commonly usedDescription | |
---|---|
When pressing the esc key on the keyboard | |
When pressing the enter key on the keyboard |
##v-model##Quickly obtain form data (only applies to form elements , such as: input, textarea, select)
<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>
Exclusive modifier
Modifier that can only be used for v-model
.trim | |
.lazy | |
The above is the detailed content of Getting started with Vue instructions: Let's talk about the six commonly used built-in instructions. For more information, please follow other related articles on the PHP Chinese website!