Learn to use Vue in uni-app

Recommended (free): uni-app development tutorial

Article Directory

• Foreword
• 1. Use of properties and methods
• 2. Vue life cycle
• 3. Global variables
• • 1. Public module
  • 2. Mount Vue.prototype
  • 3.globalData
• 4. Class and Style binding
• • 1. Object syntax
  • 2. Array syntax
• Summary

Preface

The main content of this article is the usage of Vue in uni-app, as follows:
Vue supports responsive data operations, It can realize the binding of data and events, and supports this transfer;
uni-app adds application life cycle and page life cycle based on the Vue instance life cycle;
3 ways to implement global variables, namely Public modules, mounting Vue.prototype and globalData;
Dynamic binding of Class and Style, including the use of object syntax and list syntax.

1. Use of properties and methods

Vue is a progressive framework based on JavaScript for building user interfaces, supportingResponsive data operation, after declaring a variable, the view will be re-rendered after the value of the variable changes, without the need to manually update the DOM node.

As you can see, all page file suffixes are .vue, which is a single file. The variables are declared in the data attribute of the script module. templateWhen using variables in a block, you need to include the variable with {<!-- -->{}};
You can also define methods to perform specific functions, which need to be included in In the methods attribute of the script module, events can be bound in the component at the same time. The format is v-on:click="event name" and @click="event name", corresponding events can be triggered based on conditions.
For the correspondence between web events and events in uni-app, please refer to https://uniapp.dcloud.io/use?id=Event Processor.

index.vue is as follows:

