vue front end frame day 1

Keywords: Vue IE

vscode used
Quickly create html code! (English) + Tab

My first vue code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
         <!--Flashing problem-->
        <p v-cloak>{{msg}}</p>
         <!--No flicker problem-->
        <h4 v-text="msg"></h4>

        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
         <!--Can resolve html-->
        <div v-html="msg2">{{msg2}}</div>


        <!--The following two are equivalent-->
        <input type="button" value="Button" v-bind:title="mytitle + msg + 'Ha ha ha'">
        <input type="button" value="Button" :title="mytitle + msg + 'Ha ha ha'" v-on:click="show">
  
        <input type="button" value="Button" :title="mytitle + msg + 'Ha ha ha'" @mouseover="show">
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'1234',
                msg2:'<h1> I am h 1   Ha ha ha ha</h1>',
                mytitle:'I am title'
            },
            methods:{
                show:function(){
                    alert('hello')
                }
            }
        })
    </script>
    
</body>
</html>

v-cloak
1. Using v-clock can solve the problem of interpolation expression flicker
v-text
1. There is no flicker of interpolation expression
2. Contents to be covered
v-html
Can parse html format in string
v-bind: it can be used directly:
Instructions for binding properties (variables in string)
v-on: can be abbreviated and used directly@
: Click to bind a click event
: mouseover: binding a mouse touch event

Running lamp case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="go" @click="go">
        <input type="button" value="stop" @click="stop">
        <h4>{{msg}}</h4>
    </div>

    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                msg:'Brothers, come with me~~!!',
                intervalId:null
            },
            methods:{
                
                /*ES6 Writing method*/
               
                go(){

                    if(this.intervalId !=null){
                        return ;
                    }
                    //=>Arrow function solves this pointing problem
                   this.intervalId = setInterval(() => {
                      //  console.log(this.msg)
                    var st = this.msg.substring(0,1)
                    var end = this.msg.substring(1)
                    this.msg=end+st
                    
                    },50)
                },

                stop(){
                    clearInterval(this.intervalId)
                    this.intervalId = null;
                }
            }
        })
    </script>
</body>
</html>

Event modifier
. stop prevents bubbling
.prevent
.capture
.once
.self

<!-- Use  .stop  Stop bubbles -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="Poke him" @click.stop="btnHandler">
    </div> -->

    <!-- Use .prevent Block default behavior -->
    <!-- <a href="http://Www.baidu.com "@ click. Prevent =" LinkClick "> if you have any questions, go to Baidu first < / a > -- >

    <!-- Use  .capture The mechanism of capturing trigger events -->
    <!-- <div class="inner" @click.capture="div1Handler">
      <input type="button" value="Poke him" @click="btnHandler">
    </div> -->

    <!-- Use .self The implementation only triggers the event handler when the current element is clicked -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="Poke him" @click="btnHandler">
    </div> -->

    <!-- Use .once Event handler triggered only once -->
    <!-- <a href="http://Www.baidu.com "@ click. Prevent. Once =" LinkClick "> if you have any questions, go to Baidu first < / a > -- >


    <!-- Demonstration: .stop and .self Difference -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="Poke him" @click.stop="btnHandler">
      </div>
    </div> -->

    <!-- .self It can only prevent the triggering of bubbling behavior on oneself, but not really prevent bubbling behavior -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="Poke him" @click="btnHandler">
      </div>
    </div> -->

v-model

Posted by bow-viper1 on Tue, 12 Nov 2019 11:18:58 -0800

Programmer Group

vue front end frame day 1

Hot Keywords