微语 微语：代码适合中午敲，早晚出BUG

vue使用子组件 Vue

1.引入子组件

import 自定义名字 from '子组件路径'

2.注册子组件

 components:{
            使用名字:引入子组件的自定义名字
        }

3.使用子组件

<name></name>

完整示例

<template>
    <div>
        <h1>当前组件</h1>
        <name></name>
    </div>
</template>

<script>
import HelloWord from './components/HelloWorld.vue'
    export default {
        components:{
            name:HelloWord
        }
    }
</script>
小诸葛 vue vue使用子组件 6-14
评论(0) 浏览(763)

vue-cli安装脚手架 Vue

1.全局安装vue-cli

yarn global add @vue/cli

2.创建项目

vue create 名称

3.进入项目目录/启动项目

yarn serve
npm run serve
小诸葛 vue-cli 6-14
评论(0) 浏览(705)

vuex 数据存储读取 Vue

1.在state定义空数组

  state: {
    goodsList:[],//商品列表
  },

2.在 mutations里面写更新数据方法,payload 是传递过来的值，赋值给state下面的goodsList数组

  mutations: {
    // 存储商品
    addGoods(state,payload){
      state.goodsList=payload
    }
  },

3.吧获取到的数据传递给vuex 用this.$store.commit方法传递数据

// 把获取到的数据传递给vuex
        this.$store.commit('addGoods',res.data.data)

4.在从computed里面读取存vuex储的数据

    computed:{
        // 从vuex里面读取商品数据
        list(){
        return  this.$store.state.goodsList
        }
    }
小诸葛 vuex 6-13
评论(0) 浏览(717)

vue 组件封装 Vue

1.创建子组件

components/ListUl.vue

2.父组件引入子组件

    components: {
        ListUl: () => import('@/components/ListUl.vue')
    },

3.父组件中使用

<list-ul></list-ul>

4.父组件传值

<list-ul :sum="list" ></list-ul>

5.子组件接收参数

export default {
    props: ["sum"], // 接收父组件传递的参数
}

6.子组件使用参数

    <ul>
        <li v-for="(v, i) in sum" :key="i">
        </li>
    </ul>
小诸葛 vue 组件封装 6-13
评论(0) 浏览(695)

vue 日期过滤器 Vue

格式：年-月-日 时：分：秒

Vue.filter("datetime", (d) => {
    let d1 = new Date(d);
    let year = d1.getFullYear();//年
    let month = ("0" + (d1.getMonth() + 1)).slice(-2);//月
    let day = ("0" + d1.getDate()).slice(-2);//日
    let hour = ("0" + d1.getHours()).slice(-2);//时
    let minute = ("0" + d1.getMinutes()).slice(-2);//分
    let second = ("0" + d1.getSeconds()).slice(-2);//秒

    // 格式化输出
    return (
        year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
    );
});
小诸葛 日期过滤器 6-7
评论(0) 浏览(747)

echarts图表自适应 Vue

在vue中使用echarts图表，窗口收缩图表不自适应解决办法

在绘制图表下添加：

  window.onresize=function(){
            myChart.resize()
        }

离开页面的时候销毁resize事件

destroyed(){
        window.onresize=null//组件销毁时去除resize事件
    }
小诸葛 echarts 6-4
评论(0) 浏览(719)

图片上传API 前端

前端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片上传示例</title>
</head>
<body>
  <form>
    <input type="file" id="fileInput">
    <button type="button" onclick="upload()">上传</button>
  </form>
  <script>
    function upload() {
      var fileInput = document.getElementById("fileInput");
      var file = fileInput.files[0];
      var ajax = new XMLHttpRequest();
      var url = "http://home.v6g.cn/upload.php";
      ajax.open("POST", url, true);
      ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
          // 请求成功，在此处理返回的数据
           var responseJson = JSON.parse(ajax.responseText);
    console.log(responseJson); 
        }
      };
      var formData = new FormData();
      formData.append("file", file);
      ajax.send(formData);
    }

  </script>
</body>
</html>

后端代码

<?php
header("Content-Type:text/html;charset=UTF-8");
header('Access-Control-Allow-Origin: *'); // 允许跨域访问
header('Access-Control-Allow-Methods: POST'); // 允许POST请求
header('Access-Control-Allow-Headers: Content-Type'); // 允许数据类型为JSON
if ($_FILES["file"]["error"] > 0) {
    // 如果文件上传错误，返回错误信息
    echo json_encode(array('code' => -1, 'msg' => '上传失败：' . $_FILES["file"]["error"]));
} else {
    // 将上传的文件移动到指定位置
    $uploadDir = "./uploads/";
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }
    $fileName = md5(time() . rand()) . '.' . pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
    $uploadPath = "./uploads/" . $fileName;
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $uploadPath)) {
        // 获取上传文件信息
        $fileSize = filesize($uploadPath);
        $fileUrl = 'http://' . $_SERVER['HTTP_HOST'] . '/uploads/' . $fileName;
        $fileTime = date('Y-m-d H:i:s', filemtime($uploadPath));
        // 返回上传成功后的文件地址和信息
        $response = array(
            'code' => 0,
            'msg' => '上传成功',
            'data' => array(
                'src' => $fileUrl,
                'name' => $fileName,
                'size' => $fileSize,
                'time' => $fileTime
            )
        );
        echo json_encode($response);
    } else {
        echo json_encode(array('code' => -2, 'msg' => '上传失败'));
    }
}
?>

使用方法：

1. 根目录创建 文件夹 uploads 用于存放图片
2. 创建 upload.php 放入后端代码
3. 创建 index.html 存放前端代码
4. 访问前端代码 上传图片，打开控制台，即可看到返回结果
小诸葛 图片上传API 6-3
评论(0) 浏览(748)

Vue组件之间传递数据 Vue

1.设置总线，在main.js中

// 设置一个总线，用于组件之间传递参数
Vue.prototype.$bus = new Vue()

2.需要传数据出去的组件

            // 传递参数
            this.$bus.$emit("sendImg", res.imgUrl);

3.接收数据的组件

         // 接收参数
        this.$bus.$on('sendImg',(url)=>{
            this.imgUrl=url
        })
小诸葛 数据传递 6-1
评论(0) 浏览(736)

友情链接 申请

lerte程序员 六思逸 微4e 峡州仙士之页 郑羊羊咩的窝

I am 小诸葛

是一名前端工程师，独立开发者、博主

最新评论