• ArthurSlog

  • SLog-17

  • 1 Year,

  • Through China,

  • July 19th 2018

Scan the QR code on wechat and follow my official account

In fact, the outcome is the most important thing. No one cares about your process or even cares about you at all

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-for.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-for="item in items">
            {{ item.text }}
            </div>
        </div>
        <script>
        new Vue({
            el: '#app',
            data: {
                items: [
                    {id: 0, text: 'Hello ArthurSlog~ id: 0' + '\n'},
                    {id: 1, text: 'Hello ArthurSlog~ id: 1' + '\n'},
                    {id: 2, text: 'Hello ArthurSlog~ id: 2' + '\n'}]}})</script>
    </body>
</html>
Copy the code
  • Now you can open your browser, type 127.0.0.1:3000/v-for.html in the address bar, and you’ll see:
Hello ArthurSlog~ id: 0
Hello ArthurSlog~ id: 1
Hello ArthurSlog~ id: 2
Copy the code
  • Notice here that we have created an object “items”, which is an array containing three objects, each with two properties “ID” and “text”, each with different values:
items: [
    {id: 0.text: 'Hello ArthurSlog~ id: 0' + '\n'},
    {id: 1.text: 'Hello ArthurSlog~ id: 1' + '\n'},
    {id: 2.text: 'Hello ArthurSlog~ id: 2' + '\n'}]Copy the code
  • The syntax for “item in Items” means that you can retrieve items one by one from the “items” object, and then, each time you retrieve items, Prints the value of the object’s “text” property:
<div v-for="item in items">
{{ item.text }}
</div>
Copy the code
  • So far, we have introduced the VUE template directive V-for 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