vue-02

本文主要是介绍vue-02，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在评论区找到的干货，从头到尾一篇文章一篇文章，Vue快速入门！！！_cV展示的学习园-CSDN博客_vue快速入门

网络通信Axios，还有jQuery

首先要保证浏览器是 ES6

导入json数据（data.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/"
    }
  ]
}

引入 axios 的在线cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="vue" v-cloak>
    v-cloak额，自己去百度，我也不知道干嘛的，应该是设置加载时间显示啥的
    <div>地名：{{info.name}}</div>
    <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
    <div>链接：<a v-bind:href="info.url">{{info.url}}</a> </div>
    <div>links:{{info.links[0]}} </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--注意一下，这玩意网速慢的话，就会刷新挺长时间的，服了-->

<script type="text/javascript">
    let vm = new Vue({
        el:"#vue",
        //data：属性：vm
        data(){
            return{
                info:{
                    name:null,    //字段要和给定的数据字段一致
                    address:{
                        country:null,
                        city:null,
                        street:null
                    },
                    links:[
                        {
                            name:null,
                            url:null}
                            ],
                    url:null
                }
            }
        },
        mounted(){//钩子函数  链式编程 ES6新特性
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>

计算属性：将计算的结果储存在缓存中

<div id="app">
    {{message}}
    {{fun1()}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
    let vm =new Vue({         //新建Vue
        el:"#app",            //绑定一个？？
        data:{                //数据
            message : "hello vue"
        },
        methods :{
            fun1: function (){
                return Date.now();
            }
        },
        computed:{
            fun2: function (){             //通过控制台可以观察到，该值不会发生变化，和mybatis中的增删改查一样，当数据更新时才会改变
                this.message;
                return Date.now();
            }
        }
    });
</script>

插槽slot，美丽动人啊

假设要实现这个东西,而且格式固定，就需要三个模板，分别是整个的模板，标题的模板和li标签的模板，主模板通过slot留出空槽，其他两个子模版通过名字绑定到主模板上，需要参数就传递参数

<div>
    <div>标题</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
        <!--如下为简写-->
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item" ></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                    <slot name="todo-items"></slot>\
                    </ul>\
                   </div>'
    });
    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item"],
        template:"<li>{{item}}</li>"
    });
    var vm = new Vue({
        el:"#vue",
        data:{
            title:"cvzhanshi study java",
            todoItems:['test1','test2','test3']
        }
    });
</script>

自定义事件，假设我想在前端就实现删除数组里的值，就需要自定义事件

this.$emit("事件名"，参数)，通过比较上下两个代码来看看究竟做了哪些操作

在Vue中定义函数进行删除操作，在组件调用的地方通过绑定，将组件内部的函数绑定到Vue中的函数上（还要传递参数），在组件中定义函数使用自定义事件

<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
        <!--如下为简写-->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                    <slot name="todo-items"></slot>\
                    </ul>\
                   </div>'
    });
    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item"],
        template:"<li>{{item}}<button @click='remove'>删除</button></li>",
        methods: {
            remove: function (index) {
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el:"#vue",
        data:{
            title:"小陈的",
            todoItems:['test1','test2','test3']
        },
        methods:{
            removeItems:function(index){
                this.todoItems.splice(index,1);   //删除当前下标的元素
            }
        }
    });
</script>

这篇关于vue-02的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！