vue 分类

只为前端提供的免费cdn

稳定、快速、免费的前端开源项目 CDN 加速服务

游鹄君2025/5/16小于 1 分钟

基础常用

<el-input v-model="input" placeholder="请输入内容"></el-input>

游鹄君2025/5/16大约 1 分钟

input-文本域

文本域

提示

这里要强调一点的是,如果想改变文本域的长度可以添加class然后修改宽度

<el-input
          type="textarea"
          :rows="1"
          :autosize="{ minRows: 2, maxRows: 6 }"
          placeholder="请输入内容"
          v-model="addChannelForm.channel_description"
          maxlength="30"
          show-word-limit
          class="info"
          >
</el-input>

游鹄君2025/5/16小于 1 分钟

select-基础使用示例

单选示例:

基础示例:

代码:

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

游鹄君2025/5/16小于 1 分钟

select-带远程搜索

说明:

在实际工作中,面对复杂的业务逻辑,有时需要带远程搜索的选择框?具体来说就是用户选择选项的时候,一个接口提供一些常用的默认选项.
但是如果默认选项里面没有这些选项,就需要提供搜索功能,通过搜索查找出选项,这样用户就可以完成这个选择动作

实际解决办法:

类似于这样的情况,往往不只一处地方使用,通常需要单独封装成一个对应在业务逻辑下的组件.这样做也是为了后续维护方便

示例:

该示例是以商品品牌为例,用户选择商品品牌

游鹄君2025/5/7大约 2 分钟

vue常用的官网手册

element

element vue2 官网

element vue3 官网

游鹄君2025/5/7小于 1 分钟

vue

提示

如要记录vue相关

游鹄君2025/5/7小于 1 分钟

组件生命周期

示例代码如下:

<template>
   <div class="v_home_life">
      <div>
         {{ title }}
      </div>
      <hr/>
      <div>{{ msg }}</div>
      <button @click="toupdate()">更新</button>
   </div>
</template>
 
<script>
export default {
 
  name: 'v_home_life',
 
  data() 
  {
    return {
      title:"我是生命周期演示组件",
      msg:"我是更新前的测试数据"
 
    }
  },
  // 自定义方法
  methods:
  {
   toupdate()
   {
      this.msg = "我是更新后的数据";
   }
  },
 
  //实例创建之前
  beforeCreate()
  {
     console.log('实例创建之前');
  },
  //创建
  created()
  {
    console.log('创建');
  },
  //挂载之前
  beforeMount()
  {
       console.log('实例挂载之前');
  },
  //挂载
  mounted()
  {
       console.log('挂载');
  },
  //更新之前
  beforeUpdate()
  {
       console.log('实例更新之前');
  },
  //跟新后
  updated()
  {
       console.log('更新之后');
  },
  //销毁之前
  beforeDestroy()
  {
       console.log('销毁之前');
  },
  //销毁后
  destroyed()
  {
       console.log('销毁之后');
  }
 
};
</script>
 
<style lang="css" scoped>
.v_home_life
{
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
}
</style>

游鹄君2025/5/7小于 1 分钟

组件创建,注册,挂载

提示

1scoped(样式需要scoped声明以免污染全局)
2必须有div根元素包裹

创建组件

在相应分层目录创建组件

示例如下:

src/components/home/v_home.vue

<template>
   <div class="home">
      <div class="red">
         <h2 >{{ title }}</h2>
      </div>
      
   </div>
</template>
 
<script>
export default {
 
  name: 'v_home',
 
  data() {
    return {
      title:"我是一个首页组件"
 
    };
  },
};
</script>
 
<style lang="css" scoped>
  .red
  {
    background-color: red;
  }
</style>

游鹄君2025/5/7小于 1 分钟

组件传值父组件向子组件传值

说明

1在父组件里面的子组件上面绑定动态属性

2在子组件通过props接收传递的数据

3注意:子组件里面声明的属性不要跟父组件的名称相同

4可以传递值,方法,对象,父组件的方法不要加括号(表示不执行)

示例

父组件示例

src/components/pc/home/v_home_list.vue

<template>
   <div class="v_home_list">
      <div>
         {{ title }}
      </div>
      <hr/>
      <div class="one">
         <v_byvalue_one :parame="parame_one" :pick="pick" :self="this"></v_byvalue_one>
      </div>
      
   </div>
   
</template>
 
<script>
import v_byvalue_one from "@/components/pc/home/v_home_byvalue_one.vue";
export default 
{
 
  name: 'v_home_list',
 
  data() 
  {
    return {
      title:"我是HOME首页列表页",
      parame_one:'我是父组件传给组件1的值',
      parame_two:'我是父组件传给组件2的值'
 
    };
  },
  components:
  {
    v_byvalue_one
  },
  methods:
  {
   pick()
   {
      alert('我是父组件的弹出方法');
   }
  }
};
</script>
 
<style lang="css" scoped>
 
.v_home_list
{
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
}
 
.one
{
   width: 100%;
   height: 40%;
}
</style>

游鹄君2025/5/7大约 2 分钟