axios、计算属性、插槽

vue 只负责前端界面的显示，没有数据的传输。
所以我们要通过axios来进行数据传输。
首先是导入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

主要是使用了两个方法data()方法来接受返回值，mounted()方法来进行axios数据传输。

div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.page}}</div>
    <a v-bind:href="info.url">点击我</a>
    <div>{{info.address.street}}+{{info.address.city}}+{{info.address.country}}</div>
    <div v-for="item in info.links">{{item.name}}:{{item.url}}<br></div>
</div>


<script type="text/javascript">
   var vm= new Vue({
       el: '#vue',
       data(){
           return{
               //请求返回的参数合适，必须和json字符串一样 当然也可不写
               info:{
                   name:null,
               }
           }
       },
        mounted(){
           //钩子函数链式编程
            axios.get("data.json").then(response=>(this.info=response.data))
        }

   });
</script>

json数据

{
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

计算属性 computed属性 计算属性主要特性就是为了将不经常变化的计算结果进行缓存，这样可以节约我们的计算成本。

<div id="app">
    <p>{{message}}</p>
    <p>{{methodsDate()}}</p>
    <p>{{computedDate}}</p>
</div>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            message:"你好"
        },
        methods:{
            methodsDate:function (){
                return Date.now();
            }
        },
        computed: {
          computedDate: function (){//计算属性： methods，computed 方法名不能重写，重名之后只会methods的方法
              this.message;
              return Date.now();
          }
        }

    })
</script>

同过事件戳的变化我们可以看的出methods方法是在不断的变化 的，而computed数值不变，他是在当前方法中数据发生变化时才跟随发生变化，有点想mybatis中的一级缓存，在没有发生增删改的情况下不会发生变化。

插槽

插槽我们是使用component组件来完成的，首先是我们创建一个component(组件名，方法体)。我们定义一个属性template模板，我们在模板中定义一些相对应的格式。<slot 标签是一个插槽，它可以定义多个。
我们一下面的例题来说
首先是我们创建了一个vue在他当中设置了属性。然后我们有创建了一个组件todo在他的template中设置了两个插槽slot,然后我们有创建了两个组件todo-title和todo-items，现在我们在div中设置好了他的结构

<div id="app">
    <todo>
        <todo-title></todo-title>
        <todo-items></todo-items>
    </todo>
</div>

如果是现在这样运行他就会同时夹在两个插槽，我们需要动态的获取内容所以要对他们进行赋值。
首先是我们需要在todo组件中的插槽添加好相对应的组件名，然后我们在使用的组件中添加slot属性通过名字找到相对应的插槽，最后因为我们需要动态的获取数据，我们就需要在我们的两个子组件中添加接受参数和相对应的template模板，在我们的使用中添加数据绑定。

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

<script>
    Vue.component('todo-title',{
        props:['title'],
        template:  '<div>{{title}}</div>'
    });

    Vue.component('todo-items',{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });


    Vue.component('todo',{
        template:  '<div>\
                        <slot name="todo-title" ></slot>\
                        <ul>\
                            <slot name="todo-items" ></slot>\
                        </ul>\
                  </div>'
    });

   var app = new Vue ({
       el:'#app',
       data:{
           title:'阿威',
           todoItems:['java','php','c']
       }
   });
</script>