<template>
	<view class="">
		<text>{{name}}</text>
		<button type="primary" @click="changeName">改变名字</button>
	</view></template><script>
	export default {
		data() {
			return {
				name: &#39;Corley&#39;
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			changeName: function(){
				this.name = &#39;Corlin&#39;
			}
		},
	}</script><style></style>

Among them, this represents the Vue instance itself. In addition to calling properties, you can also call methods.

Display:

You can see that the name attribute has been changed.

If there are multiple functions nested in the function, there may be problems in passing this. In this case, you can use variables to replace , as follows:

<template>
	<view class="">
		<text>{{name}}</text>
		<button type="primary" @click="changeName">改变名字</button>
	</view></template><script>
	var _self;
	export default {
		data() {
			return {
				name: &#39;Corley&#39;
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			changeName: function(){
				_self.name = &#39;Corlin&#39;;
				setTimeout(function(){
					_self.name = &#39;Corlin...&#39;
				}, 2000);
			}
		},
	}</script><style></style>

Display:

You can see that after clicking the button, the name is changed first, and then changed again after 2 seconds, which means _self replaces this successfully.

2. Vue life cycle

Vue supports instance life cycle, uni-app adds application life cycle on this basis and Page life cycle.

Vue instance life cycle hook automatically binds this context to the instance, so you can access data and perform operations on properties and methods.
details as follows:

##beforeCreateAfter the instance is initialized, Data observer (data observer) and event/watcher event configuration are called before created is called immediately after the instance is created. At this step, the instance has completed the following configuration: data observer, property and method operations, and watch/event event callbacks. However, the mount phase has not started yet and the $el property is not yet available. beforeMountCalled before the mount starts: the related render function is called for the first time. mounted Called after the instance is mounted, then el is replaced by the newly created vm.$elbeforeUpdateCalled when the data is updated, which occurs before the virtual DOM is patched. This is suitable for accessing the existing DOM before updating, such as manually removing an added event listener. updatedThe virtual DOM is re-rendered and patched due to data changes, after which this hook will be calledactivatedCalled when a component cached by keep-alive is activateddeactivatedCalled when a component cached by keep-alive is deactivatedbeforeDestroyCalled before the instance is destroyed destroyedCalled after the instance is destroyed. After this hook is called, all instructions corresponding to the Vue instance are unbound, all event listeners are removed, and all child instances are destroyed. errorCapturedCalled when capturing an error from a descendant component. This hook receives three parameters: the error object, the component instance where the error occurred, and a string containing information about the source of the error. This hook can return false to prevent the error from propagating further upwards.

Function	Meaning

The application life cycle belongs to the entire uni-app project and can only be monitored in App.vue. Monitoring on other pages is invalid.

The details are as follows:

FunctionMeaningonLaunchTriggered when uni-app initialization is completed (only triggered once globally)onShowWhen uni-app starts, or enters the foreground display from the backgroundonHideWhen uni-app enters the background from the front deskonErrorWhen uni-app reports an error Triggered whenonUniNViewMessageTo monitor the data sent by the nvue page, please refer to nvue communicating with vueonUnhandledRejection Listening function for unhandled Promise rejection event (2.8.1) onPageNotFound There is no listening function on the pageonThemeChangeMonitoring system theme changesThe page life cycle belongs to a specific page and is valid for the current page.

Common page life cycles are as follows:

FunctionMeaning onLoad monitors page loading, its parameter is the data passed on the previous page, and the parameter type is Object (used for page parameters), refer to the exampleonShowListen to the page display. Triggered every time the page appears on the screen, including returning from the lower-level page point to reveal the current pageonReadyListens for the completion of the initial rendering of the page. Note that if the rendering speed is fast, #onHide will be triggered before the page entry animation is completedonUnloadListen for page unloadingonResizeListen for window size changesonPullDownRefresh Monitor the user's pull-down action, generally used for pull-down refresh, refer to the example onReachBottomThe event when the page scrolls to the bottom (not scroll-view to the bottom), often used for pull-down Next page of data. See the notes below for detailsonPageScrollMonitor page scrolling, the parameter is ObjectonNavigationBarButtonTap Listen to the native title bar button click event, the parameter is Object

三、全局变量

uni-app中实现全局变量有几种实现方式。

1.公用模块

定义一个专用的模块，用来组织和管理这些全局的变量，同时将它们作为常量，在需要的页面引入，如果这些常量需要改变，直接在模块中改变即可，而不需要再在每一个导入的页面手动修改，优化了项目的结构。
例如，在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 constants.js 用于保存公共的变量和方法，一般为常量，很少需要改动，如下：

const apiUri = 'https://api.jisuapi.com/news/get?channel=头条&start=100&num=20&appkey=66487d31a1xxxxxx';const sayHi = function(){
	console.log('hello corley')}export default {
	apiUri,
	sayHi}

定义之后，需要通过export default导出，可以供其他页面导入使用。

再在index.vue中导入和使用：

<template>
	<view class="">
		<text>{{name}}</text>		
		<button type="primary" @click="changeName">改变名字</button>
		<text>{{link}}</text>
	</view></template><script>
	var _self;
	import common from &#39;../../common/constants.js&#39;
	export default {
		data() {
			return {
				name: &#39;Corley&#39;,
				link: &#39;&#39;
			}
		},
		onLoad() {
			_self = this;
			common.sayHi();
			this.link = common.apiUri		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			changeName: function(){
				_self.name = &#39;Corlin&#39;;
				setTimeout(function(){
					_self.name = &#39;Corlin...&#39;
				}, 2000);
			}
		},
	}</script><style></style>

显示：

显然，实现了引用全局变量和方法。

2.挂载 Vue.prototype

将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会继承下来。
这种方式只支持vue页面，同时只需要在 main.js 中定义好即可在每个页面中直接调用。

先在项目的 main.js 中挂载属性或者方法，如下：

import Vue from 'vue'import App from './App'Vue.config.productionTip = false;Vue.prototype.appName = 'uni_demo';App.mpType = 'app'const app = new Vue({
    ...App})app.$mount()

再在index.vue中调用即可，如下：

<template>
	<view class="">
		<text>{{name}}</text>		
		<button type="primary" @click="changeName">改变名字</button>
		<text>APP Name: {{app_name}}</text>
	</view></template><script>
	var _self;
	import common from &#39;../../common/constants.js&#39;
	export default {
		data() {
			return {
				name: &#39;Corley&#39;,
				app_name: &#39;&#39;
			}
		},
		onLoad() {
			_self = this;
			common.sayHi();
			this.app_name = this.appName		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			changeName: function(){
				_self.name = &#39;Corlin&#39;;
				setTimeout(function(){
					_self.name = &#39;Corlin...&#39;
				}, 2000);
			}
		},
	}</script><style></style>

显示：

显然，成功导入了main.js中定义的变量。

3.globalData

对于小程序来说，还可以使用globalData属性在App.vue声明全局变量，同时支持H5、App等平台，是一种比较简单的全局变量使用方式。

App.vue如下：

<script>
	export default {
		globalData:{
			info: &#39;success&#39;
		},
		onLaunch: function() {
			console.log(&#39;App Launch&#39;)
		},
		onShow: function() {
			console.log(&#39;App Show&#39;)
		},
		onHide: function() {
			console.log(&#39;App Hide&#39;)
		}
	}</script><style>
	</style>

index.vue如下：

<template>
	<view class="">
		<text>{{name}}</text>		
		<button type="primary" @click="changeName">改变名字</button>
		<text>Status: {{status}}</text>
	</view></template><script>
	var _self;
	import common from &#39;../../common/constants.js&#39;
	export default {
		data() {
			return {
				name: &#39;Corley&#39;,
				status: &#39;failed&#39;
			}
		},
		onLoad() {
			_self = this;
			common.sayHi();
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			changeName: function(){
				_self.name = &#39;Corlin&#39;;
				_self.status = getApp().globalData.info;
				setTimeout(function(){
					_self.name = &#39;Corlin...&#39;
				}, 2000);
			}
		},
	}</script><style></style>

显示：

可以看到，获取到了App.vue中定义的全局变量globalData。

除了前面3种方式，还可以通过Vuex实现，具体可参考https://ask.dcloud.net.cn/article/35021。

四、Class 与 Style 绑定

为节约性能，将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中，实现动态绑定class和style属性。

1.对象语法

可以传给 v-bind:class 一个对象，实现动态地切换 class；
也可以在对象中传入更多字段来实现动态切换多个 class。
v-bind:class 可以简写为:class，并且与普通的 class 共存。

index.vue如下：

<template>
	<view class="">
		<view :class="{active: isActive, fontSize50: isBig}">Hello Corley</view>		
		<button type="primary" @click="changeClass">改变名字</button>
	</view></template><script>
	var _self;
	import common from &#39;../../common/constants.js&#39;
	export default {
		data() {
			return {
				isActive: false,
				isBig: false
			}
		},
		onLoad() {
			_self = this;
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			changeClass: function(){
				_self.isActive = !_self.isActive;
				_self.isBig = !_self.isBig;
			}
		},
	}</script><style>
	.active {
		color: #DD524D;
	}
	.fontSize50 {
		font-size: 50upx;
	}</style>

显示：

可以看到，通过对象实现了动态切换class属性。

2.数组语法

可以把一个数组传给 v-bind:class，以应用一个 class 列表，列表的元素可以是变量、字符串、三元运算符或者对象，如下：

<template>
	<view class="">
		<view :class="[&#39;active&#39;, &#39;fontSize50&#39;]">江湖林野</view>		
		<view :class="[isActive?&#39;active&#39;:&#39;&#39;, fontCenter]">奇人异事</view>		
		<view :class="[{back: renderBack}, &#39;fontSize50&#39;]">飞贼走盗</view>		
		<button type="primary" @click="changeClass">改变class</button>
	</view></template><script>
	var _self;
	import common from &#39;../../common/constants.js&#39;
	export default {
		data() {
			return {
				isActive: true,
				isBig: false,
				fontCenter: &#39;fontCenter&#39;,
				back: &#39;back&#39;,
				renderBack: true
			}
		},
		onLoad() {
			_self = this;
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			changeClass: function(){
				_self.isActive = !_self.isActive;
				_self.isBig = !_self.isBig;
				_self.renderBack = !_self.renderBack;
			}
		},
	}</script><style>
	.active {
		color: #DD524D;
	}
	.fontSize50 {
		font-size: 50upx;
	}
	.fontCenter{
		text-align: center;
	}
	.back{
		background-color: #007AFF;
	}</style>

显示：

显然，实现了动态切换多个class。

style使用如下：

<template>
	<view class="">
		<view :class="[&#39;active&#39;, &#39;fontSize50&#39;]">江湖林野</view>		
		<view :class="[isActive?&#39;active&#39;:&#39;&#39;, fontCenter]">奇人异事</view>		
		<view :class="[{back: renderBack}, &#39;fontSize50&#39;]">飞贼走盗</view>		
		<view :style="[{ color: activeColor, fontSize: fontSize + &#39;px&#39; }]">神鬼传说</view>		
		<button type="primary" @click="changeClass">改变class</button>
	</view></template><script>
	var _self;
	import common from &#39;../../common/constants.js&#39;
	export default {
		data() {
			return {
				isActive: true,
				isBig: false,
				fontCenter: &#39;fontCenter&#39;,
				back: &#39;back&#39;,
				renderBack: true,
				fontSize: 60,
				activeColor: &#39;#3039dd&#39;
				
			}
		},
		onLoad() {
			_self = this;
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
			changeClass: function(){
				_self.isActive = !_self.isActive;
				_self.isBig = !_self.isBig;
				_self.renderBack = !_self.renderBack;
				_self.fontSize = 30;
				_self.activeColor = &#39;#23A752&#39;
			}
		},
	}</script><style>
	.active {
		color: #DD524D;
	}
	.fontSize50 {
		font-size: 50upx;
	}
	.fontCenter{
		text-align: center;
	}
	.back{
		background-color: #007AFF;
	}</style>

显示：

可以看到，动态修改了行内样式。

总结

作为使用 Vue.js 开发前端应用的框架，uni-app中支持使用Vue语法，发布时也支持大部分甚至全部Vue的语法，在属性方法的使用、Class和Style的动态绑定等方面有很大的一致性，同时uni-app丰富了生命周期，增加了定义全局变量的方法，扩展了功能，有利于快速开发。

The above is the detailed content of Learn to use Vue in uni-app. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

uni-app vue

source：csdn.net

Previous article：uni-app introductory tutorial - third-party login and sharing Next article：Introducing uni-app’s font library, custom components, packaging and news practice

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• Complete records of PHP operation redis
  2023-04-09 22:44:01
• Focus on detailed explanation of Java classes and objects
  2021-05-21 15:21:45
• A brief analysis of PHP's simple operation of mysql lock mechanism
  2023-04-09 22:42:01
• What to do if php cannot load mysql
  2023-03-09 12:50:01
• How to prohibit copying in css
  2023-01-05 16:13:24
• How to disable sliding in css
  2023-01-05 16:13:23
• How to change image color with css
  2021-04-30 16:46:04
• What is the difference between ajax and javascript
  2023-01-05 16:13:23
• How to define private methods in javascript
  2023-01-05 16:13:22
• How to convert time string to time in javascript
  2021-04-30 16:27:19

Latest Issues

There is an error with npx create-react-app command, how do I fix it? I've been trying to create a new React app using the 'npxcreate-react-app' command but it ...

From 2024-04-05 14:42:18

0

1

3511

In React, localstorage.getItem returns null index.js：importReactfrom'react';importReactDOMfrom'react-dom/client';import'./index.css';i...

From 2024-04-05 14:18:19

0

1

1523

React Router nested routing and use of search parameters When using search parameters in a nested React route, when I'm on /app, and after clicking...

From 2024-04-05 13:48:33

0

1

1475

How to add Vuex 3 for Vue 2.7? When I run: yarncreatenuxt-app I see in package.json: "dependencies":{"nuxt...

From 2024-04-05 13:49:24

0

1

1382

Axios related errors encountered when building React applications using vite Axios works perfectly in production but when building the application I get this error. &g...

From 2024-04-05 13:20:02

0

1

326

Related Topics

More>

• Vue parent component calls the method of child component
• vue v-if
• The difference between vue2.0 and 3.0
• How to pass value to vue component
• The difference between vue3.0 and 2.0
• vue common instructions
• What are the commonly used instructions in vue?
• mpvue sum vue division

Popular Recommendations

• How to refresh the current page in uniapp
• How to jump to the page in uni-app
• How to set page background color in uniapp
• How to disable page sliding in uniapp
• Let you understand uniapp cross-domain issues (detailed examples)

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

• 
  Your first line of UNI-APP code

  13801

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1418459 times of learning
• 
  JAVA Beginner's Video Tutorial

  2494388 times of learning
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  504699 times of learning
• 
  Quick introduction to web front-end development

  215432 times of learning
• 
  Master PS video tutorials from scratch

  881588 times of learning

• 
  [Web front-end] Node.js quick start

  6716 times of learning
• 
  Complete collection of foreign web development full-stack courses

  5235 times of learning
• 
  Go language practical GraphQL

  4370 times of learning
• 
  550W fan master learns JavaScript from scratch step by step

  645 times of learning
• 
  Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

  22235 times of learning

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

• [form button] jQuery enterprise message form contact code
• [Player special effects] HTML5 MP3 music box playback effects
• [Menu navigation] HTML5 cool particle animation navigation menu special effects
• [form button] jQuery visual form drag and drop editing code
• [Player special effects] VUE.JS imitation Kugou music player code
• [html5 special effects] Classic html5 pushing box game
• [Picture special effects] jQuery scrolling to add or reduce image effects
• [Photo album effects] CSS3 personal album cover hover zoom effect

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

• [PNG material] Cute summer elements vector material (EPS PNG)
• [PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)
• [banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)
• [PNG material] Golden graduation cap vector material (EPS PNG)
• [PNG material] Black and white style mountain icon vector material (EPS PNG)
• [PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses
• [banner picture] Flat style Arbor Day banner vector material (AI+EPS)
• [PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved