• ArthurSlog

  • SLog-15

  • 1 Year,

  • Through China,

  • July 18th 2018

Scan the QR code on wechat and follow my official account

Standing at the crossroads of The Times, the winner will be the most unafraid to learn and accept new things

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-else.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">
            <h1 v-if="state1 === state2">Hello ArthurSlog, "state1" === "state2"</h1>
            <h1 v-else>Hello ArthurSlog, "state1" ! == "state2"</h1>
        </div>
        <script>
        new Vue({
            el: '#app',
            data: {
                state1: 'ok',
                state2: 'no'}})</script>
    </body>
</html>
Copy the code

  • Now you can open your browser, type 127.0.0.1:3000/ V-else. HTML in the address bar, and you’ll see: Hello ArthurSlog, “state1”! == “state2”, the value of state1 is not equal to the value of state2, so the second string is displayed

  • So far, we have introduced the VUE template instruction V-else again, for more information, please refer to the vUE official 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