001 Vue基础简介

[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对象中的内容

                  　　  使用插值表达式引入