Vue basic operation learning record

#: id selector
. : calss selector

Basic steps for Vue introduction

1. Import the development version of Vue js
2. Create a Vue instance object and set the el attribute and data attribute
3. Use template syntax to render data to the page

el: mount point

vue instance scope: the element hit by the el option and its internal descendant elements

Data: data object

The data to be used in vue is defined in data. Complex types of data can be written in data. When rendering complex types of data, you can follow the syntax of js

Vue instruction: a special set of syntax starting with v -

1. Content binding, event binding

v-text: sets the text value of the label (textContent)
The default writing method will replace all contents, and the specified contents can be replaced by the difference expression {}}
Write expression is supported internally

v-html: innerHTML for setting Tags

	<div id="app">
		<p v-html="content"></p>
	</div>
	
	var app=new Vue({
		el:"#app"
		data:{
			content:"<a href='#'>xxxxx</a>"
		}
	})	

v-on: binding events for elements
The event name does not need to be written on
Instructions can be abbreviated as@
The bound method is defined in the methods property
Method can access the data defined in data through the this keyword

    <div id="app">
        <p v-html="content"></p>
        <input type="button" value="Event binding"  @click="doit">
        <input type="button" value="Event binding"  @mouseenter="doit">
        <input type="button" value="Event binding"  v-on:click="doit">
        <h2 @click='change'>{{xxx}}</h2>
    </div>

    <!-- Development environment version with helpful command line warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>   
        var app =new Vue({
            el:"#app",
            methods:{ 
                doit:function(){
                    alert("do IT");
                    //logic
                },
                change:function(){
                    this.xxx+="yyy"
                }
            },
            data:{
                xxx:"what",
                message:"HELLO VUE!",
                school:{
                    name:" "
                },
                content:"<a href='#'>xxxxx</a>"
            }
        })
    </script>

2. Display switching, attribute binding

v-show: switch the display and hiding of elements according to the true and false expression values
The principle is to modify the display of elements to realize hidden display
The contents after the instruction will eventually be parsed into Boolean values
Elements with a value of true are displayed and elements with a value of false are hidden
After the data changes, the display status of the corresponding element will be updated synchronously

    <div id='app'>
        <img src="./man.jpg" v-show='true'>
        <img src="./man.jpg" v-show='isShow'>
        <img src="./man.jpg" v-show='age>18'>
    </div>
    
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                isShow:true,
                age:25
            }
        })
    </script>
    

v-if: switch the display and hiding of elements according to the true and false expression values (manipulate dom elements)
The essence is to switch the display state by manipulating dom elements
The value of the expression is true, and the element exists in the dom tree. If it is false, it will be removed from the dom tree
v-show is used for frequently switched elements, and v-if is used on the contrary. The switching consumption of the former is small

    <div id="app">
        <p v-if="true">This is a p label</p>
        <p v-if="isShow">This is a p label</p>
        <p v-if="expression">This is a p label</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true
            }

        })
    </script>

v-bind: sets the attributes of the element
v-bind: attribute name = expression

    <div id="app">
        <img v-bind:src="imgSrc" v-show='true'>
        <br>
        <img :src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!!!'">
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                imgSrc:"./women.jpg",
                imgTitle:"title"
            }

        }      
        )
    </script>

3. List loop, form element binding

v-for: generate list structure based on data
Arrays are often used in conjunction with v-for
The syntax is (item, index) in data
item and index can be used in conjunction with other instructions
The update of array length will be synchronized to the page, which is responsive

    <div id="app">
        <ul>
            <li v-for="item in arr">Test:{{item}}</li>
        </ul>

        <ul>
            <li v-for="(item,index) in arr">{{index}}Test:{{item}}</li>
        </ul>

        <h2 v-for="item in food">{{item.name}}</h2>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
                food:[
                    {name:"hamburger"},
                    {name:"Sandwich"},
                    {name:"Dumplings"}
                ]
            },

        })
    </script>

v-on supplement: passing custom parameters, event modifiers
Event bound methods write out the form of function calls, and you can pass in custom parameters
When defining a method, you need to define formal parameters to receive the incoming arguments
Follow the events Modifiers can limit events
. Enter can limit the departure key to enter
There are several event modifiers

    <div id="app">
        <input type="button" value="click" @click="test">
        <input type="button" value="click" @click="doIT(666,'Buddy')">
        <input type="text" @keyup.enter="sayhi">
    </div>
    
	<script>
         var app = new Vue({
             el:"#app",
             methods:{
                 test:function(){
                     console.log("hello world");
                 },
                 doIT:function(p1,p2){
                     console.log("xxxxx");
                     console.log(p1);
                     console.log(p2);
                 },
                 sayhi:function(){
                     alert("Have you eaten yet?")
                 }

             }
         })
     </script>

v-model: get and set the value of form element (bidirectional data binding)
The function of v-model instruction is to set and obtain the value of form elements conveniently
The bound data is associated with the form element value
Bound data - the value of the form element

    <div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
     <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"xxxxx"
            }
        })