• ArthurSlog

  • SLog-13

  • 1 Year,

  • Through China,

  • July 17th 2018

Scan the QR code on wechat and follow my official account

Persistence is the best promise

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-show.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-show="ok">Hello ArthurSlog, "ok" is true and "no" is false</h1>
            <h1 v-show="no">Hello ArthurSlog, "no" is false</h1>
        </div>
        <script>
        new Vue({
            el: '#app',
            data: {
                ok: true,
                no: false}})</script>
    </body>
</html>
Copy the code

  • Now you can open your browser, type 127.0.0.1:3000/ V-show.html in the address bar, and you’ll see: The value of “OK” is associated with the value of “show”. When “OK” is equal to “true”, the value of “show” is equal to “true”, so the text is displayed. When the value of “no” is associated with “show”, when the value of “no” is equal to “false”, the value of “show” is also equal to “false”, so the text is not displayed

  • So far, we have introduced the VUE template directive V-show again, more usage methods and 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