uniapp里面如何创建元素

uni-app中创建元素的四种方式

uni-app是一个多端开发框架，支持生成编译出微信小程序、阿里小程序、百度小程序、H5、App等平台。本文将介绍在uni-app中创建元素的四种方式，包括使用vue.js模板语法、组件方式、原生JS操作DOM以及第三方UI库。

使用vue.js模板语法

uni-app基于vue.js开发，所以我们可以使用vue.js的模板语法来创建元素。

在上面的代码中，我们使用<template>标签创建了一个Vue.js的模板，用<view>标签代表容器，用<text>标签代表文本元素，用{{message}}代替了Hello World!这个字符串。

组件方式

在uni-app中我们也可以使用组件方式来创建元素。组件是Vue.js中的一种机制，它可以将一个大的应用程序拆分成多个小的组件进行开发。以下是创建组件的代码示例。

在上面的代码中，我们使用<template>标签来引用一个我们自定义的组件<my-component>，我们使用import来导入组件的vue单文件，并在components中注册MyComponent组件。同时在<my-component>元素中设置message属性为Hello World。

原生JS操作DOM

uni-app也支持使用原生JS操作DOM元素。

在上面的代码中，我们使用<template>标签创建了一个容器元素<view>，并为它设置了id的属性为myDiv。我们在mounted()生命周期钩子中，获取到了#myDiv元素，并使用document.createElement()方法创建一个<p>元素，同时给p元素的textContent赋值为Hello World。我们使用appendChild()方法将<p>元素添加到<view>容器元素中。

第三方UI库

uni-app还支持使用第三方UI框架的组件库，如Vant，Element-UI等。

在上面的代码中，我们通过import方式引入了Vant组件库，并使用Vue的use()方法将Vant注册到全局，在<template>标签中使用Vant的<van-button>组件，生成一个提交按钮。

总结

在uni-app中创建元素通常可以使用Vue.js的模板语法、组件方式、原生JS操作DOM以及第三方UI库。在实际开发中，根据各个场景的不同，我们可以选择最合适的一种方式进行开发。当然，对于习惯使用Vue.js模板语法的开发者来说，建议使用组件方式进行开发，因为Vue.js的组件机制可以帮助我们更好地组织代码，提高可复用性和维护性。