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

                          使用插值表达式引入

  • 相关阅读:
    vue+element-UI实现分页效果
    vue实现点击其他地方隐藏div
    nodejs、数据库(基本指令)基础要点总结
    vue项目中封装axios的请求拦截器和响应拦截器
    echarts树形图,分支过多,页面放不下,高度自适应方法
    echarts的树形结构图及参数
    如何使用nprogress实现页面加载进度条
    抗锯齿相关技术介绍:MSAA、FXAA、SMAA、TXAA、MSAA
    配置虚拟机从下载到安装的小问题总结——2020.3.7
    Lecture08_着色 1(光照、着色和图形管线)_GAMES101 课堂笔记——2020.3.6
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/13293370.html
Copyright © 2020-2023  润新知