1, Function and function of vue

• The working mode is as follows

1. Do not operate DOM

2. Abbreviation of single page application web project: SPA

3. At present, various new frameworks adopt syntax similar to Vue or React as the subject method. Wechat Applet / MpVue

4. Mastering the development syntax of Vue is equivalent to mastering the new development mode, which can adapt to most of the current technical environment

• Vue features

1. Data driven view allows us to focus only on data

2.MVVM bidirectional binding

3. Enhance the html function through instructions

4. Componentization, reuse code

5. Developers generally only focus on data

• Installation and use of Vue

1. Import directly through the path, address: https://vuejs.org/js/vue.min.js

2. Download directly and import locally

3. npm installation is adopted. The command is npm install vue

Tip: Note Vue JS does not support IE8 and below

Example demo:

<script src="https://vuejs.org/js/vue.min.js"></script>

 

<div  id="app">
        {{msg}}
    </div>
    
    <script>
        var vm = new Vue({
            //el have access to id Selector calss Selector dom object
            //el Cannot attempt to use html as well as body
            el:document.getElementById("app"),
            data: {
                    msg:"Hello world!"
                
            },
        });
    </script>

 

Use js expression, ternary operator and method call in interpolation expression -- >

        <p>{{string}}</p>
        <p>{{count == 100}}</p>
        <p>{{count < 100}}</p>
        <p>{{count+10}}</p>
        <p>{{string.split("|")}}</p>
        <p>{{count < 100?"less than": "greater than}}</p>

Instructions -- all instructions that begin with v - are called vue instructions

• v-text and v-html # compare with innerText and innerHTML
• Interpolation expression 1 Is the data rendering at insertion 2 Ugly braces appear before rendering is complete
• v-text and v-html are integral data replacement {2 Nothing will appear before the rendering is complete (except what is in the rendering label in advance)
• Note: try not to use or prohibit the use of v-html when it is not necessary, because xss cross site scripting attack will occur

<div id="app">
        <p v-text ="string"> 1236</p>
        <p v-html ="string">46413</p>
    </div>

• v-if # greater overhead # is suitable for extraordinary switching display state, and it does not need to be rendered during initial rendering. It is suitable for multiple judgment
• v-show has low overhead and is suitable for ordinary switching display states

     <p v-if ="isShow"> {{string}}</p>
     <p v-show ="isShow">{{46413}}</p>

• v-on: click (@ click)
• @click.once is triggered only once
• click.prevent block default events
• click.stop stop bubbling event

<button v-on:click="clickMe('Ultraman')">Click me</button>
        <!-- click.once It will only be triggered once -->
        <button @click.once="clickOnce">Trigger only once</button>
        <!-- click.prevent Block default events -->
        <a href="http://www.baidu.com" @click.prevent="stopjump">Baidu</a>
        <div @click="alert(1)">
            <!-- click.stop Prevent bubbling events -->
            <div>
                <div @click.stop="alert(3)">
                    I am div
                </div>
            </div>
        </div>

• input tag change} v-bind simulates the bottom layer of v-model

　　　　<input type="text" @change="change">
　　　　<input type="text" v-bind:value="string" @input="inputChange($event)">

                change(){
                    alert("The data has changed");
                },
                inputChange(e){
                    console.log("Changed");
                    this.string = e.target.value;
                }                

• v-for iteration; loop

<ul>
            <!-- array Is the object that needs to be rendered item Is the alias of the object that receives each iteration -->
            <li v-for="item in array">{{item}}</li>
            <!-- Always remember that the first parameter is to obtain the data of each iteration, and the second parameter depends on the actual situation. If it is an iterative array, it is the index of the array -->
            <li v-for="item in objectArray">{{item.id}}----{{item.name}}</li>
            <!-- If it is an iterative object, the order is different, and the first parameter is the attribute value，The second parameter is the of the attribute key，The third parameter is the index -->
            <li v-for="obj in object">{{boj}}</li>
            <li v-for="(v,k,i) in object">{{k}}--{{v}}--{{i}}</li>
            <!-- for loop -->
             <li v-for="num in 10">{{num}}--Specify data</li>
 </ul>

• v-bind is used to bind all attributes on the tag
• When the attribute variable on the label is either dynamic or needs to be changed
• Abbreviation:

<p v-bind:id="'ptest'"></p>
        <p :id="idName"></p>
        <p :class="showStyle?'p-style1':''">pppppp</p>
        <p :class="'p-style1':showStyle">pppppp</p>
        <p :class="'[bolder',showStyle?'p-style1':'p-style2']">pppppp</p>
        <p :class="'[bolder',{'p-style1':'p-style2'}]">pppppp</p>
        <p :style="color:'red'">ppppppp</p>
        <button @click="changeColor">Discoloration</button>


CSS
<style>
        .p-style1{
            background-color: aquamarine;
            color:red;
        }
        .p-style2{
            background-color: aquamarine;
            color:red;
        }
</style>

• The role of v-model, v-cloakd and v-once

　　<div id="app" v-cloak>
        {{msg}}
        {{range}}
        <br>
        <!-- v-model Can handle input,textArea,select,radio,checkbox,botton -->
        <!-- c-cloak cue The built-in instruction in is used to remove the attribute of the instruction after loading, that is, we hope that any style that is not rendered before loading can be passed v-cloak present-->
　　　　　<!-- v-once With this instruction, the page view is rendered only once --> 　
        <!-- <input type="text" :value="msg" @input="changeInput($event)"> -->
        <input type="text" v-model="msg">
        <input type="text" v-model="range">
        <input type="range" v-model="range">
     </div>
     <script>
       setTimeout(function(){
        var vm = new Vue({
            el:"#app",
            data: {
                msg:"Hello",
                range:100
            },
            methods: {
                changeInput(e){
                    this.msg = e.target.value;
                }
            },
        });},5000)