版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/qq_34160679/article/details/88179340
什么是Vue.js
- Vue 是目前最火的前端框架,React 是最流行的前端框架,React 可以开发手机APP,Vue也可以,需要借助于Weex
- 只关注于视图层
为什么要学习流行框架
提高开发效率
- 发展流程: 原生JS --> JQuery之类的类库 --> 前端模板引擎 --> Augular.js / Vue.js (能够帮助我们减少不必要的DOM操作,提高渲染效率,双向数据绑定的概念【通过框架提供的指令,我们只需要关心数据的业务逻辑,不再关心DOM 是如何渲染的了】)
框架与库的区别
- 框架: 一套完整的解决方法,对项目的侵入性较大,项目如何需要更换框架,则需要重新架构整个项目
- 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求。
- 从JQuery 到 zepto
Node(后端)中的MVC 和前端中的MVVM 之间的区别
一个简单的Vue 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- Vue 实例所控制的这个元素区域,就是我们的V-->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 创建一个Vue 实例
// 当我们导出包之后,在浏览器的内存中,就多了一个 Vue 构建函数
// 注意: 我们new 出来的这个VM 对象,就是我们MVVM 中的VM 调度者
var em = new Vue({
el: '#app', //表示,我们new 出来的vue 对象,要控制的区域
// 这里的data 就是MVVM 中的M ,专门用来保存每个页面的数据的
data: { //data 中存放的是el 要用到的数据
msg: "Hello world" //通过Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOm 元素
}
})
</script>
</body>