Vue.js是什么？
-
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API
-
Vue.js用一个构建数据驱动的Web界面的库。
-
Vue.js是一套构建用户界面的渐进式框架，与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。
-
简而言之：Vue.js是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。
-
传统模式： 响应用户的操作，web 前端界面就会响应这个操作，发送数据到后台，拿到新数据，最后更新到前端界面，供用户查看。
-
数据驱动模式： 响应用户操作，发送数据到后台，拿到新数据之后，直接更新到前端的 motel .前端的 motel 与前端的界面是双向绑定。
理解MVVM
MVVM是把MVC里的Controller和MVP里的Presenter改成了 ViewModel。
View 的变化会自动更新到ViewModel，ViewModel 的变化也会自动同步到View上显示。
这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。
vue.js的优点
- 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
- 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
- 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写 - 易用灵活高效
引入 Vue
直接下载并用 <script> 标签引入
<script src="js/vue.js"></script>
cdn
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 作为学习时使用这种方法
npm
npm install vue
命令行工具 (CLI)
- 作为学习，暂时不要使用这种方式
创建一个 Vue 实例
<div id="app">
{{ message }}
</div>
var app = new Vue({
el : '#app', // // 管理id为app的元素
data : {
message : 'hello world'
//// data的核心作用是存放显示在页面中的数据，data必须是一个对象
}
})
运行结果
hello world
实例解析：
- 在用户界面view中，通过{{}}的形式将data中的数据显示在页面中
而在用户界面中，{{}}绑定的是data的key值（这里是message），而页面中显示的是该key的value值（这里是hello world） - app这个变量会代理vue中data的数据，所以我们访问data中的数据时，直接用app.message就可以了
网友评论