Vue之简单介绍

安装Vue

npm init -y
npm i vue@版本号 --save

什么是Vue.js

  • Vue.js是目前最火的一个前端框架
  • Vue.js是前端的主流框架之一,和Angular.js,React.js一起,并称为前端三大框架;
  • Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅容易上手,还便于第三方库或既有项目整合,(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
  • 前端的主要工作?主要负责MVC中的 V这一层,主要工作就是和界面打交道,来制作前端页面效果

框架和库的区别

  • 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目
    • node中的 express
  • 库(插件):提供某一个小功能,对项目的侵入性比较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求
    • 1.从jQuery 切换到 Zepto
    • 2.从 EJS 切换到 art-template

Node(后端)中的MVC与前端中的 MVVM之间的区别

  • MVC是后端的分层概念
  • MVVM 是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了三部分Model,View,ViewModel

Vue之简单介绍_第1张图片

创建Vue第一个实例

<body>
    <script src="../../vue.js"></script>
    <!-- 将来 new 的 vue 实例会控制这个元素中的所有内容 -->
    <div id="app">
        <p>{{msg}}</p>
    </div>

    <script>
    // 2.创建一个Vue实例
    // 当我们导入包之后,在浏览器的内存中,就多了一个 Vue 的构造函数
    var vm = new Vue({
        el:'#app',    //表示,当前我们 new 的这个 vue 实例,要控制页面上的那个区域
        data:{  //data 属性中,存放的是 el 中要用到的数据
            msg:'欢迎学习 Vue'   // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,不用再手动操作dom元素了【前端的Vue之类的框架,不提倡我们去手动操作Dom元素】
        }
    })
    </script>
</body>

你可能感兴趣的:(Vue.js)