• ArthurSlog

  • SLog-22

  • 1 Year,

  • Through China,

  • July 21th 2018

Scan the QR code on wechat and follow my official account

Fairness is the placebo of the weak competition is the touchstone of the strong

Development Environment MacOS(High Sierra 10.13.5)

Required information and information sources:

  • All source code addresses for this article

  • Vue. Js template directive (Directive), currently (2018/7/17) there are 13, respectively:

  1. v-text

  2. v-html

  3. v-show

  4. v-if

  5. v-else

  6. v-else-if

  7. v-for

  8. v-on

  9. v-bind

  10. v-model

  11. v-pre

  12. v-cload

  13. v-once

  • Vue.js template directives are similar to programming language “keywords” or “reserved words”, such as if (judge statement keyword), for (loop statement keyword).

Start coding

  • First, set up the static server and switch to the desktop path

cd ~/Desktop

  • Create a folder node_vue_directive_LEARningLoad

mkdir node_vue_directive_learningload

  • Switch to the new folder

cd node_vue_directive_learningload

  • Use NPM to initialize the Node environment, press Enter to complete the initialization

npm init

  • Install KOA and KOA-static using NPM

sudo npm install koa koa-static

  • With reference to the KOA-static instruction manual, we write two files index.js and index. HTML under the current path

index.js

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();

// $ GET /package.json
app.use(serve('. '));

app.listen(3000);

console.log('listening on port 3000');
Copy the code

index.html


      
<html>

<head>
    <meta charset="utf-8">
    <title>ArthurSlog</title>
</head>

<body>

    <h1>The static web server by ArthurSlog</h1>

</body>

</html>
Copy the code
  • Next, we will write the vue.js template instruction code according to the use scenario

v-cloak.html


      
<html>
    <head>
    <meta charset="utf-8">
    <! -- Development environment version, including helpful command line warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>ArthurSlog</title>
    </head>
    <body>
        <div id="app">
            <div v-cloak>{{ msg }}</div>
        </div>
        <br>
        <button onclick="loadmsg()">Load msg</button>

        <script>
            function loadmsg (a) {
                new Vue({
                    el: '#app',
                    data: {
                        msg: 'Hello ArthurSlog'}})}</script>

        <style>
            [v-cloak]{ display:none; }
        </style>
    </body>
</html>
Copy the code
  • Open your browser and type 127.0.0.1:3000/ V-cloat.html in the address bar. The text “Hello ArthurSlog” is not displayed, only the button “Load MSG” is displayed. The button’s “click” event is associated with the “loadMsg ()” method, which contains” vue object instantiation “,
function loadmsg () {
    new Vue({
        el: '#app'.data: {
            msg: 'Hello ArthurSlog'}})}Copy the code
  • On the other hand, in the style file, add:
[v-cloak]{ display:none; }
Copy the code

  • Now click the button, the text “Hello ArthurSlog” appears, and the button “Load MSG” responds to the “click” event, which calls the “loadmsg()” method, The “loadMsg” method performs the “instantiation of the Vue object”. The key point is that the V-cloak command keeps the specified element and its children hidden until the “vue object instantiation” is complete

  • The VUE template command V-cloak is used as an example. For more information, please refer to the official VUE manual.

Please follow my wechat account ArthurSlog

Scan the QR code on wechat and follow my official account

If you like my article, please like it and leave a comment

thank you