一、认识Vue

1.什么是Vue

vue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）

Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！

Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

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

 

2.为什么要学习流行框架

企业为了提高开发效率；在企业中，时间就是效率，效率就是金钱；

提高开发效率的发展历程：原生js——>Jquery之类的库——>前端模板引擎——>Angular.js/Vue.js

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

 

3.框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

库（插件）：提供一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。

 

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

 

 

5.Vue的基本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入Vue的包-->
    <script src="./vue.js"> </script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>
<!--将来new的Vue实例，会控制这个元素中的所有内容-->
<!--Vue实例所控制的这个元素区域，就是我们的V-->

<script>
    //2.创建一个Vue的实例
    //当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
    //注意：我们new出来的这个vm对象，就是我们MVVM中的VM调度者
    var vm = new Vue({
        el:"#app",       //表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
        //d这里的data就是MVVM中的M，专门用来保存每个页面的数据的
        data:{ // data属性中，存放的是el中要用的数据
            msg:'欢迎学习Vue'  //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作dom元素了
        }
    })
</script>

</html>

 

posted @ 2019-08-17 17:43  Aray007  阅读(231)  评论(0)  编辑  收藏  举报