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

                      使用插值表达式引入

原文地址:https://www.cnblogs.com/carreyBlog/p/13293370.html