nodeJs + vue.js 小案例

待我称王封你为后i 2021-06-11 15:12 409阅读 0赞

[https://www.cnblogs.com/zl-127/p/6543973.html][https_www.cnblogs.com_zl-127_p_6543973.html]

配置好 node js环境

创建app.js文件，代码如下

![复制代码][copycode.gif]

![复制代码][copycode.gif]

下载vue.js文件放在 js目录下，在根目录创建index.html文件，项目文件结构如下

![732194-20170313172010635-958359542.png][]

index.html页面代码如下

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
        <div id="app">
            <p>{
       { message }}</p>
            <input type="text" v-model="message" />
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {
       { age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {
       { name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 这是我们的Model
        var exampleData = {
            message: 'Hello World!',
            yes: true,
            no: false,
            age: 28,
            name: 'keepfooljack'
    
        }
    
        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        new Vue({
            el: '#app',
            data: exampleData
        })
    </script>
    
    </html>

![复制代码][copycode.gif]

打开终端，cd到项目目录下，执行 node app.js

在浏览器打开    http://127.0.0.1:8888/index.html，可以看到如下结果

![732194-20170313172049276-1022516521.png][]

[https_www.cnblogs.com_zl-127_p_6543973.html]: https://www.cnblogs.com/zl-127/p/6543973.html
[copycode.gif]: /images/20210527/52755830c38146588f213035d38c9316.png
[732194-20170313172010635-958359542.png]: /images/20210527/59c6d97d91e642b7986102907c3d85bd.png
[732194-20170313172049276-1022516521.png]: /images/20210527/d7403e773c0341378d7783578bfa4eec.png