分类目录归档：小案例

放一些项目中常用的案例，基本上都会涉及ajax和后端有交互，让案例具备实际可用的价值

Vue实现数据实时模糊搜索效果

Vue实现数据实时模糊搜索效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="text" placeholder="搜索新闻" v-model="search">
        <ul>
            <li v-for="item in fiterNews">{{item.title}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      let vm =  new Vue({
            el: "#app",
            data: {
                news:[],
                search:""
            },
            created() { 
                axios.get('http://jsonplaceholder.typicode.com/posts').then((res)=>{
                    this.news = res.data
                })
            },
            computed: {
                fiterNews(){
                    var keyword = this.search;
                    return this.news.filter((val)=>{
                         return val.title.match(keyword)
                    })
                }
            },
        });
    </script>
</body>

</html>

webpack 配置忽略打包文件夹

第一步当然是下载依赖

npm install copy-webpack-plugin --save-dev

然后将插件添加到您的webpack配置中。例如：

let path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: path.resolve(__dirname, './static'), to: 'static' },
      ],
    }),
  ],
};

配置完成重启项目。static在webpack中就不会在打包，而生成的静态资源文件夹

一个简单的原生javascript显示隐藏效果

html部分

<div class="downloadApp">
    <a href="javascript:;" id="codeShow">
        APP下载
    </a>
    <div class="code" id="app_code_pic">
        <img src="images/app_code_pic.png" alt="">
    </div>
</div>

css部分

.downloadApp {
    position: relative;
    width: 200px
}

.downloadApp a {
    font-size: 22px;
}

.downloadApp .code {
    width: 150px;
    height: 220px;
    display: none;
    position: absolute;
    left: 0;
    top: 35px;
}

.downloadApp .code img {
    width: 100%;
}

javascript部分

function codeShow() {
    var codeShow = document.getElementById('codeShow');
    var app_code_pic = document.getElementById('app_code_pic');
    var closeTimer = null;
    app_code_pic.onmouseover = codeShow.onmouseover = function () {
        clearTimeout(closeTimer)
        app_code_pic.style.display = "block"
    }
    app_code_pic.onmouseout = codeShow.onmouseout = function () {
        closeTimer = setTimeout(function () {
            app_code_pic.style.display = "none"
        }, 500)
    }
}
codeShow()