kali系统的安装和使用

在体验了两个多周的Linux系统之后感觉体验还不错，于是我在电脑上装了第三个系统，kali，正好这也是Debian的分支，下载下来后我发现里面集成许多渗透常用分析工具 Burp、wireshark、sqlmap还有一些我没见过的工具，这可能就是那些网络安全的大佬喜欢kali的原因吧。

Vue3学习 - DAY3&4

模块化的使用

因为Vue的模块化是目前前端的主流，所以以后的笔记都会用模块化进行。

模块的引用,App.vue是vue的入口文件，和html和php中的index起着一样的效果，所以就从这里开始引入模块。

Part1

<script>
import { RouterLink, RouterView } from 'vue-router';
import Index from './components/Index.vue';//引入模块
export default {
  data(){
    return {
      WebSiteName: "Home",
      Arr: [1,2,3]
    }
  },
  components:{
        Index
  },//这里代表元素的注册
  methods:{
    recChild(value){
      console.log(value);
    }
    // 需要创建一个函数来接受子组件传过来的变量
  }
}
</script>

<template>
<Index></Index>
<!-- 完成上面两个步骤就可以在任意位置插入元素了 -->
<!-- 元素可以重复插入 -->
<Index :theName="WebSiteName" :Arr="Arr"></Index>
<!-- 这里用v-bind来绑定动态属性theName是他在子组件中的标签名字 -->
<index @message="recChild"></index>
<!-- 利用v-on来监听子组件传来的参数 -->
</template>

<style>

</style>

以上为App.vue部分

<script>
export default {
    data(){
        return {
            greet: "hello",
        }
        },
    // props:['theName']
    // props 用于接收父组件传递过来的数据
    // 以上是props用数组接受的写法
    // 下面是用对象的写法
    props:{
        // theName:Sring
        // 可以用以上写法接收theName并且指定他的数据类型
        // 也可以用下面的方法来设置theName的默认值
        // required可以要求必须传值
        theName:{
            type:String,
            default:"Loading",
            required:false
        },
        Arr:{
            type:Array,
            default(){
                return [1,1,1];
            }//数组或对象设置默认值必须用函数来返回一个默认值
        }
    },
    methods:{
        transportParent(){
            this.$emit("message",this.greet);
            // $emit这个关键词可以向父组件传递参数
        }
    }
    }
</script>
<template>
    <p>Hello template!</p>
    <!-- 它与 app.vue虽然是父子组件的关系，但并不能获取App.vue中的变量 -->
    <br/>
    <p>{{ greet }}</p>
    <br/>
    <button @click="greet = '你好！'">Go</button>
    <!-- 这里点击Go后即可发现每个组件之间的属性是互相独立的 -->
    <!-- 点击按钮只有对应的 元素的属性发生了变化 -->
    <!-- vue3这样的设计可以有效的防止数据污染 -->
    <br/>
    <p>{{ theName }}</p>
    <!-- 通过props传递的数据就可以直接使用了 -->
    <!-- 并且这样的数据是拥有响应式的了 -->
    <br/>
    <p>{{ Arr }}</p>
    <br/>
    <button @click="transportParent">Transport</button>
    <!-- 向父组件传递参数 -->
    <br/>
</template>

以上为Index文件部分

插槽的使用

这里分p是因为一直下去会很乱

App.vue

<script>
import slotTest from './components/slotTest.vue'
export default{
    data(){
        return {
            name:"xuanSAMA",
            greet: "夜深了,早些休息吧！"
        }
    },
    components:{
        slotTest
    }
}
</script>
<template>
<!-- <slotTest>XuanSAMA</slotTest> -->
<!-- 在插槽中可以随意添加html元素 -->
<slotTest>
<template v-slot:userName>{{ name }}</template>
<template v-slot:greet>{{ greet }}</template>
<!-- 这里只能用template -->
</slotTest>
</template>

slotTest.vue

<script>
export default{
    data(){
        return{

        }
    },
}
</script>
<template>
    <!-- <p>欢迎您 <slot></slot>,<br/>夜深了,早些休息吧！</p> -->
    <!-- 以上示例用slot标签即可达成最简单slot效果 -->
    <!-- 以下为具名插槽的使用 -->
    <p>欢迎您 <slot name="userName">User</slot>,<br/><slot name="greet">Welcome</slot></p>
    <!-- 可将默认值写在slot中间 -->
</template>

组件之间的跨域传递

App.vue

<script>
import injectionTest from "./components/injectionTest.vue"
export default{
    data(){
        return{
            testData:"this is a demo",
            obj:{
                msg:"Hello"
            }
        }
    },
    provide(){
        return {
            trans:this.testData,
            objMsg:this.obj
        }
    },
    components:{
        injectionTest
    }
}
</script>
<template>
<!-- 组件之间的跨域传递 -->
<!-- 只支持向后代传递数据 -->
<!-- VUe3新增写法 -->
<injectionTest></injectionTest>
<button @click="testData='Changed！'">responseTest</button>
<!-- 这里可以发现发送过去的数据并不是响应式的 -->
<!-- 如果要让它支持响应式那么就需要传递一个对象 -->
<!-- 因为学过JAVA和php这样的面对对象的编程语言就知道 -->
<!-- 只有传递对象是传递的地址，因此可以达到响应式 -->
<button @click="obj.msg='Changed！'">objChange</button>
</template>

injectionTest.vue

<script>
export default{
    data(){
        return{
            recData:this.trans,
            theMsg:this.obj
        }
    },
    inject:['trans','obj']
}
</script>
<template>
    <p>{{ recData }}</p><br />
    <p>{{ theMsg.msg }}</p>
</template>