nvue和vue有什么区别

html-css015

nvue和vue有什么区别,第1张

在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支持的通用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值的有效说明:

Jquery实战

基本的CSS选择器

熟悉web开发的人员一定对css的选择功能相当的了解,通过css选择功能,我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制,使jQuery的元素选择能力易常强大。

a——选择所有元素

#specialID——选择匹配id为specialID的元素

.specialClass——选择匹配拥有css类sepcialClass的元素

a#specialID.specialClass——选择匹配id为specialID、有用css类specialClass的元素

p a.specialClass——匹配拥有css类specialClass、在

元素内的元素

除了支持传统的css选择器,Jquery还支持CSS3选择功能。

子节点选择器

$("p >a") 选择元素

的直接子节点的元素,非直接子节点的元素将不会被选择到

特性选择器

特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素

如我们需要做如下的'选择:匹配所有指向本网站之外地址的链接,我们可以这样选择

$("a[href^=http://") 该选择器选择具有href属性,且href属性值以http://开始的链接元素

特性选择的语法是:

选择具有某特性(属性)的元素

form[method]

选择具有某特性,且属性值为指定值的元素

input[type=text]

选择匹配特性以特定字符开头的元素

div[title^=my] ——选择匹配title特性值已my开头的所有div元素

选择匹配特性以特定字符结束的元素

a[href$=.pdf] ——选择引用了pdf文件的所有链接元素

其他

a[href*=jquery.com]选择引用jQuery网站的所有链接元素

过滤符

通过过滤符选择器可以在已选择的元素中过滤出需要的元素,上面的特性选择器也属于过滤符,另外还有“:”字符

如:

li:has(a)—— 选择匹配包含元素的所有

元素

1. 基础过滤符:

:first:匹配多个对象中的第一个对象

:last:匹配多个对象中的最后一个对象

:not(selector):匹配去除了not后面选择符中内容的项,not中的selector只能是过滤选择器,不能是查找选择器

:even:匹配所有对象中的第偶数个

:odd:匹配所有对象中的第奇数个

:eq(index):匹配某一下表的单独某元素

:gt(index):匹配大于某一下标的所有元素

:lt(index):匹配小于某一下标的所有元素

:header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6

:animated:匹配所有有动画效果的元素

2. 内容过滤符:

:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况

:empty:匹配所有没有子元素的对象

:has(selector):匹配所有至少含有一个子选择符的对象

:parent:匹配元素,这些元素包含子元素(包括文本元素)

3. 可见性过滤符:

:hidden:匹配所有隐藏对象,或者input中的hidden类型

:visible:匹配所有可见的对象

4. 子过滤符:

:nth-child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征 nth-child过滤器,从1开始计数,这主要是与css标准兼容。

:first-child:匹配第一个子元素

:last-child:匹配最后一个子元素

这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

:only-child:如果一个父元素只有一个子元素,就匹配这个子元素

5. 表单过滤符

:input :匹配表单内input元素

:text :匹配表单内input type为text的元素

:password :匹配表单内input type为password的元素

:radio :匹配表单内input type为radio的元素

:checkbox :匹配表单内input type为checkbox的元素

:submit :匹配表单内input type为submit的元素

:image :匹配表单内image的元素

:reset :匹配表单内input type为reset的元素

:button :匹配表单内input type为button的元素

:file :匹配表单内input type为file的元素.

:hidden :匹配表单内input type为hidden的元素或者hidden区域

:enabled :匹配所有启用元素

:disabled :匹配所有非启用元素

:checked :匹配所有选中元素

:selected :匹配所有下拉列表选中元素

查找选择器和筛选选择器的概念区别

为了能灵活的使用jQuery,认清查找选择器、筛选选择器之间的区别是非常重要的。筛选选择器,通过对元素应用更高的选择标准(如过滤特性或或其他相关值),缩小正在匹配的元素的集合;查找选择器,比如后代选择器(空格)、子节点选择器(>)以及兄弟节点选择器(+)等,则查找与已选择元素具有某种关系的其他元素,而不是通过把标准应用于已匹配元素来限制匹配范围。