Vue的简介和优缺点 |
您所在的位置:网站首页 › 安徽男人的特点和优缺点 › Vue的简介和优缺点 |
文章目录
一、vue介绍二、Vue的实例三 Vue的生命周期四 Vue优缺点
一、vue介绍
1.Vue.js是用于构建交互式的 Web 界面的库。 2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲,Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。 3.实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM 框架,Vue.js 更容易上手。 4.Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。 6.Model:js对象。 View:html视图。 通过事件驱动去监听视图的变化,方法和指令,监听视图对象的方法。 双向绑定(v-model); DOM事件:JS; 7.Css\js\html–>js类,模式:MVC模式(虚拟DOM),单向数据流,js的角度封装 8.vue是单独拿出来,MVVM模式(分开的,用事件去监听DOM),双向数据流,采用指令(标记中的一个属性) 二、Vue的实例1.构造器: 每个 Vue.js应用都是通过构造函数Vue创建一个 Vue的根实例启动的 var Vm = new vue({ //选项 })2.在实例化Vue时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项. 3.属性和方法: Var data={a:1} Var vm=new vue({ data:data })Data是存在动态属性和对象的,相当于react里的state。 4.el:’#id’-----是将vue的动态信息绑定在dom结构上,相当于react-dom里的render方法. 注意:搭环境的时候添加:Mode:”develoads” (1)在模板中绑定表达式是非常便利的,但是它们实际上只用于见简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。 (2)为了不让模板过重我们都是使用计算属性: 1)Vue中data放定义的数据内容。 2)Computed放计算的属性内容。 6.计算缓存methods:(展示存在的东西) 1.我们可以将同一函数定义为一个 method而不是一个计算属性。对于最终的结果,两种方式确实是相同的. 2.不同的是计算属性是基于它们的依赖进行缓存的。 3.计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问reversedMessag计算属性会立即返回之前的计算结果,而不必再次执行函数 4.只要发生重新渲染,method调用总会执行该函数。 通过事件完成的功能,调用方法,用完重新计算 7.模板语法------缩写 V- 前缀在模板中是作为一个标示Vue特殊属性的明显标识。当你使用Vue.js为现有的标记添加动态行为时,它会很有用,但对于一些经常使用的指令来说有点繁琐。同时,当搭建Vue.js管理所有模板的SPA时,V-前缀也变得没那么重要了。因此, Vue.js为两个最为常用的 指令提供了特别的缩写: v-bind缩写: V-on缩写 8.计算侦听-watch Vue提供了一种更通用的方式来观察和响应 Vue实例上的数据变动:侦听属性。 应用:通常用在数据变化时执行异步或开销较大的操作时,特殊的方式会用到,实时监听,占缓存比较大,开销比较大。 三 Vue的生命周期
初始化的注入:里面是一个事件系统,created,架构 是否指定"el":没有的话要DOM结构上绑定对象 是否具有模板:是的话进行虚拟DOM,渲染模板。不是的话进行真实的DOM,输出在html中。 模板之后创建实例化对象,渲染实例,相当于willmount 函数封装:(内核原理) 在底层的实现上,Vue将模板编译成虚拟 DOM渲染函数。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM 操作上。 文本: 数据绑定最常见的形式就是使用"Mustache" 语法(双大括号)的文本插值: Message: {{ msq }} 通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。 四 Vue优缺点1.简介 插件:日历插件、轮播图、选项卡。 框架:bootstrap。能够独立做来一个一个网页(项目就是由每一个网页组成 ) 响应式布局的项目 vue是渐进式 JavaScript 框架 渐进式 :主张最少。最大的特点是没有DOM操作。主张只操作数据 。 2.优点 1.轻量级的数据框架 2.双向数据绑定 3.提供了指令 4.组件化开发 5.客户端路由 6.状态管理:同cookie、session、本地存储类似 3.缺点 1.Vue 底层基于 Object.defineProperty 实现数据响应式,而这个 api 本身不支持 IE8 及以下浏 览器,所以Vue不支持IE8及其以下浏览器; 2.Vue 打造的是SPA,所以不利于搜索引擎优化(SEO); single page application 以前是每一个显示的页面都应该有一个html才能设置不同的title、description、keywords app 做项目时,必须使用Vue的脚手架创建项目,但脚手架就是基于webpack的一个脚手架。 3.由于 CSR的先天不足,导致首屏加载时间长,有可能会出现闪屏。 client side render: 客户端渲染( 后端提供json数据,前端拼接字符串,再渲染 ) server side render: 服务端渲染( json+html拼接字符串都在后端做,返回给前端 ) 4.核心 数据驱动( 数据改变驱动我们视图的改变 ) 组件系统 5.MVVM M-model模型 V-view视图 VM-viewModel 视图模型 模型(model)通过了视图模型 决定了视图(view) 视图(view) 通过视图模型 修改模型 (model) 视图模型是模型和视图之间的桥梁。 6.SPA :vue或react、小程序 single page application 你的项目里面只有一个index.html 但是肯定也要以多页面视图展示。但是我们没有体会到页面刷新。 index.html#cinema index.html#movies index.html#movie/classic 实现原理:地址栏#后面变化了,然后发送ajax请求,实现页面的变化 地址栏发生变化会向服务器发请求,但是#后面变化不会发请求。 体验好。第1次访问可能会出现白屏,但是后面整体体验是很好的 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |