VUE入门及基础知识 有更新!

  |   0 评论   |   329 浏览

1.HelloWorld

  1. 下载安装破解WebStorm
  2. 下载vue.js
  3. 编写Hello World
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello world</title>
    </head>
    <body>
    
    <div id="app"><!-- view -->
        <input type="text" v-model="username" />
        <p>Hello, {{username}}</p>
    </div>
    
    <script type="application/javascript" src="../JS/vue.js"></script>
    <script type="application/javascript">
        //创建vue实例
        const app = new Vue({ //配置对象
            el: '#app',     //element:选择器
            data: {         //数据(model)
                username: 'tb-blog'
            }
        })
    </script>
    </body>
    </html>
    
  4. 流程介绍
    4.1. 引入vue.js
    4.2. 创建vue对象,el:指定根element(选择器),data:初始化数据(页面可以访问)
    4.3. 双向数据绑定:v-model
    4.4. 显示数据:{{XXX}}
  5. 理解MVVM
    5.1. M:model 模型,数据对象(data)
    5.2. V:view 视图,模板页面
    5.3. VM:viewmodel 视图模型(vue的实例)

2.模板语法

评论

发表评论