网页手机号抓取程序(标签和组件有什么区别，尖括号包围起来一段英文吗？)

　　网页手机号抓取程序(标签和组件有什么区别，尖括号包围起来一段英文吗？)

　　，现在以小程序组件为例。

　　那么label和component有什么区别，英文里不都是用尖括号括起来的吗？

　　事实上，标签是一个古老的概念。标签是内置的浏览器。但是组件可以自由扩展。

　　同样，你可以将一段js封装成一个函数或模块，也可以将一个ui控件封装成一个组件。

　　uni-app 是指小程序规范，提供了多个内置组件。

　　以下是html标签与uni-app内置组件的映射表：

　　除了改动之外，还增加了一些手机常用的新组件

　　除了内置组件，还有很多开源的扩展组件，封装了常用的操作。DCloud为这些扩展组件建立了插件市场收录，详见插件市场

　　js变化

　　js变化分为运行环境变化、数据绑定方式变化、api变化三部分。

　　支持标准js语法和api，如if、for、settimeout、indexOf等。

　　但是特定于浏览器的窗口、文档、导航器、位置对象（包括 cookie）仅存储在浏览器中，不支持应用程序和小程序。

　　可能有人认为js就等于浏览器里的js。其实js是通过ECMAScript来组织和管理的，而浏览器中的js是基于js规范的w3c组织，辅以window、document、navigator、location等特殊对象。

　　在uni-app的每一端，除了h5端，另一端的js运行在一个独立的v8引擎下，不在浏览器中，所以浏览器的对象无法使用。如果你做过小程序开发，你应该很清楚这一点。

　　这意味着很多依赖于文档的 HTML 库，例如 jqurey，无法使用。

　　当然，应用程序和小程序支持 web-view 组件，可以加载标准的 HTML。这种页面仍然支持特定于浏览器的对象窗口、文档、导航器和位置。

　　当前前端的趋势是dedomize，切换到mvvm模式，更简洁的写法，大大减少代码行数，同时差分渲染性能更好。

　　uni-app使用vue的数据绑定方式解决js和dom接*敏*感*词*互的问题。

　　如果你想改变一个dom元素的显示内容，比如一个视图的显示文本：

　　以前是给view设置id，然后在js中通过selector获取dom元素，再通过js进行赋值操作，修改dom元素的属性或者值。

　　下面演示一段代码。页面上有一个显示的文本区域和一个按钮。单击按钮后，文本区域的值将被修改

　　<a title="复制代码">复制代码</a>

document.addEventListener("DOMContentLoaded",function () {

document.getElementById("spana").innerText="456"

})

function changetextvalue () {

document.getElementById("spana").innerText="789"

}

123

修改为789

　　目前的做法是vue的绑定方式，给这个dom元素绑定一个js变量，在脚本中修改js变量的值，dom会自动变化，页面会自动更新渲染

　　<a title="复制代码">复制代码</a>

{{textvalue}}

修改为789

export default {

data() {

return {

textvalue:"123",

buttontype:"primary"

};

},

onLoad() {

this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456

},

methods: {

changetextvalue() {

this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789

}

}

}

　　注意上面代码中 export default {} 中的 data(): {return {}}。

　　在Vue的设计中，页面中需要绑定的数据都存放在这里，写入数据中，由界面正确绑定和渲染。

　　注：uni-app的vue页面是vue的单文件组件规范。根据 vue 的定义，只接受函数，必须用 return 包裹。

　　如果你学过小程序的数据绑定，但不了解vue，你应该注意：

　　从上面的例子，我们也可以看到事件的写法的变化。

　　在js中，那些等同于数据和方法的，比如上面示例代码中的onload()，被称为生命周期。普通vue页面中的生命周期称为页面生命周期。项目根目录下app.vue文件中的生命周期称为应用生命周期。

　　除了onload，还有onready等很多生命周期，详见uni-app的生命周期

　　在高级使用中，Vue 支持为组件设置 ref（引用标记），类似于之前在 HTML 中设置 id 给一个 dom 元素，然后在 js 中也可以使用 this.$refs.xxx 来获取。如下：

　　<a title="复制代码">复制代码</a>

11111

获取test节点

export default {

methods: {

getTest() {

console.log(this.$refs.testview)

}

}

};

　　因为uni-app的api是指小程序，所以和浏览器的js api不同，比如

　　alert,confirm 改为 uni.showmodelajax 改为 uni.requestcookie, session 不见了, local.storage 改为 uni.storage

　　uni-app js api很多，但基本上都是小程序api，把wx.xxx改成uni.xxx就行了。看

　　uni-app 支持不同端的条件编译，可以无限使用每端的唯一api，详见条件编译

　　css 变化

　　基本支持标准css。

　　选择器有 2 个变化： *选择器不支持；元素选择器中没有body，改为page。微信小程序就是这种情况。

　　<a title="复制代码">复制代码</a>page{

}

　　单位方面，px不能动态适应不同宽度的屏幕，rem不能用于nvue/weex。如果要使用适应屏幕宽度的单位，建议使用rpx，完全支持。尺寸单位文件

　　Uni-app 推荐使用 flex 布局。这种布局思路和传统的流程​​布局有点不同。但是flex的特点是不管是什么技术，都支持这种布局，web、小程序/快应用、weex/rn、iOS原生、Android开发，都支持flex。这是一个无所不包的新一代布局方案。请自行百度了解相关教程。

　　Uni-app的vue文件支持所有的网页排版方式，无论是streaming还是flex。但是在nvue中，只支持flex，因为它是在app端使用原生排版引擎渲染的。

　　注意css中的背景图片和字体文件，尽量不要大于40k，因为会影响性能。在小终端上，如果大于40k，需要在服务器端通过远程引用或base64后导入，不能作为独立文件引用本地导入。

　　项目结构和页面管理

　　uni-app的工程结构有单独的要求，见

　　每个可显示页面都必须在 pages.json 中注册。如果你开发过小程序，pages.json 和 app.json 类似。如果你熟悉vue，这里没有vue路由，都是在pages.json中管理的。

　　原项目的首页一般是index.html或者default.html，在web服务器中配置。在pages.json中配置uni-app的首页，page节点下的第一页为首页。一般在/pages/xx目录下。

　　在应用和小程序中，为了提升体验，页面提供了原生导航栏和底部标签栏。注意，这些配置是在 pages.json 中完成的，不是在 vue 页面中创建的，但是点击事件监控是在显示的 vue 页面中进行的。

　　如果熟悉小程序开发，对比变化如下：

　　结束语

　　最后，本文不是uni-app的完整教程。要了解和掌握uni-app，需要仔细阅读uni-app文档。

　　如果你对vue有很好的掌握，还是需要去vue官网了解更多。或者通过 uni-app 专业视频培训课程与 vue 和 uni-app 一起学习。

　　根据腾讯课堂和职场朋友的数据，了解Vue的人比不了解Vue的人的前端平均工资高出27%。