• ArthurSlog

  • SLog-7

  • 1 Year,

  • Through China,

  • July 14th 2018

Scan the QR code on wechat and follow my official account

Trains to their destinations may be late but they are never absent

Development Environment MacOS(High Sierra 10.13.5)

Information needed:

  • Vue template syntax official manual

  • My last article: Single-page Application (SPA) with vUE Front-end Framework

Start coding:

  • Switch to the desktop path

cd ~/Desktop

  • Create a new folder

mkdir node_vue_TemplateSyntax_learningload

  • Switch to the new folder path

cd node_vue_TemplateSyntax_learningload

  • Initialize the NodeJS project environment using the NPM command and press Enter to complete the initialization

npm init

  • Install KOA and KAo-static

sudo npm install koa koa-static

  • Administrator permission is required. Enter your password

  • Create files index.js and index. HTML in the current path, where index.js implements a static Web server:

index.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">
        <p>Hello  {{ rawHtml }}                  </p>
        <p>Hello  <span v-html="rawHtml"></span> </p>
        </div>
        <script>
        new Vue({
            el: '#app',
            data: {
                rawHtml: '<span style="color:red">ArthurSlog</span>'}})</script>
    </body>
</html>
Copy the code

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
  • Now switch to the ~/Desktop/node_vue_TemplateSyntax_learningload path

cd ~/Desktop/node_vue_TemplateSyntax_learningload

  • Start the static Web server

node index.js

  • Open a browser, enter 127.0.0.1:3000 in the address box, and press Enter. The following information is displayed:
Hello <span style="color:red">ArthurSlog</span>

Hello ArthurSlog
Copy the code
The second line above displays the ArthurSlog in red
Please note that

index.html

<p>Hello  {{ rawHtml }}                  </p>
<p>Hello  <span v-html="rawHtml"></span> </p>
Copy the code

index.js

        <script>
        new Vue({
            el: '#app',
            data: {
                rawHtml: '<span style="color:red">ArthurSlog</span>'
            }
        })
        </script>
Copy the code
Index.html uses the V-HTML directive to take rawHtml from index.js as HTML

index.html

<p>Hello  <span v-html="rawHtml"></span> </p>
Copy the code

index.js

data: {
    rawHtml: '<span style="color:red">ArthurSlog</span>'
}
Copy the code
The other uses {{}} (no logical template) instead of the V-HTML directive, which is interpreted as the given value

index.html

<p>Hello  {{ rawHtml }}                  </p>
Copy the code

index.js

data: {
    rawHtml: '<span style="color:red">ArthurSlog</span>'
}
Copy the code
  • When you use the V-HTML directive, you can parse the given value in HTML as follows:
First, put the HTML content you want to execute in the rawhTML variable:
rwahtml: '<span style="color:red">ArthurSlog</span>'
Copy the code
Second, extract your HTML tags, which in this case refer to <span></span> :
<span></span>
Copy the code
Then, attach the parse instruction v-html to the tag:
<span v-html></span>
Copy the code
Finally, assign the variable rawhTML to the V-HTML directive with double quotes “rawhTML” :
<span v-html="rawHtml"></span>
Copy the code
  • So far, we have seen the use of V-HTML directives in the template syntax of the VUE framework.

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