vue3网页版常用笔记

一、实现表格树原理（目前只有两级）

二、属性替换为计算属性进行过滤

为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

data(){
    users:[
        {id:1,isactive:true},
        {id:2,isactive:false},
        {id:3,isactive:true},
    ]
}，
computed(){
    activeUsers(){
        return this.users.filter(user=>user.isActive);
    }
}

<div v-for="user in activeUsers" >
 
</div>

三、组件

1、全局组件注册

作用：解决组件多个时，导入组件多个麻烦问题。

install.js如下：

import {
  PugLoading,
  PugTree,
  PugCalendar,
  PugCheckbox,
  PugPage,
  PugRadio,
  PugSelect,
  PugUpload
} from './index'

// 导出组件
export default {
  install: function (app) {
    app.component('PugRadio', PugRadio)
    app.component('PugSelect', PugSelect)
    app.component('PugPage', PugPage)
    app.component('PugCheckbox', PugCheckbox)
    app.component('PugUpload', PugUpload)
    app.component('PugCalendar', PugCalendar)
    app.component('PugTree', PugTree)
    app.component('PugLoading', PugLoading)
  }
}

index.js

export { default as PugPage } from './page/PugPage'
export { default as PugSelect } from './form/PugSelect'
export { default as PugRadio } from './form/PugRadio'
export { default as PugInput } from './form/PugInput'
export { default as PugCheckbox } from './form/PugCheckbox'
export { default as PugUpload } from './upload/PugUpload'
export { default as PugCalendar } from './calendar/PugCalendar'
export { default as PugTree } from './tree/PugTree'
export { default as PugEditor } from './editor/PugEditor'
export { default as PugLoading } from './loading/PugLoading'
export { default as PugPermission } from './permission/PugPermission'

在main.js中进行组件注册

import {createApp} from 'vue'
// 引入自定义组件。index.js是组件的默认入口
import PugUI from './components/install'

const app = createApp(App);
app.use(PugUI);//内部插件 install()
app.mount('#app');

 直接使用

 2、组件的属性自定义-props

从子组件同步数据到父组件

limit限制长度，type="number"输入类型为数字

<template>
  <div class="pug-form-item-control-input">
    <div class="pug-form-item-control-input-content">
				<span class="pug-input-affix-wrapper pro-field pro-field-md">
          <input :placeholder="placeholder" class="pug-input w328" :type="type" :maxlength="limit"/>
        </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "PugInput",
  // 自定义属性
  props:{
    placeholder:{
      type:String,
      default:"请输入..."
    },
    type:{
      type:String,
      default:"text"
    },
    limit:{
      type:Number,
      default: 20
    }
  }

}
</script>

3、组件中数据同步（v-model同步）

从父组件同步数据到子组件

若不处理这个问题，组件的封装毫无意义，

v-model同步主要用于form表单，其他地方很少用到

<pug-input :placeholder="请输入...."  v-model="product.name" type="text"></pug-input>

解决

modelValue，this.$emit('update:modelValue', ev.target.value);

<input :placeholder="placeholder"  @input="toggleValue($event)" 
class="pug-input w328" :type="type" :maxlength="limit"/>

<script>
export default {
  name: "PugInput",
  // 自定义属性
  props: {
    modelValue: {
      type: String
    },
    placeholder: {
      type: String,
      default: "请输入..."
    },
    type: {
      type: String,
      default: "text"
    },
    limit: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {}
  },

  created() {
  },
  methods: {
    toggleValue(ev) {
      // 这个是处理 v-model数据同步
      this.$emit('update:modelValue', ev.target.value);
// 把当前ev.taget.value输入值，更新到你指定v-model属性中modelValue="product.name}

    }
  }

}
</script>

四、实现状态管理复用

 点击状态可进行改变

<td  @click="updateRelation(index,'status')">
     <div :style="{'color':[item.status ==1?'green':'red']}">
         {{ item.status == 1 ? "发布中" : "未发布" }}
     </div>
</td>
<td  @click="updateRelation(index,'isdelete')">
     <div :style="{'color':[item.isdelete ==1?'green':'red']}">
         {{ item.isdelete == 1 ? "删除" : "未删除" }}
     </div>
</td>

可以实现复用 

    updateRelation(index, field) {
      // 状态控制
      const changeVal = this["items"][index][field] == 1 ? 0 : 1;
      // 修改
      const id = this.items[index].id;
      var params = {id: id};
      params[field] = changeVal;
      productService["saveUpdateProduct"](params)["then"](res => {
        if (res.status == 200) {
          this.items[index][field] = changeVal;
        }
      })
    },

五、注意返回类型

当res成功返回时，可能出现返回的是字符串的情况,如下

"{"id":1}"

此时取数据就要转为json格式

var res=JSON.parse(response.data)

判断返回的类型可以用typeof

typeof res.data

六、@click、@blur、@input

@click

@click.stop可以阻止事件冒泡，触发changeBgPic()之后就不会触发下一个事件

<view class="center_top" @click.stop="changeBgPic()" :style="{'background':'url('+userInfo.bgImg+')'}">
	<view class="base">
		<image @click.stop="changeMyFace()" class="profily_header" :src="userInfo.avatar" mode=""></image>
	</view>		
</view>

@blur

元素失去焦点时触发事件

<input class="nickname-input" type="text"  @blur="updateNickname" 
:value="nickname" :model="nickname" placeholder="请填入昵称~" 
maxlength="12" @input="typingContent" />



methods: {
			async updateNickname() {
				var that = this;
				// 获取要更新的用户ID
				var user = app.getUser();
				var userId = user.id;
				// 获取更新的用户名
				var nickname = that.nickname;
				// 组装发送给服务器的参数信息
				var userParams = {
					"userId": userId,
					"nickname": nickname
				};
				
				try{
					var res = await userService.updateUserInfo(userParams);
					if (res.code == 200) {
						// 重置本地用户信息
						user.nickname = nickname;
						// 重新刷到缓存中去
						app.setUser(user);
						// 回退到上一级
						// uni.navigateBack({
						// 	delta: 2,
						// 	animationType: "fade-out"
						// })
						
						uni.reLaunch({
							url:"/pages/me/me",
							animationType: "fade-out"
						})			
					}
				}catch(e){
					uni.showToast({
						title: e.message,
						icon: "none",
						duration: 3000
					});
				}
			}
		}

@input

输入的值发生变化就会触发input

<input class="nickname-input" type="text"  @blur="updateNickname" 
:value="nickname" :model="nickname" placeholder="请填入昵称~" 
maxlength="12" @input="typingContent" />

methods: {
    			typingContent(e) {
				var event = e;
				// 把输入的内容同步到nickname中
				this.nickname = e.detail.value;
				this.wordsLength = this.nickname.length;
			},
		}