Uni-app Learning Notes series

【 knowledge 】Uni-app- Learning Notes 01

【 knowledge 】Uni-app- Learning Notes 02

Updates continue at……..

Uni-app- Study Notes 02

3. Basic use of components

Uni-app provides a rich set of building blocks for developers to build their own applications from

The components in UNI-App are used to build the infrastructure of a page, much like the div, P, span tags in HTML.

1) The use of text components

Text Component property

attribute	type	The default value	mandatory	instructions
selectable	boolean	false	no	Whether text is optional
space	string	.	no	Displays consecutive Spaces. Optional parameters:ensp,emsp,nbsp
decode	boolean	false	no	Whether the decoding

• textComponents are equivalent to inline labels that are displayed on the same line
• All nodes except the text node cannot be long-selected

Code case

<view>
  <! -- Long press text is optional -->
  <text selectable='true'>My dad nun</text>
</view>

<view>
  <! -- How to display consecutive Spaces -->
  <view>
    <text space='ensp'>My dad nun</text>
  </view>
  <view>
    <text space='emsp'>My dad nun</text>
  </view>
  <view>
    <text space='nbsp'>My dad nun</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <! -- Whether to decode -->
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>
Copy the code

2) View container component usage

View container, similar to a DIV in HTML

View component properties

The property name	type	The default value	instructions
hover-class	String	none	Specifies the style class to press. Hover -class=” None “, no click effect
hover-stop-propagation	Boolean	false	Specifies whether to prevent the ancestors of this node from appearing clickable
hover-start-time	Number	50	How long does it take for the click state to appear after holding, in milliseconds
hover-stay-time	Number	400	Click retention time after finger release, in milliseconds

Code case

<view class="box2" hover-class="box2_active">
  <view class='box1' hover-class='active' hover-stop-propagation,
        hover-start-time="2000",hover-stay-time='2000'>

  </view>
</view>
Copy the code

3) The use of button components

Properties of the Button component

The property name	type	The default value	instructions
size	String	default	Button size
type	String	default	The style type of the button
plain	Boolean	false	Whether the button hollow, transparent background color
disabled	Boolean	false	Whether the button
loading	Boolean	false	Name Indicates whether to carry loading icon

• buttonThe component defaults to a single line, setsize 为 miniCan display more than one line.

Case code

<button size='mini' type='primary'>The front end</button>

<button size='mini' type='default' disabled='true'>The front end</button>

<button size='mini' type='warn' loading='true'>The front end</button>
Copy the code

4) Use of image components

imageThe picture

The property name	type	The default value	instructions	Platform Difference Description
src	String		Image resource address
mode	String	‘scaleToFill’	Picture cropping, zoom mode

Tips

• <image>The default component width is 300px and height is 225px;
• srcOnly relative and absolute paths are supported, and base64 codes are supported.
• If the page structure is complex and there are too many CSS styles, using image may cause the style to take effect slowly and the “flash” situation occursimage{will-change: transform}, can optimize the problem.

4. Styles in UNI-app

• RPX is a responsive PX, a dynamic unit that ADAPTS to the width of the screen. Based on a 750-wide screen, 750rpx is exactly the width of the screen. As the screen widens, the actual RPX display will be proportionally enlarged.

• The @import statement can be used to import an external style sheet, followed by the relative path of the external style sheet to be imported, using; End of statement

• Supports basic common selectors such as class, ID, element, etc

• * selector cannot be used in uni-app.

• Page is equivalent to the body node

• The styles defined in app.vue are global and apply to each page. The styles defined in the vue file in the Pages directory are local, apply only to the corresponding page, and override the same selector in app.vue.

• Uni-app supports the use of font ICONS in the same way as normal Web projects. Note the following:

  • Font files smaller than 40KB are automatically converted to Base64 format by UNI-App;

  • If the font file is greater than or equal to 40KB, you need to convert it by yourself; otherwise, it will not take effect.

  • It is recommended that the reference path of the font file be an absolute path starting with @.

     @font-face {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }
    Copy the code

• How to use SCSS or LESS

5. Data binding in UNI-app

The data needs to be defined in the page, just like we did in vUE, we can define the data directly in data

export default {
  data () {
    return {
      msg: 'hello-uniapp'}}}Copy the code

The use of interpolation expressions

• Use interpolation to render basic data

  <view>{{msg}}</view>
  Copy the code

• Use ternary operations in interpolation expressions

  <view>{{ flag ? }}</view>Copy the code

• Basic operation

  <view>{{1+1}}</view>
  Copy the code

V-bind dynamically binds attributes

In data we define an image that we want to render on the page

export default {
  data () {
    return {
      img: 'http://sunmiong.jpg'}}}Copy the code

Render using V-bind

<image v-bind:src="img"></image>
Copy the code

It can also be shortened to:

<image :src="img"></image>
Copy the code

V – for use

Data with an array, and finally render the array to the page

data () {
  return {
    arr: [{name: 'sunming'.age: 18 },
      { name: 'Sun Bujian'.age: 18}}}]Copy the code

Use V-for for the loop

< view v - for = "(item, I) in arr" : the key = "I" > name: {{item. The name}} - age: {{item. Age}} < / view >Copy the code

• Import the component in another component and register it

  import login from "@/components/test.vue"
  Copy the code

• Certified components

  components: {test}
  Copy the code

• Using the component

  <test></test>
  Copy the code

Component lifecycle functions

See the VUE-API documentation for details

function	attribute
beforeCreate	Called after the instance is initialized.
created	Called immediately after the instance is created.
beforeMount	Called before the mount begins.
mounted	Called after being mounted to the instance. Note: there is no guarantee that the child components are fully mounted, but you can use it in the operation if you want the child components to be fully mounted$nextTick
beforeUpdate	Called when data is updated and occurs before the virtual DOM is patched.	Only the H5 platform supports this function
updated	This hook is called after the virtual DOM is re-rendered and patched due to data changes.	Only the H5 platform supports this function
beforeDestroy	Called before instance destruction. At this step, the instance is still fully available.
destroyed	Called after the Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed.

2. Communication of components

Parent component passes value to child component

Functions to accept values passed inside the component

<template> <view> This is a custom component {{MSG}} </view> </template> <script> export default {props: ['msg'] } </script> <style> </style>Copy the code

Other components pass values when using the Test component

<template>
	<view>
		<test :msg="msg"></test>
	</view>
</template>

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		
		components: {test}
	}
</script>
Copy the code

Child components pass values to parent components

Parameters are passed through the $emit trigger event

<template>
	<view>This is a custom component {{MSG}}<button type="primary" @click="sendMsg">Pass values to the parent component</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: 'Play basketball'}},props: {
			msg: {
				type: String.value: ' '}},methods: {
			sendMsg () {
				this.$emit('myEvent'.this.status)
			}
		}
	}
</script>
Copy the code

The parent component defines a custom event and receives parameters

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'}},methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>
Copy the code