vue和nvue（vue和nvue哪个好）

本文目录一览：

• 1、混合开发之uni-app

• 2、nvue和vue有什么区别

• 3、uni-app nvue

• 4、uniapp中$refs不支持（微信小程序）

• 5、Uni-App之Vue组件（三）

混合开发之uni-app

uni-app App端内置weex渲染引擎，提供原生渲染能力

然而， Weex并不是一个前端框架 。实际上，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。换句话说，Weex 并不依赖于特定的前端框架，随着前端技术的发展，Weex 也可以集成更多广泛使用的前端框架。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力，使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。而 nvue 解决了这个大问题，让前端工程师可以直接开发完整 App，并提供原生插件的市场交易和云打包。这些组合方案，开发者切实的提高效率、降低成本。

如果你是web前端，不熟悉 weex，那么建议你仍然以使用 vue 为主，在App端某些 vue 表现不佳的场景下使用 nvue 作为强化补充：

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。

小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。

uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现（注意manifest中需开启新编译器，即自定义组件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 时，一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。

注意：旧编译器（非自定义组件模式）不支持 plus.globalEvent 这个对象。

nvue和vue有什么区别

在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力（比如各种push sdk集成、蓝牙等能力调用），使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。 nvue 解决了这个问题，让前端工程师可以直接开发完整 App，并提供丰富的 插件生态 和云打包。这些组合方案，帮助开发者切实的提高效率、降低成本。

同时uni-app扩展了weex原生渲染引擎的很多排版能力，修复了很多bug。比如

uni-app nvue

nvue 即 native vue，在weex基础上封装了uni的api，提供了原生渲染能力，常用于在App端某些vue页面表现不佳的场景下作为强化补充。

App的nvue页面使用原生渲染，一个项目中可以同时存在vue和nvue页面。

HBuilder页面创建时可以选择为vue还是nvue页面

在非app端，只有uni-app编译模式的nvue文件才会编译（因weex模式不支持非app端）。

如果一个页面路由下出现同名的vue和nvue文件，App端会使用nvue页面，非App端会使用vue页面。

uniapp中$refs不支持（微信小程序）

uni-app 项目中$ref取不到值，主要分两种情况，一种是nvue，一种是vue

vue文件走的webview渲染，nvue走weex方式的原生渲染

小程序本身就不支持操作dom，要获取dom信息请用uni.createSelectorQuery()

vue文件中：

uni-app 中可以使用$refs，但是需要注意的是在小程序和App平台不能引用 view 等内置组件，循环创建的自定义组件的话 ref也不能用

Uni-App之Vue组件（三）

uni-app支持的通用css单位包括px,rpx

vue页面支持普通H5单位，但在nvue里不支持；

nvue页面还不支持百分比单位

App端，在pages.json里的titleNView或页面里写的plus api中涉及的单位，只支持px，此时不支持rpx。

nvue中，uni-app模式可以使用px,rpx表现与vue中一致，weex模式目前遵循weex的单位；

点击切换实现路由跳转

实现方法： 一、在index.vue的页面入口写一个点击方法，利用uni.navigateTo({})写上将要跳转的页面路径。

                二、 components文件里面创建headerNav.vue组件

                三、在pages.json文件里写上组件路径进去

这里可以选择修改对应的样式信息

scroll-view属性说明：

横向滚动通过添加scroll-x="true"，并且需要在scroll-view的上一级加上row，完成横向滚动

纵向滚动条通过添加scroll-y="true",并且使用scroll-view来配合完成纵向滚动轴

属性说明：

view的属性说明：

属性说明：

由于 icon 组件各端表现存在差异，可以通过使用字体图标的方式来弥补各端差异。

属性说明：

各平台type值的有效说明：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。