Vue(一)：基础语法（下）_vue的用法default-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_38730364/article/details/108657072

这篇博客详细介绍了Vue的基础语法，包括自定义组件、DOM操作、过渡效果、使用`router-link`进行路由导航、状态管理Vuex的实现、slot插槽的应用、vue-resource的请求方法以及移动组件库Mint UI的安装和使用。对于Vue初学者，这是一份实用的指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.自定义组件

1.组件写到components文件夹下
2.自定义一个倒计时组件
3.组件基本要素：props $emit等
4.通过import导入自定义组件


实例步骤：
子级组件：在components文件夹下创建contdown.vue。

在这里插入图片描述

父级：页面导入组件import countdown from '@/components/countdown.vue'
父级：注册组建 components:{countdown}
父级：页面当中通过标签引入<countdown></countdown>

在这里插入图片描述
具体代码：
countdown.vue

<template>
    <p>{{time}}</p>
</template>

<script>
export default {
    data(){
        return{
            time:10
        }
    },
    mounted(){
        var vm=this;
        var t=setInterval(function(){
            vm.time--;
            if(vm.time==0){
                clearInterval(t);
                vm.$emit("end");
            }
        },1000)
    }
}
</script>

index.vue:

<template>
    <div>
        <div>自定义组件</div>
        <div>------------------------------------------------------</div>

        <countdown></countdown>
        <!-- 与下面对应的，或者写成 <count-down></count-down>-->
    </div>
</template>

<script>
    import countdown from '@/components/countdown.vue'
    export default {
        data(){
            return{

            }
        },
        components:{
            countdown   //或者写成'count-down':countdown
        }
    }
</script>

灵活使用组件，在不用的地方呈现不同的效果：
父级demo10在组件标签里传一个色值col:"blue"，
然后自定义一个事件并触发事件@end="ending"，
在子级自定义组件中通过emit触发事件vm.$emit("end")，
父级demo里@end="ending"是自定义了一个end事件，
倒计时结束就会触发end事件，调用父级demo的methos里的ending，弹出弹框。

父demo里 color:"blue" @end="ending" 触发子组件count里vm.$emit("end")事件，调用父demo里ending（）{alert （"已经结束"）}

countdown.vue

<template>
    <p :style="{color:col}">{{time}}</p>
</template>

<script>
export default {
    data(){
        return{
            time:10
        }
    },
    mounted(){
        var vm=this;
        var t=setInterval(function(){
            vm.time--;
            if(vm.time==0){
                vm.$emit("end");//触发end事件
                clearInterval(t);
            }
        },1000)
    },
    props:{//可以接收传过来的属性值
        col:{
            type:String,
            default:'#000'
        }

    }
}
</script>

index.vue:

<template>
    <div>
        <div>自定义组件</div>
        <div>------------------------------------------------------</div>

        <countdown col='red' @end="ending"></countdown>
        <!-- 与下面对应的，或者写成 <count-down></count-down>-->
    </div>
</template>

<script>
    import countdown from '@/components/countdown.vue'
    export default {
        data(){
            return{

            }
        },
        methods:{
            ending(){
                alert("已经结束了")
            }
        },
        components:{
            countdown   //或者写成'count-down':countdown
        }
    }
</script>

二.Vue中DOM操作

this.$refs    通过标签中对应的ref的值，获取生成的DOM元素。

<template>
    <div>
        <div>Vue中DOM操作</div>
        <div>------------------------------------------------------</div>

        <div ref="head"></div>
    </div>
</template>

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

            }
        },
        mounted(){
            //DOM已经生成，在这里面的代码，都属于真实的dom
            this.$refs.head.innerHTML = 'hi,123';
        },
        
    }
</script>

因为mounted时在dom已经生成之后执行的。
this.$refs操作dom，dom可能没有生成，那么就无法操作。而mounted是生成之后执行，所以可以避免dom没有生成就操作的问题。

三.过渡效果

过渡：transition
vue是通过样式方式写过渡，但是不止可以通过样式的方式写。

①v-enter-active：可以理解为组件显示的整个过程
②v-enter：是组件显示的起始状态
③v-enter-to：是组件最后展现的状态
④v-leave-active：是组件隐藏的整个过程
⑤v-leave：是组件隐藏的起始状态
⑥v-leave-to：是组件隐藏后的最终状态

<template>
    <div>
        <div>过渡效果</div>
        <div>------------------------------------------------------</div>

        <div id="demo">
            <button v-on:click="show = !show">
                Toggle
            </button>
            <transition name="fade"><!--必须有transition name，name内容可以自己写-->
                <p v-if="show">Helllo</p>
            </transition>
        </div>
    </div>
</template>

<script>
    
    export default {
        data(){
            return{
                show:true
            }
        },
    
        
    }
</script>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

整个过程：
leave：显示->隐藏  
	   leave---------------leave-active---------------leave-to
enter：隐藏 ->显示
	   enter---------------enter-active---------------enter-to

四.路由router-link

官网：https://router.vuejs.org/zh-cn/

路由vue-router
1.npm install引入vue-router包

2.实现页面跳转功能：
用法1：<router-link to="/demo9">自定义内容</router-link>
用法2：<router-link :to="{name:'demo9',params:{userId:123}}"></router-link>
获取参数：this.$route.patams.userId
用法3：<router-link :to="{name:'demo9',params:{userId:123},query:{plan:'private'}}"></router-link>
获取参数：this.$route.query.plan

