Vue学习笔记（一）

一、父子组价间的传值

• 1.父组件传值给子组件
  在父组件中使用子组件时，可以通过直接在子组件中添加属性来给子组件传值，像下面这样

<template>
    <innerHeader @getkey="getkey" :btns="btns"></innerHeader>
</template>

<script>
    import innerHeader from "../../components/innerHeader"
    export default {
        name: "ip_ping_index",
        data() {
            return {
                current: 'ICMP',
                btns: ['ICMP', 'TCPing', 'HPing']
            }
        },
        components: {
            innerHeader
        }
    }
</script>

父组件在使用子组件时，通过 :btns="btns"将自己data中的btns传递给了子组件。
而子组件则应该接收，像下面这样

export default {
        name: "innerHeader",
        props: {
            btns: {
                type: Array, //规定传入的格式
                required: true //声明这个参数是否必须传入
            }
        }

这样子组件就拿到了父组件传来的值，直接通过btns就可以拿到，就像拿data里面的数据一样。

• 2.子组件传值给父组件
  父组件给子组件的传值有props这座桥梁，而子组件要传值给父组件，就没有那么方便了，只能通过触发函数的方式。这个过程有点复杂，用文字不好描述，回头我会在这里补一张手写的笔记照片。先留个坑。

二、 v-bind:style

可以简写为 :style ,用于为元素添加行内样式。当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue 会自动侦测并添加相应的前缀。

• 1.对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
data: {
  activeColor: 'red',
  fontSize: 30
}
</script>

<div v-bind:style="styleObject"></div>
<script>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
</script>

• 2.数组语法

<div v-bind:style="[baseStyles, overridingStyles]">

其中数组的元素是data中的对象，这样可以将多个样式对象同时应用在这个标签元素上

三、this.$route对象

在vue中，我们所看到的URL并不是正真的URL，它的所有路由都是使用hash来实现的，只是改变hash，不会导致页面跳转，所以又称单页面应用。这就使得我们无法正常使用window.lication对象。因为此时window.lication对象中的hash是整个#后面的部分，除非使用正则，否则我们无法直接获得其中的search等部分
这时，我们应该使用this.$route。this.$route.query可以获得 URL 中 ?后面的部分。