Summary of instructions in vue

Vue.js syntax summary

vue.js instructionsAll start with the v- prefix, and must be written in the opening tag as an attribute of the tag
The responsibility of the instruction is to act on the DOM responsively when the value of the expression changes.

Specified syntax:

				v-<name>[:param][.sync][=value]
					name:代表指令的名称	
					sync:代表的是系统修饰符
					value:代表的是数据的值

• v-if
• v-show
• v-else
• v-else-if
• v-for
• v-bind
• v-on
• Abbreviation of v-on and v-bind
• v-text and v-html interpolation operations
• v-model

v-if instruction

v-if is a conditional rendering instruction, which deletes and inserts elements according to the true or false of the expression.

eg:
	<div>
		<p v-if="yes">hello world<p>
		// v-if 指令将根据表达式yes的值的真假来添加或移除p元素
	</div>

v-show command

v-show is also a conditional rendering instruction, which can control the hiding and reality of dom elements the same as v-if. However, unlike the v-if instruction,
the elements using the v-show instruction will always be rendered to HTML, it just Simply set the CSS style attribute for the element, that is, add a style display: none;
for the element , and the element is still there, and when the element itself has display: none, then v-show will not work, popular It is said that when an element is hidden, it
will not be displayed even if its JavaScript expression is true. The reason is that the style attribute generated by v-show will not overwrite the previous one and will not modify the element itself.

v-else instruction

The v-else instruction is usually used together with v-if and v-else-if, it is used to represent the "else" part

eg:
	<div>
		<p v-if="Math.random()>0.5">今天天气真不错</p>
		<p v-else>今天天气真糟糕</p>
	</div>	

v-else-if instruction

The v-else-if instruction is usually used together with v-if and v-else, it is used to represent the "else if" part

eg:
	<div>
		<p v-if="score>90">优秀</p>
		<p v-else-if="score>80">良好</p>
		<p v-else-if="score>60">及格</p>
		<p v-else>不及格</p>
	</div>

v-for instruction

The v-for instruction renders a list based on an array. The v-for instruction usually requires the syntax of (item, index) in items to traverse each element in the array. Items is the source array, and item is the general term for traversing the elements of the array.

eg:
	<div id="app">
	 <p v-for="(x,index) in 9">
		{
   
   {x}}
	 </p>
	</div>

Note: x starts from 1 by default, and the index of each element starts from 0
js part

eg:
		<script type="text/javascript">
			new Vue({
				el:'#app',
			})
		</script>

v-bind instruction

The class list or inline style of the operation element

eg:
	<div>
		<p v-bind:class="{
   
   {open:is_open}}"></p>
	</div>

	data:{
		is_blue:true
	}

v-on instruction

Used to monitor DOM events and run some JavaScript code when triggered. If the logic of the event is complicated, the JavaScript code is usually written in a function, and v-on receives the name of the function to be called. v-on shorthand v-on:click <==> @click

eg:
	<div id="app">
		<button v-on:click="count++">
		您点击了{
   
   {count}}
		</button>
	</div>

js part

	new Vue({
		el:'#app',
		data:{
			count:0
		}
	})

Abbreviation of v-bind and v-on

v-bind is usually abbreviated as: +class name (style name)

	eg:
		<div>
			<p v-bind:class="{
   
   {open:is_open}}"></p>
		</div>
		
		// v-bind缩写
		
		<div>
			<p :class="{
   
   {open:is_open}}"></p>
		</div>
		
		//v-on 缩写
		<div>
			<p @click="count++"></p>
		</div>

v-on is usually abbreviated as @+event name

v-text sum v-html

• v-text and { {}} render the content
  v-text is used to render ordinary text
  1. Add v-text above the element start tag, if there is content in the tag body, the original content of the tag body will be overwritten and only displayed v-text rendered text

eg:
	<div id="app">
		<span v-text="msg"></span>
		<span>{
   
   {msg}}</span>
	</div>		

js part

		<script>
			new Vue({
				el:'#app',
				data:{
					mesg:'hello'
				}
			})
		</script>

Note: If there is content in the tag body, the content rendered by v-text will overwrite the content in the original tag body.

• v-html
  v-html will parse the elements as HTML tags and then output them. If there is content in the tag body, it will overwrite the original content of the tag body

eg:
	<div id="app">
		<p v-text="msg"></p>
		<p>{
   
   {msg}}</p>
	</div>		

js part

		<script>
			new Vue({
				el:'#app',
				data:{
					mesg:'<span>hello</span>'
				}
			})
		</script>

The difference between the two:v-text and { {}} expressions render data and will not parse tags. v-html can not only render data but also parse tags

v-model

• v-model realizes the two-way binding of label data, usually used in form elements, such as. v-bind can only bind one-way

	v-model="text" 等价于 v-bind:value="text", v-on:input="text=$event.target.value"
	v-bind:value="text"  	简写    :value
	v-on:input="text=$event.target.value"  简写 	@input="text=$event.target.value"

eg:

		<div id="app">
			<input type="text" v-model="text">
			<span>{
   
   {text}}</span>			
		</div>

js part

	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				text:'',
			}
		})
	</script>