Vue.js - (simple review, knowledge sorting)

Keywords: Vue Javascript Attribute

VUE

Vue (pronunciation / vju ː /, similar to view) is a set of progressive JavaScript framework for building user interface. Unlike other large frameworks, Vue is designed for bottom-up, layer by layer applications. Vue's core library only focuses on visual layers, which facilitates integration with third-party libraries or existing projects

Article directory

1, the constructor.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Vue Test case</title>
 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>

 <div id="vue_det">
  <h1>site : {{site}}</h1>   // {{}} interpolation expression
  <h1>url : {{url}}</h1>	
  <h1>{{details()}}</h1>
 </div>
 
 <script type="text/javascript">
  var vm = new Vue({      // Each Vue is to be instantiated
   el: '#vue_det',            //Get the id element Vue? Det
   data: {            		//data definition properties
    site: "test",              
    url: "www.run.com",
    alexa: "10000"
   },
   methods: { 			//methods defining functions
    details() {
     return  this.site + " Vue";
    }
   }
  })
 </script>
</body>
</html>   //Test code source rookie tutorial

2,v- directive

v-text v-html

<p v-text="msg">It's cloudy today</p>  //replace text   
<p v-html="strHtml"></p>          //Support for html tags

v-if (add or remove) v-show (show and hide)
Pass the value of boolean type (true,false)
Redraw reflow

<p v-if="isShow">I am v-if</p>   		//isshow:false
<p v-show="isShow">I am v-show</p>   //isshow:false

**v-bind **
Bind variable value to property

<!-- Complete grammar -->
<a v-bind:href="url"></a>
<!-- Abbreviation -->
<a :href="url"></a>
    <p :class="{box1:isShow,box2:isShow}"></p>   //bool type control display
    <p :class="[a,b]"></p>		//Direct display

style binding (will overwrite)

<p :style="{color:a,fontSize:b}">1234567u</p>    
<p :style="[aa,bb]">127u</p>

v-model
Two way data binding

 <p @click="fn">Corresponding to vue Instance data Container acceptance in</p>    
 <input type="text" v-model="str">

 methods:{             
 fn(){                 
 console.log(this.str);                 
 this.str += '★';             
 }         
 }

**v-on **

<!-- Complete grammar -->
<a v-on:click="doSomething"></a>
<!-- Abbreviation -->
<a @click="doSomething"></a>

v-once
Events are loaded only once

3. Block default events

Event modifier
. prevent (event.preventDefault()) block default events
. once only triggers a callback once

<button @click.once="fn3">Point me</button>   //Trigger only once
<a href="http://www.baidu.com" @click.prevent="fn3">Point me2</a>   //Stop the original jump

4. Event object

Event object

<button @click="fn3($event)">Point me1234567</button>    
<button @click="fn3">Point me123</button>
//		fn3(e){              
//                console.log(e)        
//                    }

5,v-for

array
Syntax: item in items (item of items source)

<ul>        
	<li v-for=" item in items">{{item.name}}</li>        //Three lines Li ZS, LS, w2m
	<li v-for="item of arr">{{item}}</li>        //Three lines Li a, B, C
	<li v-for=" (item,index) in items">            //Three lines with index 1 --- ZS, 2 --- ls, 3 --- w2m
		{{index}}  -----  {{item.name}}       
	</li>
</ul>

<script>
	new Vue ({
	arr:['a','b','c'],
	items:[
	{                name:'zs'            },
	  {                name:'ls'            },
	  {                name:'w2m'            }],            
	})
<script>

object

<ul>        
	<li v-for=" (value,key,index) in items">            
	{{index}} --- {{key}} --- {{value}}        //1---name---zs,2---age---11,3---job---coder
	</li>    
</ul>

   items:{               
	  name:'zs',                 //Creating an object in the vue constructor
	  age:11,               
	  job:'coder'            
	  },

:key(v-bind:key)
Make sure the rendered elements are reused,

v-for    //: key attribute is very important in interview question scenario: changes in the list data will cause the view to be updated again. In order to improve the performance, it is convenient to update    
<li v-for=" (value,key,index) in items" :key="index">        
{{index}} --- {{key}} --- {{value}}    
</li>

6. Flash screen v-clock

In css, add:

	[v-cloak] {
	  display: none;
	}

Then add v-clock to the loading point in html to solve this problem

	<div id="app" v-cloak>
	    {{msg}}
	</div>

7. filter

Local filter

	let vm1 = new Vue({        
		el:"#app",        
		data:{            
			msg:"opqrst"        
			},        
		methods:{},        
		filters:{            //Definition in vue
			'aaa':function (value) {                
			return value.charAt(0).toUpperCase()+value.substr(1)//Return initial capital
	            			},            
	           	      
	            	}
	    })
	```
	**usage**

```javascript
<div id="app">    
	{{msg | aaa}}    
</div>

Global filtering

	Vue.filter('ccc',function (value) {        //Setting up a filter on vue
		return value.toUpperCase()    
	});

	let vm2 = new Vue({        
		el:"#app2",        
		data:{            
			msg:'hello'        
			}    
	})

Filters can be used on v-bind

 	<div v-bind:id="'666' | f1('★')">66</div>   //Bind 666 ★ on the id

	Vue.filter('f1',function (value,yuan) {        
		return value + yuan;    
		});

8. Ref takes dom element

We can call the element by binding to the ref specific attribute

	<input type="text" ref="username" id="sr">// Create a ref named username
	<button @click="getVal">click</button>


	let vm = new Vue({            
		el: '#app',
           	 methods: {                
           		 getVal() {
	           		 console.log(this.$refs.username.value)//Output what you typed
	           		 console.log(this.$refs)                //username:input#sr
           		 	}            
           		 }        
           		 })

9. Custom instruction

Overall situation

<div id="app">
    <input type="text" v-focus>
</div>

//Ellipsis part



Vue.directive('focus',{        
	inserted(dom){            //Who to add to
		dom.focus();//Get focus automatically        
	}    
})

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

local

	new Vue({        
		el:'#app',        
		data:{
        		},        
        	directives:{            //Let's put the directives in the vue
	        	'focus':{                
		        	inserted(dom) {                    
		        	dom.focus();                
		        	}            
	        	}        
        	}    
        })

10. Calculation properties

Main functions to make up for the shortcomings of v-model

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


new Vue({        
		el: '#app',        
		data: {            
			msg: 'hello'        
		},        
		methods: {
		},        
		computed: {            
			fn: function () {                              
			return this.msg+'*'          //The model is output as is, and the calculation attribute can subdivide the operation
		}        
	}    
})

11. To be continued

Published 2 original articles, won praise 6, visits 1991
Private letter follow

Posted by andy75180 on Thu, 05 Mar 2020 20:22:21 -0800