vue-02

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

网络通信Axios,还有jQuery

首先要保证浏览器是 ES6

vue-02

导入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>

上一篇:Go语言02-开发环境与VScode配置


下一篇:Shell编程