这些方法都是在模板template中写的路由跳转。

下面的方法是在js中进行路由跳转：
用法4：this.$router.push({path:'/demot1})
用法5：this.$router.push({name:'demo1',params:{userId:123}})
用法6：this.$router.push({name:'demo1',params:{userId:123},query:{plan:'private}})

<template>
    <div>
        <div>vue-router</div>
        <div>------------------------------------------------------</div>

        <router-link to="/demo9">demo9</router-link>
        <!-- 地址：http://localhost:8081/#/demo9 -->
        <div>------------------------------------------------------</div>

        <router-link :to="{name:'demo9',params:{userId:123}}">params</router-link>
        <!-- 地址：http://localhost:8081/#/demo9/123 -->
        <div>------------------------------------------------------</div>
        <router-link :to="{name:'demo9',params:{userId:456},query:{plan:'private'}}">query</router-link>
        <!-- 地址：http://localhost:8081/#/demo9/456?plan=private -->
    
        <div>------------------------------------------------------</div>
        <button @click="toUrl"></button>
    </div>
</template>

<script>
    
    export default {
        data(){
            return{
            }
        },
        methods:{
            toUrl(){
                // this.$router.push({path:'/demo8'})
                //this.$router.push({name:'demo9',params:{userId:123}})
				this.$router.push({name:'demo1',params:{userId:123},query:{plan:'private'}})
            }
        }
    
        
    }
</script>

接收参数：

mounted(){
        alert(this.$route.params.userId);

        alert(this.$route.query.plan)
    }

router-link更准确的说用来切换组件的，一般vue的项目只有一个html文件，页面打开后，这个页面中加载过来的就是各种组件。
然后使用router-link设置各种链接，点击哪一个链接，相应的组件就加载到这个页面中。
所以看起来功能像切换了各种页面，但是实际只有一个html页面，只是页面中的内容进行切换而已。

而a是用来做页面的跳转的。例如如果从a.html调整到b.html，那么就用a设置。
具体的说就是从一个html页面调整到了另一个html页面。

五.状态管理vuex

官网：https://vuex.vuejs.org/zh/

状态管理vuex（非常重要！）:
①npm install 引入vuex包:cnpm install vuex --save
②全局状态管理，所有页面共享数据
③设置数据：this.$store.dispatch('inc',100000);
④获取数据：this.$store.state.num;

在这里插入图片描述
创建store文件，在main.js中引入store：

调用时引入vuex：
在这里插入图片描述

这是一种es6的解构赋值,实际上inc这里接收的是 context和一个obj,

context被称作上下文,是与 store 实例具有相同方法和属性的对象。

这里 {commit}的意思是 context.commitmit,

而 obj 则是需要传递参数 也就是在你commit调用increment的时候传入的参数,也就是后面的num,

<template>
    <div>
        <div>状态管理vue</div>
        <div>------------------------------------------------------</div>

        <div>{{msg}}</div>
        <button @click="change">change</button>
    </div>
</template>

<script>
    
    export default {
        data(){
            return{
                msg:'123'
            }
        },
        methods:{
            change(){
                //Vuex取数据
                // this.msg=this.$store.state.count;

                //修改公共数据
                this.$store.dispatch('inc', 1000000);
                this.msg=this.$store.state.num;
            }
        }
    
        
    }
</script>

六.slot插槽

常用于组件调用中。

定义的组件插槽slot.vue：

<template>
    <div>
        <h1>插槽测试</h1>
        <slot>

        </slot>
        <p>我是最底部</p>
        <slot name="bottom">
            
        </slot>
    </div>
</template>

因为slot是关键字，所以引入的时候改为slots
可以通过name来对应想要放进的插槽中

<template>
    <div>
        <div>Slot插槽</div>
        <div>------------------------------------------------------</div>
        <slots>
            <div>123</div>
            <p>234</p>
            <p>666</p>
            <p slot="bottom">888</p>
        </slots>
    </div>
</template>

<script>
    import slots from '@/components/slot.vue'
    export default {
        data(){
            return{
            }
        },
        components:{
            slots
        }
    }
</script>

在这里插入图片描述

七.vue-resource请求

官网：https://github.com/pagekit/vue-resource

vue-resource请求（类似于jQuery中的ajax请求）
①npm install 引入 vue-resource包：cnpm install vue-resource --save
②this.$http.get('/someUrl')
③this.$http.post('/someUrl',{foo:'bar'})

<template>
    <div>
        <div>vue-resource请求</div>
        <div>------------------------------------------------------</div>
        
        
    </div>
</template>

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

            }
        },
        mounted(){
            // get 请求
            this.$http.get('/someUrl').then(response => {
                console.log(response.body);
            },response =>{

            });

            // post 请求
            this.$http.post('/someUrl',{foo: 'bar'}).then(response => {
                console.log(response.body);
            },response =>{

            });

            //Get /someUrl?foo=bar
            this.$http.get('/someUrl',{params:{foo: 'bar'},headers:{
                'X-Custom':'...'}}).then(response => {
                console.log(response.body);
            },response =>{

            });
        }
        
    }
</script>