uniapp introduction
environment preparation
1. Install node.js environment
Installation process: install node.js to a drive letter other than the C drive
After the installation is complete, check whether the nodejs environment is normal.
Enter in the cmd window:
node -v
npm -v
Configure the cache directory and global installation directory of nodejs
Create a directory called nodeConfig on a drive letter other than the c drive, create node_cache and node_global directories under the directory,
and then execute the command, execute the cmd window with administrator privileges
npm config set prefix "E:\nodeConfig\node_global"
npm config set cache "E:\nodeConfig\node_cache"
2. Install Taobao Mirror
Taobao environment: cnpm tool, npm downloads resources from overseas mirror warehouses, cnpm downloads resources from Ali’s Taobao mirror resource site, and the speed will be fast
npm install -g cnpm
// 如果速度慢 ，就切换资源站点
npm install -g cnpm --registry=https://registry.npm.taobao.org
Configure the path (node_global path) downloaded by cnpm to the environment variable path
Use the cmd window to test whether the configuration of cnpm is normal
3. Download HX-idea
- Register HX account
- Configure HX related components (HTML, CSS, JS, Vue, Styule, less, piutter; built-in: vue2.0, built-in console, real machine simulation) The following is the
content to be installed for external components:
Build the uniapp project
create project
run project
1. Run the project using a browser
Open the browser's developer tools and switch to debug mode
out of service
2. Use the WeChat applet tool to run the project
1. Download the WeChat Mini Program Development Tool
Download address:
WeChat applet development tool download address, click to enter
2. Installation attention, install to a drive letter other than the C drive
3. Configure WeChat developer tools
4. Configure the association between HX and WeChat development tools
5. A concise introduction to the developer tool interface
6. WeChat Mini Program account and project binding
Purpose: To realize the rapid release of code to the WeChat public platform
- Log in to the WeChat public platform, copy the appID (WeChat applet id, unique)
After the copy and paste is complete, run the applet simulator again
7. Upload to the WeChat public platform to release the beta version
Enter the WeChat public platform to view the test version
8. Use WeChat developer tools for real device debugging
uni-app project framework directory explanation
Include the following directories:
|--pages 业务页面文件存放目录（开发使用）
|--|-- index 业务包名
|--|--|-- index.vue 页面（vue文件）
|--static 静态资源目录（图片、视频、文件、安装包...）
|--unpackage 项目打包目录（编译后该目录就会生成，开发时不去修改）
|--|--dist 打包完成的文件夹（之后编译之后才会生成）
|--App.vue 实例页面，应用生命周期函数
|--main.js 入口文件，完成相关app的配置
|--manifest.json 配置应用名称、图标、小程序信息配置文件
|--pages.json 配置路由、导航条信息
|--uni.scss uni-app通用css样式配置文件
1. Uniapp-page component file writing method and composition
Example: Create a login page
Composition of the page
<!-- HTML页面 - 可视化部分-->
<template>
<!-- 所有的html代码都要卸载view标签中 -->
<view>
<div>
<!-- 点击span标签弹出框体 -->
<span @click="cxk" >哎哟你干嘛！{
{ userName }}</span>
</div>
</view>
</template>
<!-- vue组件脚本部分 js vue -->
<script>
export default {
data() {
// vue数据双向绑定
return {
userName:"马保国"
}
},
methods: {
// js函数？？？？点击触发什么事情
cxk(){
alert("!!!!!!");
}
}
}
</script>
<!-- 组件样式部分 -->
<style>
span{
color:red;
}
</style>
2. Pages.json file configuration routing
For example: After configuring the routing of the file just created, you can access the page through the browser address
Pages.json file content explanation:
{
"pages": [ //pages数组中第一项表示应用启动页
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/common/login", // 路由访问的地址（浏览器可以通过该地址访问页面）
"style" :
{
"navigationBarTitleText": "测试页面", // 导航条显示的文字
"enablePullDownRefresh": false // 关闭下拉刷新功能
}
}
],
"globalStyle": {
// uni-app的通用样式- 设置导航条的样式
"navigationBarTextStyle": "black", // 导航条文字的颜色
"navigationBarTitleText": "体职院-21电子2班-案例", // 导航条文字
"navigationBarBackgroundColor": "#F8F8F8", // 导航条背景颜色
"backgroundColor": "#F8F8F8" // 整个app的背景颜色
},
"uniIdRouter": {
}
}
Zero-based Quick Start HTML, CSS, JS
1. HTML in uniapp
The HTML content is divided into several chunks:
- Text (regular text, paragraph text, heading tags, hyperlinks)
- Image (image tag)
- Video (video tag)
- Forms (text input, dropdown selection, radio selection, check selection, file selection)
- box (view tag)
Note : HTML development is to arrange and use tags and content to achieve the effect of basic web page layout.
Each line of code can only write a set of tags, and tags can be nested, but pay attention to the nesting rules, all content including text must be nested with tags
HTML tags are divided into block-level elements and inline elements
- Block-level element: The content of the element automatically occupies one line, and cannot be displayed on the same line as other block-level element tags or inline element tags
- Inline element: Only the width and height of its own content element can be displayed on the same line as other inline elements
Block-level elements:
<p>段落文本标签</p>
<h1>标题标签</h1>
<center>元素居中标签</center>
Inline elements:
<text>普通文本</text>
<a>超链接\锚点</a>
<b>文字加粗</b>
<i>文字倾斜</i>
1.1 characters
1.1.1 Normal text
Label writing:
<text>文字内容（内部只能写文字不能嵌套别的标签）</text>
Function: A simple text can be described in a web page
case:
<!-- 组件页面（眼睛看见的部分-HTML） -->
<template>
<!-- 都要卸载view标签中才能显示 -->
<!-- 大家好！我叫蔡徐坤！今年45岁 -->
<view>
<text>大家好！</text>
<text>我叫ikun！</text>
<text>今年45岁</text>
</view>
</template>
1.1.2 Paragraph Text
Label writing:
<p>一段文本（可以嵌套如text标签）</p>
Function: It can describe a long text paragraph, and the paragraph and other content cannot be displayed on the same line
case:
<template>
<!-- 都要卸载view标签中才能显示 -->
<!-- 大家好！我叫蔡徐坤！今年45岁 -->
<view>
<p>大家好！我是练习时长两年半XXX</p>
<p>我会CTRL</p>
<!-- p标签和text标签同时出现 -->
<p>大家好！我是练习时长两年半XXX</p>
<text>jijijijiji</text>
<!-- p标签包含text标签 -->
<p>okok你可真的好厉害！
<text>hahahah</text>
</p>
</view>
</template>
1.1.3 Title tags
Label writing:
<h1>文字内容（可以嵌套：text）</h1>
Function: describe a large text title, the text is bold and enlarged
case:
<template>
<!-- 都要卸载view标签中才能显示 -->
<!-- 大家好！我叫蔡徐坤！今年45岁 -->
<view>
<!-- 标题标签只有6个从h1~h6 数字越小文字越大 -->
<h1>马保国-h1</h1>
<h2>马保国-h2</h2>
<h3>马保国-h3</h3>
<h4>马保国-h4</h4>
<h5>马保国-h5</h5>
<h6>马保国-h6</h6>
</view>
</template>
1.1.4 Hyperlinks
Label writing:
<!-- 一般不要嵌套别的内容，后面可以学习嵌套图片实现图片超链接 -->
<a href="超链接的地址">超链接文字</a>
Hyperlink: Click on the text to jump to other web pages
case:
<template>
<!-- 都要卸载view标签中才能显示 -->
<!-- 大家好！我叫蔡徐坤！今年45岁 -->
<view>
<a href="https://www.baidu.com">去百度</a>
</view>
</template>
Anchor link
The screen is long and the screen scrolls, click to go back to the top and jump directly to the top position
<!-- 锚点 -->
<a name="topnav">顶部锚点</a>
<!-- 锚链接 : 点击锚链接可以回到锚点所在的位置 -->
<a href="#topnav">回到顶部</a>
1.1.5 Other Supplementary Labels
<!-- 加粗 -->
<b>文字</b>
<text>文字</text>
<!-- 快速文字内容水平居中 -->
<center>
<text>居中文字</text>
</center>
<!-- 文字倾斜标签 -->
<i>文字2</i>
1.2 Pictures
display image
1.1.1 src attribute
Function: point to the address of a picture to load the picture
1. Use the online address to load
<!-- 1. 使用在线图片地址加载图片 -->
<image src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TH0deMslA_zRpkYFZxJ-GgAAAA?pid=ImgDet&rs=1" />
2. Local address loading - relative path loading
<!-- 3.相对路径访问地址 -->
<image src="../../static/xhz2.png" />
1.1.2 title tag attribute
Mouse or long press a text prompt
<img title="你干嘛!" src="../../static/xhz2.png" />
1.3 video
Attribute introduction:
src: video address
controls: video operation bar
autoplay: autoplay
muted: mute
loop: loop playback
<video controls autoplay muted loop src="../../static/v1.mp4"></video>
1.4 Forms
<!-- 单行文本输入款 -->
<input type="text" placeholder="输入提示文字..."/>
<!-- 密码框 -->
<input type="password" placeholder="请输入密码..." />
<!-- 单选框 -->
<radio-group name="sex">
<radio value="1" />男
<radio value="2" />女
</radio-group>
<!-- 复选框 -->
<checkbox-group name="likes">
<checkbox value="1" />吃鸡
<checkbox value="2" />csgo
<checkbox value="3" />lol
</checkbox-group>
<!-- 多行文本输入框 -->
<textarea placeholder="请输入自我介绍..."></textarea>
<!-- 下拉框 -->
<select>
<option value="1">昆明</option>
<option value="2">蒙自</option>
<option value="3">迪庆</option>
</select>
<!-- 按钮 -->
<button type="warn" >警告按钮</button>
<button >默认按钮</button>
<button type="primary" >重要提示按钮</button>
2. Quick start to css in uniapp
What to learn:
- selector (class, tag, id, child, sibling, neighbor)
- style sheet:
- Text style (font, size, weight, divider, color, shadow)
- Image backgrounds (background image, tile pattern, repeat, fill)
- Box model (margin, padding, border, height, witdh)
- Web page layout method:
- float layout
- flex layout
- Element positioning (absolute, relative, fixed, sticky positioning)
- Animations (transition element properties, keyframe animations)
2.1 Selector
Select elements or tags in the web page to modify the style
2.1.1 How to import styles:
- Inline style
example:
<div>
<!-- 行内样式作用的是style属性所在的标签以及子标签 -->
<span style="color:red;">哎哟你干嘛！{
{ userName }}</span>
<span>123</span>
</div>
- Inner style
example:
<!-- 内部样式写在style标签中-->
<style>
/* 使用内部样式时就要使用元素选择器选择要修改样式的标签 */
span{
color:green;
}
</style>
- External style:
write the css code in a file with the suffix .css, and introduce the component by importing
Case:
/*mytest.css文件*/
span{
color:red;
}
Import in component:
<!-- 内部样式写在style标签中-->
<style>
/* 在组件页面的style标签中导入css文件 */
@import url('../../static/mytest.css');
</style>
2.1.2 Label selector
Function: Select a group of label objects with the same name in the page to modify the style
case:
/* 修改页面中所有的h1标签 */
h1{
color:red;
}
/* 改变一组标签的写法 */
h2,h3,h4{
color:green;
}
2.1.3 Class selector (commonly used)
Writing method: Use the class attribute to name and mark a class of tags in the html tag, and modify the css style through the class attribute name selection
case:
<span class="demo">文字1</span>
<span>文字2</span>
<span class="demo">文字3</span>
<!-- 一个标签可以拥有多种样式 -->
<span class="demo demo2">文字4</span>
.demo{
color:red;
}
.demo2{
font-size:18px;
}
2.1.4 ID Selector
Description of id: ensure that in the same page, the value of the id attribute cannot be repeated.
The writing method is similar to that of class
case:
<span id="ft1">文字1</span>
<span>文字2</span>
<span id="ft2">文字3</span>
<!-- id属性只能有一个唯一值，不能用空格分隔编写多个id -->
/* 只修改id为ft1的样式 */
#ft1{
color:red;
}
2.1.5 Child element selector
When writing html, tags can be nested. At this time, the setting method of the style can be modified by selecting the child tag through the parent tag, but note that the child element selector can only select the "son" element, and the implementation of the "grandchild element" needs Implemented using descendant element selectors
case:
<div class="demo">
<span>儿子</span>
<div>
<span>孙子</span>
</div>
</div>
.demo>span{
color:red;
}
2.1.6 Descendant element selectors
The so-called offspring means that no matter how many levels there are in the sub-element hierarchy, as long as the sub-element is modified
case:
<div class="demo">
<span>儿子</span>
<div>
<span>孙子</span>
</div>
</div>
.demo span{
color:red;
}
2.1.7 Adjacent sibling selectors
Select the first element adjacent to the target element, and the first element adjacent to the same level
<p>段落1</p>
<p id="p2">段落2</p>
<text>文本</text>
<p>段落3</p>
#p2+text{
color:red;
}
2.1.8 Generic sibling selectors
All adjacent selected elements will be modified
<p>段落1</p>
<p id="p2">段落2</p>
<text>文本</text>
<p>段落3</p>
#p2~text{
color:red;
}
2.2 Pseudo-class element selectors
2.2.1 The mouse moves in and changes (hover)
<text>文字1</text>
text:hover{
color:red;
font-size:80px;
}
2.2.2 a label dedicated - has been visited (visited)
When the a tag has been accessed, the style effect of the a tag changes
a:visited{
color:red;
}
2.3 CSS style effects
1. Text style
Can achieve: text font, size, thickness, underline, slant, spacing, color, shadow
1. Font
#t1{
font-family: '宋体';
}
2. Text size
#ti{
font-size:18upx; #uni-app特有的像素点单位描述
}
3. Text bold
#t1{
font-weight: 500;
}
4. Text slant
#t1{
font-style: italic;
}
5. Text Shadow
#t1{
text-shadow: 1px 0px 2px red;
}
6. Text Spacing
#t1{
letter-spacing:10upx;
}
7. Text underline
#t1{
/*text-decoration: underline;*/ /* 下划线*/
text-decoration:line-through; /* 中横线*/
color:red;
}
8. Text color
#t1{
color:red; /* 英文单词 */
color:rgb(255,255,0); /* rgb三原色色值 */
color:#76C379; /* 16进制色值 */
color:rgba(255,255,0,0.5)
}
2. Background style
background
1. Background color
h1{
background-color: aquamarine;
}
2. Gradient background color
linear gradient
h1{
background:linear-gradient(90deg,red,blue);
}
Center Gradient
h1{
background:radial-gradient(red,blue);
}
3. Background image
h1{
/* 背景图片 */
background-image: url('图片地址');
}
4. Image stretching ratio
h1{
/* 背景图片 */
background-image: url('图片地址');
background-size: 100% 100%; /* 图片【宽】、【高】拉伸属性 */
}
5. Background image tiling method
.mydiv{
width: 800upx;
height: 500upx;
background-image: url('gk');
background-repeat: repeat-y; /*默认repeat：使用平铺 no-repeat：背景图片不平铺 repeat-y：纵向平铺 repeat-x：横向平铺*/
}
6. Background image positioning
.mydiv{
width: 80upx;
height: 80upx;
border: 1px solid red;
background-image: url('../../static/comm-spr.png');
background-position: 150upx 50upx; /* 背景图片定位： 【X轴移动像素点】 【Y轴移动像素带你】 */
}
3. Box model
The box model consists of 4 parts:
1.margin: outer margin
2.border: border
3.padding: inner margin
4.content: element content
div{
margin:10px; /* 上右下左都有10个像素点的外边距 */
border:1px solid black; /* 边框的描述 */
padding: 10px; /* 上右下左都有10个像素嗲你的内边距 */
width:100upx; /* 宽高指的内容宽高 */
hegiht:100upx;
}
How to set margin and padding values
- Single value setting method: margin: 20px; top, right, bottom, and left are all 20px margins
- Bilateral setting method: margin: 20px 10px; up and down 20 left and right 10
- Four sides setting method: margin: 10px 20px 30px 40px; clockwise description, top right bottom left
- English words describe one side:
margin-top:10px;
margin-left:40px;
margin-right: 50px;
margin-bottom: 60px;
summary: top: top, bottom: bottom, left: left, right: right
border border setting method
-
Single-line complete writing:
border: 1px solid gray;
border: border thickness style type color; -
Describe the border style of a special side:
border-position word: border thickness style type color;
for example: bottom border style:
border-bottom:1px solid black;
Border style type:
- solid: solid line
- dottoed: dotted line (origin dotted line)
- double: box dotted line
Box Model Calculation Rules
Box size calculation: margin+padding+border+width\height
Change the calculation rules of the box model:
box-sizing: border-box;
Let the set width and height values be calculated as the total size of padding+border+content, so that the box model will not be deformed
4 CSS-Positioning
Positioning purpose: to realize that the elements in the web page can appear in the specified position (overlay, fixed, relative offset)
positioning method: fixed positioning (fixed), relative positioning (relative), absolute positioning (absolute), sticky positioning
The orientation description has four orientation values:
- left: the number of pixels from the left border
- right: the number of pixels from the right border
- bottom: the number of pixels from the bottom edge
- top: the number of pixels from the top
Note: Generally only the two closest border positions are described, either left+top, right+bottom, left+bottom, right+top
1. Fixed positioning
It will always be fixed at the relative position of the screen and will not change
Case: fixed back to top small button
<view class="myDiv">
1
</view>
<text>回到顶部</text>
.myDiv{
height: 9000px;
width: 150px;
background:linear-gradient(180deg,blue,red)
}
text{
position: fixed; /* 固定定位 */
right: 10px;
top: 50px;
}
2. Relative positioning
Offset relative to its original position, but the original position will not be occupied
<view class="myDiv1">
div1
</view>
<view class="myDiv2">
div2
</view>
.myDiv1{
height: 150px;
width: 150px;
background-color: aqua;
position: relative;
top: 10px;
left: 20px;
}
.myDiv2{
height: 150px;
width: 150px;
background-color: red;
}
3. Absolute positioning
<view class="myDiv1">
<view class="myDiv2">div2</view>
</view>
.myDiv1 {
height: 150px;
width: 150px;
background-color: aqua;
position: relative;
top: 10px;
left: 20px;
}
.myDiv2 {
height: 50px;
width: 50px;
background-color: red;
position: relative;
/* 相对于父级元素偏移（要求父级元素也使用了position属性，如果没有则相对于网页进行偏移） */
top:10px;
left:10px;
}
vue framework
1. What is Vue?
Vue.js is a lightweight, data-driven , front-end JS framework that provides efficient data binding and flexible component systems through a concise API .
2. What are the technical advantages compared with Jquery
Old: Jquery
Manipulate DOM elements
jQuery uses a selector ($) to select DOM objects, and performs operations such as assignment, value retrieval, and event binding on them. In fact, the difference from native HTML is that DOM objects can be selected and manipulated more conveniently, while data and interfaces are together
Complex pages are expensive to maintain
jquery needs to get the dom element node and add a label to the dom. If the dom structure is particularly complicated, or the added elements are very complicated, the code will become very complicated and the readability is low.
Difficult to achieve componentized pages
Most of the code in the JQuery era is noodle code, and the coupling is serious
performance loss
Consumption of browser resources
New: Vue.js
Data and View Separation
Vue completely separates data and View through Vue objects. It is no longer necessary to refer to the corresponding DOM object to operate on the data. It can be said that the data and the View are separated, and they are bound to each other through the vm of the Vue object. This is the legendary MVVM.
Data two-way binding
This is the biggest advantage of vue.js. The two-way binding of data is realized through the idea of MVVM, so that developers no longer need to operate DOM objects, and have more time to think about business logic.
Flexible componentization
Vue.js splits various modules in a single-page application into individual components through components. We only need to write various component tags in the parent application first, and write the components to be passed in the component tags. Input the parameters of the components, and then write the implementation of each component separately, and then the whole application is finished.
Virtual DOM, run faster
Virtual DOM is a kind of calculation that can be performed through JavaScript in advance to calculate and optimize the final DOM operation. Since this DOM operation is a preprocessing operation and does not actually operate the DOM, it is called virtual DOM.
3. What is two-way binding
A change in the view layer will affect the content of the data layer, and a change in the content of the data layer will affect the effect of the view layer
MVVM framework (Model-View-ViewModel)
4. Technical features of Vue
5. Introduce the main files and uses of the project in uniapp
Based on uniapp explanation, uniapp is also implemented based on vue, so it also has relevant main files
1.App.vue file
App software life cycle function file:
<script>
export default {
// 三个app加载钩子函数
// 1. 当app加载时会触发的函数
onLaunch: function() {
// 在整个app生命周期中只会被执行一次
console.log('App Launch')
},
// 2. 当app页面被展示（显示主页页面时）
onShow: function() {
// 每一次打开app（从后台切换到前台显示）
console.log('App Show')
},
// 3.当关闭app或者app进入后台时会触发的函数
onHide: function() {
// 每一次关闭或者切换到后台运行都会触发
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
2. main.js file
Describes the entry file of the app
// main.js是程序的入口文件，项目只要编译运行就会先执行main.js文件
// main.js经常使用与配置和全局组件引入功能
// 导入app.vue页面
import App from './App'
// #ifndef VUE3
// 导入vue组件
import Vue from 'vue'
// 是否要关闭隐藏代码警告
Vue.config.productionTip = false
// uniapp配置- 声明app标识符
App.mpType = 'app'
try {
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致
uni.addInterceptor({
returnValue(res) {
if (!isPromise(res)) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (res[0]) {
reject(res[0]);
} else {
resolve(res[1]);
}
});
});
},
});
} catch (error) {
}
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import {
createSSRApp } from 'vue'
export function createApp() {
// 创建一个uniapp实例（保证整个项目只有一个实例）
const app = createSSRApp(App)
return {
app
}
}
// #endif
3. manifest.json file
Applets, apps, and application configuration files
must be opened with HBuilderX
4.pages.json - component path configuration file
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index", // 页面的地址
"style": {
// 每个页面的组件样式
"navigationBarTitleText": "首页"
}
}
,{
"path" : "pages/index/test1/test1",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
// 全局组件样式配置
"navigationBarTextStyle": "black", // 组件导航栏文字颜色
"navigationBarTitleText": "uni-app", // 组件导航栏默认文字
"navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色
"backgroundColor": "#F8F8F8" // 组件背景颜色
},
"uniIdRouter": {
}
}
6. Vue2.0 version - life cycle function
The life cycle of each page component
1. Component creation phase (create) ---- will also trigger uniapp-onShow callback
2. Component rendering phase (mount)
3. Component running phase - data two-way binding modification update (update)
4. Component destruction phase (destroy) ---- will also trigger the uniapp-onhide callback
1. Component creation phase -create
![[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-1gJR5kD5-1681301986776)(note picture/image-20230307152128103.png)]](https://img-blog.csdnimg.cn/f879b32395b0424f821f09d707f893d2.png)
- instantiated component
- beforeCreate before creation
- Enable data monitoring
- Initialize the internal method of vue
- created created
case:
<template>
<view class="content">
<view class="myDiv1">
组件页面
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
// 创建阶段不会渲染html
// 创建前生命周期函数-html不会开始渲染，只是刚刚进入组件要开始加载的阶段
beforeCreate(){
console.dir("1.创建前---");
},
// 创建后生命周期函数-- 组件参数、绑定的数据初始化完成
created(){
console.dir("2.创建后---");
},
methods: {
}
};
</script>
<style>
</style>
2. Component rendering phase - mount
Vue chooses to render the template, whether to use the vue component to render or just render part of the html
1.beforeMount - before the dom element is rendered
start rendering
- mounted - the dom mount is completed (the component is fully loaded, a hook function often used in development)
case:
<template>
<view class="content">
<view class="myDiv1">
组件页面
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
// html渲染前 -- html（template标签中的内容才刚刚开始渲染）
beforeMount(){
console.dir("3.组件渲染前--");
},
// html渲染完成-- html（template标签中的内容已完全渲染完成）
mounted(){
console.dir("4.渲染完成--");
},
methods: {
}
};
</script>
<style>
</style>
3. Component running phase - data update - update
The listener will monitor all data value changes
1.beforUpdate - before data update
Use VDom to dynamically render html
- updated - data rendering is complete
Case: the case of interception to data transformation
<template>
<view class="content">
<view class="myDiv1">
组件页面---{
{ name }}
<button @click="aa">改变name值</button>
</view>
</view>
</template>
<script>
export default {
data() {
// 需要实现双向绑定的数据要写在data (){reutrn{ 语句块中 }}
return {
name:"蔡徐坤"
};
},
// 数据更新之前
beforeUpdate() {
console.dir("数据更新之前--");
debugger
},
//数据更新之后
updated() {
console.dir("数据更新之后--");
},
methods: {
aa(){
this.name = "吴彦祖";
}
}
};
</script>
<style>
</style>
4. Component destruction phase -destroy
Note: By default, the component will not be actively destroyed. It needs to use the v-if instruction or Vue.$destroy() to trigger the vue destruction process
- Whether the component enters the destruction process (v-if instruction or, Vue.$destroy())
- beforeDestroy - before destroying
- Destroy - all data value caches in the component will disappear, and the vdom cache will also be cleared
- destroyed - destroyed
case:
<template>
<view class="content">
<view class="myDiv1">
组件页面---{
{ name }}
<button @click="aa">改变name值</button>
</view>
</view>
</template>
<script>
export default {
data() {
// 需要实现双向绑定的数据要写在data (){reutrn{ 语句块中 }}
return {
name:"蔡徐坤"
};
},
// 组件销毁之前
beforeDestroy() {
console.dir("3.组件销毁之前--");
},
// 组件销毁之后
destroyed() {
console.dir("4.组件销毁之后--");
},
methods: {
aa(){
this.name = "吴彦祖";
}
}
};
</script>
<style>
</style>
7. Vue syntax - interpolation expression
The interpolation expression is a pair of curly braces { { elements for placing data two-way binding }}
case:
<template>
<view class="content">
<view class="myDiv1">
<!-- 在此处，插值表达式就会将name对应的数据“蔡徐坤”渲染到插值表达式所在的位置 -->
组件页面---{
{ name }}
</view>
</view>
</template>
<script>
export default {
data() {
// 需要实现双向绑定的数据要写在data (){reutrn{ 语句块中 }}
return {
name:"蔡徐坤"
};
},
methods: {
}
};
</script>
v-once directive
Role: Describe that the interpolation expression will only bind the original data value of the component and cannot be changed
Case:
<template>
<view class="content">
<view class="myDiv1">
<span>{
{ name }}</span>
<hr/>
<!-- 让数据双向绑定的效果失效，只加载第一次绑定的数据进行渲染 -->
<span v-once>{
{ name }}</span>
<button @click="name='吴彦祖'">name改变为“吴彦祖”</button>
</view>
</view>
</template>
8. vue command
1. v-if \v-else
Features: to allow components or tags to mount (true) or remove (false)
<!-- 当v-if值为true时：标记的标签或者组件会被加载
为false是：标记的组件或标签会被移除
-->
<div v-if="布尔值数据" >XXX</div>
case:
<template>
<view class="content">
<view class="myDiv1">
<h1 v-if="isLoading" >大家好！我是XXX</h1>
<button @click="changeSapn()">切换</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '蔡徐坤',
isLoading:false
};
},
methods: {
changeSapn() {
if(this.isLoading==false){
this.isLoading = true;
}else{
this.isLoading = false;
}
}
}
};
</script>
<style></style>
v-else
Trigger v-else loading when v-if is not satisfied
<h1 v-if="age>11">XXX</h1>
<h1 v-else>吴彦祖</h1>
2. v-show
Features: Components or labels exist all the time, just show or hide components or labels through css
<template>
<view class="content">
<view class="myDiv1">
<h1 v-show="isLoading" >大家好！我是XXX</h1>
<button @click="changeSapn()">切换</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '蔡徐坤',
isLoading:false
};
},
methods: {
changeSapn() {
if(this.isLoading==false){
this.isLoading = true;
}else{
this.isLoading = false;
}
}
}
};
</script>
<style></style>
3. v-on (event binding)
<button v-on:dblclick="changeSapn">切换</button>
v-on is written in the tag to trigger the event, v-on: event name = "the number of lines to be called after the event is triggered"
Types of event triggers:
| event name | event writing |
|---|---|
| double click | dblclick |
| click | click |
| mouseover | mouseove |
| mouse out | mouseout |
The method of shorthand event binding in vue
<button @dblclick="changeSapn">切换</button>
@EventName = "Number of lines to call after the event fires"
4. v-for
1. Method of looping collection or array
<template>
<view class="content">
<view class="myDiv1">
<!-- 将arr的数据循环为三个h1标签 -->
<h1 v-for="(item,index) in arr">{
{ index }}{
{ item.name }} - {
{ item.age }}</h1>
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr:[
{
name:"张三",
age:18
},
{
name:"李四",
age:28
}
]
};
},
2. Loop map
<template>
<view class="content">
<view class="myDiv1">
<!-- 如果循环的是一个对象或map集合，item代表的是对象的属性值，index代表的是对象的属性名 -->
<h1 v-for="(item,index) in resMap">{
{ index }}{
{ item }}</h1>
</view>
</view>
</template>
<script>
export default {
data() {
return {
resMap:{
name:"蔡徐坤",
age:26,
sex:"男"
}
};
},
5. v-model (binding of form data)
Be able to bind the data input by the component (form component) to data
<template>
<view class="content">
<view class="myDiv1">
<h1>{
{ userData.name }} - {
{ userData.age }} - {
{ userData.context }}</h1>
<!-- 单行文本输入 -->
<label>单行文本</label>
<input type="text" placeholder="请输入姓名..." v-model="userData.name"/>
<hr/>
<!-- 多行文本输入 -->
<label>多行文本</label>
<textarea v-model="userData.context" />
<hr/>
<!-- 数字输入框 -->
<label>数字输入框</label>
<input type="number" placeholder="请输入年龄..." v-model="userData.age"/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userData:{
name:null,
age:0,
context:null
}
};
},
8. Vue Listener
It can monitor the data changes in the component page, and when the data changes, the function bound to the listener will be triggered
<template>
<view class="content">
<view class="myDiv1">
<h1>{
{ userData.name }}</h1>
<label>单行文本</label>
<input type="text" placeholder="请输入姓名..." v-model="userData.name"/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name:null,
userData:{
name:null
}
};
},
// 定义监听器组件
watch:{
// 监听普通数据
name:function(newValue,oldValue){
console.dir("新数据："+newValue);
console.dir("旧数据："+oldValue);
},
// (监听对象中的属性变化)监听userData对象中name数据的改变
"userData.name":function(newValue,oldValue){
console.dir("新数据："+newValue);
console.dir("旧数据："+oldValue);
}
},
9. Functions
Encapsulate some common calculations or operations, and implement the execution of function content through events or active calls, which can reduce repetitive code writing
<template>
<view class="content">
<view class="myDiv1">
<!-- 在插值表达式中调用函数,插值表达式如果调用方法需要定义返回值 -->
{
{ twoNumberSum(1,2) }}
<button @click="aa()" >测试</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name:null,
userData:{
name:null
}
};
},
// 定义js函数的位置 - 两种触发方法：1.事件触发 @click="twoNumberMax(1,2)" 2.在vue组件中主动调用
methods: {
// 计算两个数值的最大值
twoNumberMax(number1,number2){
if(number1>number2){
console.dir(number1);
}else{
// 进入else调用aa方法
this.aa(); // 调用组件中别的方法要使用this.方法名(实参列表)
}
},
aa(){
let sumData = this.twoNumberSum(5,8);
console.dir(sumData);
},
// 计算两个数之和，计算结果返回给调用处
twoNumberSum(arg1,arg2){
var sumData = arg1+arg2;
if(sumData>100){
return "大于100";
}else{
return "小于等于100";
}
// return 语句要在执行逻辑的最后一步编写
},
//
}
};
</script>
<style></style>
UI framework
Web-side UI framework related to Vue framework
(1) ElementUI
https://element.eleme.cn/#/zh-CN
is suitable for web-side framework
(2) Ant Design for Vue
https://www.antdv.com/components/anchor
Web-side UI framework related to Html framework
(1)Layui
https://www.layuiweb.com/
(2)Bootstarp
https://www.bootcss.com/
Mobile UI framework related to uni-app framework
(1) uView framework
https://www.uviewui.com/
uni-app integrates uViewUI framework
1. Create a uniapp empty project
2. Download the uView class library from the component market
hbuilderX must ensure that SCSS compilation has been installed
3. Introduce the uView component in the project
Import uView component library in main.js
// 导入uView组件
import uView from '@/uni_modules/uview-ui';
Vue.use(uView);
import theme.scss in uni.scss
/* 导入uView样式库-主题库 */
@import '@/uni_modules/uview-ui/theme.scss'
Introduce the style in the first line of the style tag of App.vue
<style lang="scss">
/*每个页面公共css */
/* uView组件库样式 */
@import '@/uni_modules/uview-ui/index.scss'
</style>
Automatic component import, page.json
Reminder:
In order to debug the performance of uni-app, modifying the easycom rules will not take effect in real time. After configuration, you need to restart HX or recompile the project to use the uView function normally.
Please make sure you have only one easycom field in your pages.json, otherwise please combine multiple import rules yourself.
If you import uView through uni_modules, you can ignore this configuration
{
// 如果您是通过uni_modules形式引入uView，可以忽略此配置
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {
}
}