分类： 记事

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

leokim / / 前端, 记事

这里写图片描述

  1.  父组件向子组件传值

    父组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
      <div>
        父组件:    <input type="text" v-model="name">
        <br>
        <br>
        <!-- 引入子组件 -->
        <child :inputName="name"></child>
      </div></template><script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {      return {
            name: ''
          }
        }
      }</script>

    子组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <template>
      <div>
        子组件:    <span>{{inputName}}</span>
      </div></template><script>
      export default {    // 接受父组件的值
        props: {
          inputName: String,
          required: true
        }
      }</script>

  2.  子组件向父组件传值

    子组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
      <div>
        子组件:    <span>{{childValue}}</span>
        <!-- 定义一个子组件传值的方法 -->
        <input type="button" value="点击触发" @click="childClick">
      </div></template><script>
      export default {
        data () {      return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {        // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
      }</script>

    父组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <template>
      <div>
        父组件:    <span>{{name}}</span>
        <br>
        <br>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
        <child v-on:childByValue="childByValue"></child>
      </div></template><script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {      return {
            name: ''
          }
        },
        methods: {
          childByValue: function (childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }</script>

     

  3.  非父子组件进行传值

    公共bus.js

    1
    2
    3
    //bus.jsimport 
    Vue from 'vue'
    export default new Vue()

    组件A

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
      <div>
        A组件:    <span>{{elementValue}}</span>
        <input type="button" value="点击触发" @click="elementByValue">
      </div></template><script>
      // 引入公共的bug，来做为中间传达的工具
      import Bus from './bus.js'
      export default {
        data () {      return {
            elementValue: 4
          }
        },
        methods: {
          elementByValue: function () {
            Bus.$emit('val', this.elementValue)
          }
        }
      }</script>

    组件B

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <template>
      <div>
        B组件:    <input type="button" value="点击触发" @click="getData">
        <span>{{name}}</span>
      </div></template><script>
      import Bus from './bus.js'
      export default {
        data () {      return {
            name: 0
          }
        },
        mounted: function () {
          var vm = this
          // 用$on事件来接收参数
          Bus.$on('val', (data) => {
            console.log(data)
            vm.name = data
          })
        },
        methods: {
          getData: function () {
            this.name++
          }
        }
      }</script>

     

Vue学习笔记

leokim / / 记事

vue-cli3创建项目

一. 项目结构目录调整

初始文件添加

.editorconfig

image.png

再使用EditorConfig for VS Code插件

image.png

添加目录

/api

/directive 自定义指令

/lib 

/router

/store

image.png

/moke (npm isntall mockjs -D)

vue.config.js

image.png

基本配置修改

使用v-on绑定自定义事件

leokim / / 记事
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
 
<script type="text/javascript" src="./vue.js"></script>
 
<script>
    Vue.component('button-counter', {
        template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
        data: function () {
            return {
              counter: 0
            }
        },
        methods:{
            incrementCounter:function(){
                this.counter+=1
                this.$emit('increment')
            }
        }
    })
 
    new Vue({
        el: "#counter-event-example",
        data:{
            total:0
        },
        methods:{
            incrementTotal:function(){
                this.total+=1
            }
        }
    })
</script>

python3 创建Opener对象以实现Cookie与其它HTTP功能

leokim / / 记事

基本的urlopen()函数不支持验证、cookie或其他HTTP高级功能。

要支持这些功能，必须使用build_opener()函数来创建自己的自定义Opener对象。

install_opener(opener) 安装opener作为urlopen()使用的全局URL opener，即意味着以后调用urlopen()时都会使用安装的opener对象。opener通常是build_opener()创建的opener对象。

一些复杂情况详细解决办法：

1. cookie处理

如果要管理HTTP cookie，需要创建添加了HTTPCookieProcessor处理程序的opener对象。默认情况下。HTTPCookieProcessor使用CookieJar对象，将不同类型的CookieJar对象作为HTTPCookieProcessor的参数提供，可支持不同的cookie处理。如下面代码：

url = 'http://www.baidu.com'
postdata = ''
cookie_filename = 'cookie.txt'
cookie =http.cookiejar.MozillaCookieJar(cookie_filename)
handler = urllib.request.HTTPCookieProcessor(cookie)
opener = urllib.request.build_opener(handler)
request = urllib.request.Request(url, postdata, headers)

2.proxy代理

1
2
3
4
5
6
7
import urllib.request  
proxy_handler = urllib.request.ProxyHandler({'http':'123.123.2123.123:8080'})  
proxy_auth_handler = urllib.request.ProxyBasicAuthHandler()  
proxy_auth_handler.add_password('realm', '123.123.2123.123', 'user', 'password')  
opener = urllib.request.build_opener(urllib.request.HTTPHandler, proxy_handler)  
f = opener.open('http://www.baidu.com')   
a = f.read()

swoole安装

leokim / / 记事

swoole项目已收录到PHP官方扩展库，除了手工下载编译外，还可以通过PHP官方提供的pecl命令，一键下载安装swoole很方便

1
pecl install swoole

blob.png

然后添加swoole.so到php.ini

Redis 笔记

leokim / / 记事

blob.png

blob.png

blob.png

blob.png

允许从左边或者右边推入或者弹出

blob.png

blob.png

list数据可以重复

lpop就是从左边pop

rpop就是从右边pop

push同理

blob.png

无序存储不同元素

blob.png

blob.png

blob.png

blob.png

sort set的value必须是全局唯一

如果2条记录的score是一样的 那么就按value的字典顺序排列先后

blob.png

blob.png

blob.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
$redis = new \Redis();
 
$redis->connect("127.0.0.1",8089);
 
//string
$redis->delete("string1");
 
$redis->set("string1","var1");
$val = $redis->get("string1");
var_dump($val);
 
$redis->set("string1", 4);
$redis->incr("string1", 2);
$val = $redis->get("string1");
var_dump($val);
 
?>

blob.png

常用于队列（订单操作等高并发处理）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$redis = new \Redis();
 
$redis->connect("127.0.0.1",8089);
 
 
$redis->delete("list1");
$redis->lPush("list1","A");
$redis->lPush("list1","B");
$redis->lPush("list1","C");
 
$val = $redis->rPop("list1");
 
var_dump($val);
?>
~

blob.png

blob.png

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$redis = new \Redis();
 
$redis->connect("127.0.0.1",8089);
 
$redis->delete('driver1');
$redis->hSet("driver1","name","leokim");
$redis->hSet("driver1","age","100");
$redis->hSet("driver1","gender","1");
 
$val = $redis->hMGet("driver1",array("name","age"));
var_dump($val);
?>

blob.png

结算分数排行