Vue.Js

[androllen]

土司

• 传递数据

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

export default {
  el: "#cdn",
  data() {
    return {
      inputinfo: "",
    };
  },
  methods: {
    startTarget() {
      let inputinfo = this.inputinfo;
      this.$notify({
        title: inputinfo,
        type: "success",
        message:
          "We've laid the ground work for you. It's time for you to build something epic!",
        duration: 5000,
      });
    },
  },
};

[androllen]

zeromq

// var zmq = require('zeromq')
const _reqhost = "tcp://127.0.0.1:5555";
const _subhost = "tcp://127.0.0.1:50505";

const ZmqJs = (function () {
    // 存储单例
    let _instance = null;

    const ZmqJs = function () {
        // 判断是否已有单例
        if (_instance) return _instance;
        _instance = this;
        console.log("shell constructor")
        this.reqthost = _reqhost;
        this.subhost = _subhost;
        this.instance = null;
        // 初始化操作
        this.init();
        return _instance;
    };

    ZmqJs.prototype.init = function () {
        this.foo = 'Singleton Pattern';
    };

    ZmqJs.getInstance = function () {
        if (_instance) return _instance;
        _instance = new ZmqJs();
        return _instance;
    };

    function Add(params) {
        return '233';
    }

    async function Check(parameters) {
        const sock = new zmq.Request
        sock.connect(this.reqthost)
        console.log(this.reqthost)
        var text = JSON.stringify(parameters);
        console.log(JSON.parse(text))
        await sock.send(text)

        const [result] = await sock.receive()

        result = eval(result.toLowerCase())
        result = JSON.parse(result);
        console.log(result)
        return result;
    }

    async function Subscribe(parameters, callback) {
        const sock = new zmq.Subscriber

        sock.connect(this.subhost)
        sock.subscribe(parameters)
        console.log("Subscriber connected")
        const [result] = await sock.receive()

        for await (const [topic, msg] of sock) {
            console.log("received a message related to:", topic, "containing message:", msg)
        }
        callback(topic.toString())
        sock.close()
    }
    return ZmqJs;

})();

//启动 zmq 客户端
export default ZmqJs.getInstance();

[androllen]

router/view.js

import { importPage } from '../utils'

// 页面路由
export default () => [
  { path: '/info_cdn', component: importPage("CdnDetect") },
  { path: '/info_waf', component: importPage("WafCheck") },
  { path: '/info_email', component: importPage("EmailGather") }
]

utils/index.js

// 异步加载页面组件
export const importPage = view => () =>
  import(
    /* webpackChunkName: "group-targe" */
    `../views/modules/${view}.vue`
    )

params的类型: 配置路由格式: /router/:id，传递的方式: 在path后面跟上对应的值，传递后形成的路径: /router/123, /router/abc

query的类型: 配置路由格式: /router, 也就是普通配置，传递的方式: 对象中使用query的key作为传递方式，传递后形成的路径: /router?id=123, /router?id=abc

<router-view :to="{path: '/'}"></router-view>
<router-view :to="{path: '/info', params: {id: 1}}"></router-view>

<router-view :to="{name: 'home'}"></router-view>
<router-view :to="{name: 'info', params: {id: 1}}"></router-view>

this.$router.path('/');
this.$router.path({path: '/'});

this.$router.path('/info/1');
this.$router.path({path: '/info/1'});

this.$router.push({name: 'home'});
this.$router.push({name: 'home', params: {id:1}});

this.$router.push('/?name=张三&sex=男&age=18');
this.$router.push({path: '/', query: {name: '张三', sex: '男', age: '18'}});
this.$router.push({name: 'home', query: {name: '张三', sex: '男', age: '18'}});

<!-- 通过代码进行参数传递 -->
<button @click="linktoProfile">档案</button>

linktoProfile() {
    this.$router.push({
        path: '/profile/' + 123,
        query: {
            name: 'test',
            age: 18
        }
    })
}

# 获取参数
<template>
  <div class="home">
        <p>params:{{this.$route.params}}</p>
    <p>query:{{this.$route.query}}</p>
  </div>
</template>

# params:{ "id":"123"}
# query:{ "name":"test","age":18}

[androllen]

