Vue简介
介绍描述
渐进式
JavaScript
框架
作用
:
动态构建用户界面
Vue
的特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注 UI, 可以轻松引入 vue
与其它前端
JS
框架的关联
- 借鉴 angular 的模板和数据绑定技术
- 借鉴 react 的组件化和虚拟 DOM
- vue-cli: vue 脚手架
- vue-resource(axios): ajax 请求
- vue-router: 路由
- vuex: 状态管理
- vue-lazyload: 图片懒加载
- vue-scroller: 页面滑动相关
- mint-ui: 基于 vue 的 UI 组件库(移动端)
- element-ui: 基于 的 UI 组件库(PC 端)
Vue的简单入门
我们要把一个 json对象的数据，显示到一个元素上去。如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。
<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
//准备数据
var user = {
"name": "linda",
"age": 16
};
var div1 = document.getElementById("div1");
div1.innerHTML=user.name;
var div2 = document.getElementById("div2");
div2.innerHTML=user.age ;
</script>
</body>
html dom其实已经改变了div的值，而我们只是想展示以下数据。
使用Vue的方式
1. 首先导入 vue.js 要用到的库： vue.min.js. 这里vue的版本是Vue.js v2.5.16下载地址：https://download.how2j.cn/1782/vue.min.js
2. 同样准备一个div元素，其id是div1
3. 在js中准备json数据 gareen
4. 创建一个Vue对象。 这个Vue对象就把数据 gareen和 视图 div1 关联起来了
5. 在视图div中，就可以通过如下方式把数据取出来了。
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>vue</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="div1">{{user.name}}</div>
<div id="div2">{{user.age}}</div>
<script>
//准备数据
var user = {
"name": "linda",
"age": 16
};
//通过vue.js 把数据和对应的视图关联起来
new Vue({
el: '#div1',
data: {
message: user
}
})
new Vue({
el: '#div2',
data: {
message: user
}
})
</script>
</body>
理解Vue的MVVM
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
