Basic基础操作

1. 基础操作

-----在属性中读取变量值[]
:placeholder="['选择'+attrLabel[index]]"

2. vue选择元素

document.querySelector("#attr-value-input")
document.querySelector(".attr-value-input")

3. 添加动态类名

以下代码在循环后的每个input标签上面出现自定义类名 attr-value-input-0

<div class="table-row" v-for="(item,index) in this.dataInfo">
    <el-input v-model="item.inputValue"
       :class="'attr-value-input-'+[index]"  />
</div>

4. input基本事件

@keyup.enter键盘事件

<el-input 
    v-model="item.inputValue" 
    type="text" size="small" :disabled="readOnly"
    @keyup.enter="addAttrValueTag($event,index)"
    @blur="closeAttrTagInput(index)"
    />

data核心数据

如果在data中想要访问data的数据，在内部函数中无法访问this，得到结果是undefine，这时候可以事先将this定义出来，然后直接访问

data(){
    const $this = this;
    return {
        football:'足球',
        person:{
            username:'feng',
            age:23,
            onHobby(){
                 return $this.football;           
            }        
        }    
    }
}

setup钩子函数

在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性

import {skipTo} from '@/assets/js/utils/uniapp_utils.js'
export default {
    //这里如果不用setup函数，skipTo函数是没法直接暴露给组件的，则html中无法使用这个函数
    //如果setup想使用props中的数据，需要传入props变量
    setup(props){
        
        let model = props.model;
        return {
            skipTo
        }
    },
    data() {
        return {
            swiperList:[],
            navList:[],
            floorList:[]
        };
    },

compute计算属性

计算属性是对组件数据data的修饰，比如对name进行加工，一般具有缓存功能

computed:{
    defActive(){
      return this.$route.path;
    },
    myName(state){
        return state.username+'1';    
    }
  },

getter计算函数

类似于compute计算属性，可以对state进行修饰包装返回

注意：getters如果使用箭头函数则不能使用this

//普通函数的getters（可以使用this）
getters: {
    // 自动将返回类型推断为数字
    doubleCount(state) {
        return state.counter * 2
    },
    // 返回类型必须明确设置
    doublePlusOne(): number {
        return this.counter * 2 + 1
    },
},
//箭头函数的getters（不能使用this）
getPrice:(state)=>{
    return state.price+2;
}

watch监听函数

watch和getter函数区别：

watch和getter函数都可以监听属性变化，区别是，

• watch可以监听的范围更广，比如一个函数一个ref
• getter一般用来监听data的属性

1. watch函数监听data域的值变化

watch: {
    // 侦听根级属性
    username(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // 该回调将会在被侦听的对象的属性改变时调动，无论其被嵌套多深
    c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // 侦听单个嵌套属性：
    'c.d': function (val, oldVal) {
      // do something
    },
}

2. 在create函数中调用watch函数

//一般在create函数执行
  this.$watch(()=>this.$route.path(to,from)=>{
    console.log("路由发生变化：",to,from);
  });
  //输出结果：路由发生变化： /pc/lib/user/add /pc/lib/user/update

3. watch函数可以监听一个或者多个响应式数据源（一个函数、一个ref、一个响应式对象）

//直接watch函数中执行
watch:{
  $route(to,from){
    console.log("路由发生变化：",to,from);
  }
},

lifetime钩子函数

• created():组件创建的时候执行

当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。

这里可以做一些操作，比如初始化加载数据

created:()=>{
    actionGetMenuListFromServer();
    console.log("组件已经被创建成功");
}

• mounted():组件渲染成功之后执行 ，在组件被挂载之后调用。这时候可以访问dom元素

mounted:()=>{
    actionGetMenuListFromServer();
    console.log("组件已经被挂载成功");
}

patch修改state

批量修改state的方法

useAuthStore.$patch({
    current : 999
    name : 'asdasd'
})

事件传参$event

键盘enter键事件

@keyup.enter="handleAttrInputConfirm"
---------------
handleAttrInputConfirm(e){
    console.log('......',e.target.value)
}

携带多个参数,此时需要$event才能将默认参数e传递过来

@keyup.enter="handleAttrInputConfirm($event,index)"
----------------
handleAttrInputConfirm(e,index){
    console.log('......',e.target.value,index)
}