Vue.js

陈文龙


第0章 Vue介绍

0.0 开发工程发展历史

前端基础-Vue.js简介_javascript

通过前面的介绍,我们对目前的项目工程化有了大体了了解,那么其中,在第二阶段的工程化演进中,有一个重要的工程设计理念诞生,他就是著名的 MVC 设计模式,简单点,MVC 其实就是为了项目工程化的一种分工模式;

前端基础-Vue.js简介_vue.js_02

MVC 中的最大缺点就是单项输入输出,所有的 M 的变化及 V 层的变化,必须通过 C 层调用才能展示;

随着前端技术及前端工程化体系的发展成熟,参考MVC的设计理念,前端出现了 MVVM 的设计思想,简单理解就是在前端实现数据层与展示层的相互调用,降低业务层面的交互逻辑;后面再进行详细介绍;

0.1 Vue 介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 渐进式框架

注意:Vue是一个框架,相对于 jq 库来说,是由本质区别的;

https://cn.vuejs.org/

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器

0.2 Vue 初体验

直接下载引入:https://cn.vuejs.org/v2/guide/installation.html

CDN 引入:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

CDN 加速: https://www.bootcdn.cn/

<body>
    <div id="div">
        {{user_name}}
    </div>
</body>

// 两种引入方式,任意选择
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./vue.js"></script>


<script>
    var app = new Vue({
        el:'#div',  // 设置要操作的元素
        // 要替换的额数据
        data:{
            user_name:'我是一个div' 
        }
    })
</script>