政务桌面应用系统开发提升政府服务效率的关键所在
523
2023-03-15
本文目录一览:
Vue.js是一套构建用户界面的渐进式框架,Vue 采用自下向上增量开发的设计,其核心库只关注视图层,易于上手,同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
1、MVVM即model,view,viewmodel,它是数据驱动模式,即所有的一切通过操作数据来进行,而尽量避免操作dom树。
2、用户的操作在view通过viewmodel进行数据处理,分情况是否通过ajax与model层进行交互,再返回到view层,在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作,而是专心于对用户的操作进行处理,避免了MVC中control层过厚的问题。
扩展资料:
vue在web开发、网站制作中的优势
1、据绑定:vue会根据对应的元素,进行设置元素数据,通过输入框,以及get获取数据等多种方式进行数据的实时绑定,进行网页及应用的数据渲染 。
2、组件式开发:通过vue的模块封装,它可以将一个web开发中设计的各种模块进行拆分,变成单独的组件,然后通过数据绑定,调用对应模版组件,同时传入参数,即可完成对整个项目的开发。
3、简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
参考资料来源:百度百科-Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 渐进式框架 ,发布于 2014 年 2 月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层 ,不仅易于上手,还便于与第三方库(如: vue-router , vue-resource , vuex )或既有项目整合。
我们知道MVVM 表示如下:
在 MVVM 架构中,是不允许 数据 和 视图 直接通信的,只能通过 ViewModel 来通信,而 ViewModel就是定义了一个 Observer 观察者。
至此,我们就明白了,Vue.js 就是一个 MVVM 的实现者,他的核心就是实现了 DOM 监听 与 数据绑定 。
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。 Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器 。
这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
1、易用
已经会了 HTML、CSS、JavaScript,即可阅读指南开始构建应用!
2、灵活
不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。
3、高效
虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。
(1) 提供一种方便的工具,使得开发效率得到保证
(2) 保证最小化的DOM操作,使得执行效率得到保证
扩展资料
1、Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
2、Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
3、Vue可以做从简单到复杂的前端单页应用,随处可见的Web前端都可以用Vue来开发。而且Vue上手速度快、功能强大,且提供了非常好用的脚手架vue-cli,很简单就可以构建并让自己的项目跑起来。
参考资料
百度百科-Vue.js
数据双向绑定,组件化,单文件组件
全局api: vue.extend 、 vue.set
实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项
实例属性和方法: vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的实例和方法
指令: directive
内置组件: <components</compontents 、 <keep-alive</keep-alive 、 <router-view</router-view
数组中不可用的方法:slice,concat;
直接修改数组list[i] = 值,不可以这样直接修改;
Vue.set(数组,索引,{值}) vue的全局方法set来更改数组的某一项的值
标签属性和条件渲染
标签属性: v-bind:href='link"; 等效于 :href="link" 动态绑定;
条件渲染: v-if 、 v-else 、 v-show ;
数据绑定: {{...}} 、 v-html (原始-HTML)、 v-text ;
事件绑定-内置事件绑定,自定义事件绑定
v-on:click="run" 等效于 @:click="run" 事件绑定;
自定义事件绑定: 父组件自定义事件
<my-compented @my-event='toggle'</my-compented
子组件触发 my-event 自定义事件; this.$emit('my-event', opation);
父组件执行toggle 函数;
计算属性和数据监听
computed选项 -计算属性:根据我们调用属性来跟新,调用的属性没有变更,我们computed选项里面的方法读取的是缓存;
页面内容响应数据v-once
如果你需要页面内容响应数据的变化,就不加v-once。
如果你需要页面内容渲染后,不随数据的变化而变化,就加上这个。
对于一些固定不变的组件,在调用时我们可以加上v-once,只在第一次渲染执行,保存数据在内存中,后面再调用直接从内容中提取,提高执行效率。
应用
组件的通信
<p:is = "动态的组件名"</p 等同于 <动态的组件名</动态的组件名 动态绑定组件
注:Vue有个单项数据流的概念:即父组件传递给子组件的参数,子组件不能直接修改;防止引用类型参数被修改后,如果父组件中其他地方也使用了此参数会受到影响。
子组件 props 接受的两种形式:
数组: ['first-name','two-name'] ,从父组件传递两个属性值;
动态展现: {{firstName}}
对象:
slot:插槽
父组件插件里面定义的内容放到子组件 slot 中:
子组件
vue高级功能--过渡和动画
自定义指令:
使用 vue-cli的优势:
成熟的vue项目架构设计;
本地测试服务器;
集成打包上线方案 webpack
npm install vue-cli -g :全局安装vue-cli
vue init webpack my-project :初始化项目
npm install 安装项目依赖
npm run dev :在localhost启动测试服务器;
npm run bulid :生成上线目录(部署)
a、安装 vue-router
b、配置路由
6、关闭eslint
dev模式下,默认会做eslint检测,若要关闭,打开 config/index.js ,设置 useEslint: false ,${}占位符,多行字符串
7、生命周期
8、支持es6
es6中很多新特性很好用class、promise、then、catch、...(数组转换符号)、函数设置参数默认值等
a、安装babel-polyfill
b、在入口main.js文件当中引入:
c、找到build文件夹下的webpack.base.conf.js
文章参考: 慕课网-欧米雪儿lyy
关于vue和vue框架的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 vue的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于vue框架、vue的信息别忘了在本站进行查找喔。版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~