Vue概述

Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue的核心库关注于视图（html），不只易上手，还便于与第三方库或项目整合。

渐进式：一步一步，不是将全部的东西都学完才能使用。

自底向上设计：一种设计程序的过程和方法，就是先编写出基础程序段，而后在逐步扩大规范、补充和升级某些 功能，其实是一种自底向上构造程序的过程。

 

Vue.js的核心是容许采用简洁式模板语法来声明的将数据渲染进DOM的系统

在使用数据以前须要先进性声明才能够使用

  <!-- 定义Vue要渲染/控制的部分 -->
    <div class='app'>
        <!-- 使用差值表达式进行渲染 -->
        <p> {{message}} </p>

    </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 建立Vue实例
    new Vue({
        // 指定Vue要渲染/控制的元素
        el: '.app',
        // 数据
        data: {
            message: '这是经过插值表达式进行渲染的',
        },
      
    })
 </script>

常见的开发模式有MVC、MVP、MVVM。

 

使用Vue.js实现输出“Hello World”

步骤：

一、定义用于填充数据的标签

二、引入Vue.js库文件

三、使用Vue语法实现需求

四、将数据填充到“第1步”的标签里面

    <!-- 定义Vue用于填充数据的标签 -->
    <div class='app'>
        <!-- 使用差值表达式进行渲染 -->
        <p> {{message}} </p>

    </div>
    </body>
    <!-- 引入Vus.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 建立Vue实例
    new Vue({
        // 元素怪哉的位置，能够是CSS选择器，也能够是DOM元素
        el: '.app',
        // 模型数据
        data: {
            message: 'Hello Word',
        },
      
    })
 </script>