Vue.js - (simple review, knowledge sorting)

Keywords: Vue Javascript Attribute


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>
 <meta charset="utf-8">
 <title>Vue Test case</title>
 <script src=""></script>

 <div id="vue_det">
  <h1>site : {{site}}</h1>   // {{}} interpolation expression
  <h1>url : {{url}}</h1>	
 <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: "",
    alexa: "10000"
   methods: { 			//methods defining functions
    details() {
     return + " Vue";
</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>

Two way data binding

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

 this.str += '★';             

**v-on **

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

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="" @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)        
//                    }


Syntax: item in items (item of items source)

	<li v-for=" item in items">{{}}</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}}  -----  {{}}       

	new Vue ({
	{                name:'zs'            },
	  {                name:'ls'            },
	  {                name:'w2m'            }],            


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

	  name:'zs',                 //Creating an object in the vue constructor

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}}    

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>

7. filter

Local filter

	let vm1 = new Vue({        
		filters:{            //Definition in vue
			'aaa':function (value) {                
			return value.charAt(0).toUpperCase()+value.substr(1)//Return initial capital

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

Global filtering

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

	let vm2 = new Vue({        

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>

//Ellipsis part

	inserted(dom){            //Who to add to
		dom.focus();//Get focus automatically        

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


	new Vue({        
        	directives:{            //Let's put the directives in the vue
		        	inserted(dom) {                    

10. Calculation properties

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

<div id="app">    
	<input type="text" v-model="msg">    

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