props传递参数

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld :msg='msg'></HelloWorld>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
import { fileContents } from '@/sql/file';

export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
  data() {
    return {
      msg: fileContents,
    };
  },
};
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ svgitem }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      svgitem: this.msg,
    };
  },
}
</script>

[androllen]

实时检测输入

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        value: '',
        awesome: false,
        datalength: ''
      }
    },
    methods: {
      send() {
        if (this.datalength) {
          alert('发送成功！');
          this.value = ''
        }
      }
    },
    watch: {
      value() {
        this.$nextTick(function () {
          if (this.datalength) {
            this.awesome = true
          }
          else {
            this.awesome = false
          }
        })

      }
    },
    computed: {
      count() {
        this.datalength = this.value.length
        return this.datalength;
      },
    },
  })
</script>

    <div>
      <input type="text" v-bind:class='{empty: !count}' v-model="value">
      <input type="button" value="发送" v-on:click="send" />

      <div v-show="awesome">value 的值是：{{ value }}</div>
      <!-- 引用 count -->
      <div v-show="awesome">字数：{{ count }}</div>
    </div>

[androllen]

process.env.NODE_ENV 模式

你可以使用--mode重写默认模式

vue-cli-service build --mode development

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

[androllen]

拖拽文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  <title>拖拽文件</title>
  </head>
  <body>

    <div id="area" style="background-color: red;width: 300px;height: 300px;">

    </div>

    <label>请将图像文件拖动到红色区域</label>
    <img id="image" style="width: auto;height: auto;max-width: 300px;max-height: 300px;">

    <script>
      //拖动事件
      area.ondragover = (e)=>{
        e.preventDefault();
      }
      //放下事件
      area.ondrop = (e)=>{
        e.preventDefault();
        let files = e.dataTransfer.files;//获取到拖拽进来的所有图片
        image.src = files[0].path;//将第一张图片插入到页面
      }
    </script>
  </body>
</html>

[androllen]

控制动画可以 播放 暂停 重新播放

  <body>
    <div id="app">
      <div class="box" v-bind:class="classObject"></div>
      <p>{{currentState}}</p>
      <div class="control">
        <button value="播放" @click="onPlay('播放')">播放</button>
        <button value="暂停" @click="onPause('暂停')">暂停</button>
        <button value="重新开始" @click="onRestart('重新开始')">
          重新开始
        </button>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            currentState: "",
            classObject: {
              play: true,
              restart: false,
              pause: false
            }
          };
        },
        methods: {
          onPlay(args) {
            this.classObject.play = true;
            this.classObject.pause = false;
            this.classObject.restart = false;
            this.currentState = args;
          },
          onPause(args) {
            this.classObject.pause = true;
            this.classObject.play = true;
            this.classObject.restart = false;
            this.currentState = args;
          },
          onRestart(args) {
            this.classObject.pause = false;
            if (this.classObject.play) {
              this.classObject.restart = true;
              this.classObject.play = false;
            } else {
              this.classObject.restart = false;
              this.classObject.play = true;
            }
            this.currentState = args;
          }
        }
      });
    </script>
  </body>

p {
  color: grey;
  font-size: x-large;
}
@keyframes mymove {
  0% {
    margin-left: 0px;
  }

  50% {
    margin-left: 400px;
  }

  100% {
    margin-left: 0px;
  }
}

@keyframes mymove1 {
  0% {
    margin-left: 0px;
  }

  50% {
    margin-left: 400px;
  }

  100% {
    margin-left: 0px;
  }
}

.box {
  margin: 50px 0;
  width: 100px;
  height: 100px;
  background-color: #5578a2;
}

.play {
  animation: mymove 5s infinite ease;
}

.restart {
  animation: mymove1 5s infinite ease;
}

.pause {
  animation-play-state: paused;
}

[androllen]

    [菜鸟 vue](https://www.runoob.com/vue2/vue-tutorial.html)
    [构建用户界面的渐进式 JavaScript 框架](https://cn.vuejs.org/)
    [Vue Router 是 Vue.js 官方的路由管理器](https://router.vuejs.org/zh/)
    [Vue 驱动的静态网站生成器](https://v1.vuepress.vuejs.org/zh/)