1.引入Vue.js文件到项目之中

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.定义一个div,为其定义一个id

<!-- 创建一个div,用于绑定下面的vue实例化对象 -->
<div id="app">

</div>

3.实例化一个Vue对象,绑定上方div

<script>
    // 创建一个vue实例化对象
    var app = new Vue({
      el: "#app",// 绑定上方div
      data: { // 这里存放的是数据
        title: "vue学习",
        job: "web前端开发工程师"
      }
    });
</script>

4.在div中通过插值表达式对页面进行渲染

<div id="app">
    {{title}}
    <h1>{{job}}</h1> 
 </div>

5.完整代码

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <head></head>
  
    <body>
        <!-- 创建一个div,用于绑定下面的vue实例化对象 -->
        <div id="app">
            {{title}}
            <h1>{{job}}</h1> 
        </div>
    </body>

    <script src="js/vue.js"></script>
    <script>
        // 创建一个vue实例化对象
        var app = new Vue({
            el: "#app",// 绑定上方div
            data: { // 这里存放的是数据
                title: "vue学习",
                job: "web前端开发工程师"
            }
        });

        // 第二种写法(简单写法)
        // new Vue({
        //     el: "#app",// 绑定上方div
        //     data: { // 这里存放的是数据
        //         title: "vue学习",
        //         job: "web前端开发工程师"
        //     }
        // })
    </script>
</html>

6.显示效果

声明式渲染效果

最后修改:2021 年 02 月 17 日 09 : 32 PM