原

03--VueJs 的简单的介绍和基本的代码

5528人阅读 2019/10/17 11:32 总访问：118134 评论：1 收藏：0 手机

分类: Vue课程笔记

Vue.js(官网地址:https://cn.vuejs.org/index.html)

Vue.js 是目前最火的一个前端框架，除了开发网站，还可以开发手机App，但是需要借助于Weex
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了程序员的双手，可以更多的时间去关注业务逻辑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1.引入Vue的包 -->
    <script src="../lib/VueJs/vue-2.4.0.js"></script>
</head>

<body>
    <!-- 将来 实例化(new) Vue 的时候,会控制这个元素中的所有的内容的 -->
    <!-- Vue 实例控制的元素的区域,就是我们 MVVM 中的 Vive 视图层 V -->
    <div id="app">
        <!-- 插值表达式 在 Vue 比较常见 -->
        <p>{{ message }}</p>
    </div>
    <script>
        // 2.创建一个 Vue 的实例
        // 当我们导入包之后,在浏览器的内存中就多了一个 Vue 的构造函数
        // 注意: 我们new出来的 vm 的对象,就是我们 MVVM 的 VM调度者
        var vm = new Vue({
            el: '#app', // 表示,当我们 new 这个 Vue 实例,要控制页面上的那个区域
            // 这里的data 就是 MVVM 中的 M ,专门用来保存 每个页面上的数据
            data: { // data 属性中存放的的是 el 中需要用到的数据
                message: '你好,欢迎学习VueJs' //通过 Vue 提供的指令,
                //很方便的就将数据渲染到页面的上面,程序员就无须操作 DOM 元素
                //[前端的 Vue 之类的框架,不提倡我们去操作DOM元素]
            }
        });
    </script>
</body>

</html>