[A] Vue简介
Vue,读音和view相同,是一套用于构建用户的渐进式js框架,与其他大型框架不同的事,Vue被设计成自底向上逐层应用,Vue的核心库只关注图层
1. MVVM模式的实现者--双向数据绑定模式
Model: 模型层,在这里表示javasc对象
View: 视图层,这里表示DOM(HTML操作的元素)
ViewModel: 链接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者
2. 在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信
而ViewModel就是定义了一个observer观察者,时刻监听者两个对象。
·ViewModel能够观察到数据的变化,并对视图响应的内容进行更新
·ViewModel能够监听到视图的变化,并能通知数据发生变化
【注】至此我们指导,Vue.js就是一个MVVM的实现者,核心就是实现了DOM监听与数据绑定
其他MVVM模式的实现者:
AngularJS
ReactJS
微信小程序
4. 特点
1. 轻量级,体积小,Vue.js压缩后只有20+kB(AngularJS压缩后56+kB, ReactJS压缩后44+kB)
2. 移动有限,更适合移动端,比如移动端的touch事件
3. 易上手,学习曲线平稳,文档齐全
4. 吸取了Angular(模块化)和React(虚拟DOM)的长处,并拥有自己的属性,如计算
5. 开源,社区活跃度高
5. Vue的两大核心要素
1. 数据驱动
2. 组件化
·页面上每个独立的可交互的区域可视为一个组件
·每个组件对应一个工程项目,组件苏鸥的各种资源在这个目录下就近维护
页面不过是组件的容器,组件可以嵌套自由组合(复用)形成完整的页面
6. 引入Vue方法:
1. 引入本地vue.js文件
先下载vue.js文件,然后通过JavaScript引入该js文件即可
2. 引入外部网络中的vus.js文件
通过JavaScript引入地址:https://cdn.jsdelivr.net/npm/vue/dist/vue.js <!-- 开发环境版本,包含了有帮助的命令行警告 -->
或者: https://cdn.jsdelivr.net/npm/vue <!-- 生产环境版本,优化了尺寸和速度 -->
7. Vue的快速开始
1. 如何在页面中使用vue
两个部分:
1)html:<div id = "app"></div>
2)实例化一个vue对象
new Vue({}) // {}中填写json格式的字符串,里面方键值对,在js中键可以不用引号
// 多个键值对之间用逗号(,)隔开
示例:
new Vue({
el: css选择器, // 指定该vue对象绑定在哪个元素上
data:{
// 存放属性键值对
}
methods:{
// 存放方法的键值对
}
})
2. 在页面元素中如何使用vue对象中的内容
使用插值表达式引入