蝈蝈领你玩--Vue.js前端库
2017-09-26 本文已影响140人
会Java的蝈蝈
Vue.js简介
什么是Vue？
Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue的特点：以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
常见的其他前端库
MVVM模式
Vue是目前前端中非常有名气的JavaScript MVVM模式库。MVVM是Model-View-ModelView的缩写。Vue实现了将数据模型和DOM的双向绑定过程。
- 从View侧看，ViewModel上的
DOM Listener，可以监听DOM上的变化，并将这些变化更新到数据模型中。 - 从ViewModel侧看，当我们更新数据模型上的数据的时候，
Data Binding负责将数据更新到DOM模型上。
image.png
实例1，入门
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
使用Vue.js的基本步骤是：
- 通过HTML网页，编写视图部分，通常视图部分放到一个
<div>标签中，并指定ID。 - 定义数据模型，通常数据模型就是一个
JavaScript对象。 - 创建Vue实例（即
数据模型，View Model），完成View和模型的双向绑定过程。
实例2，双向绑定
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
