Vue2知识总结（从vuex到路由到el）终章

已于 2024-01-30 21:42:32 修改
阅读量438 收藏 5
点赞数 11
文章标签： vue.js 前端
于 2023-11-30 23:07:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60567426/article/details/134724031
版权

console.log(Vue.prototype)可以输出Vue原型属性

1：vuex：创建store。store包含commit、dispatch等函数，dispatch直接对话actions，commit直接对话mutations。

index.js

//引入vuex
import Vuex from'vuex'
import Vue from 'vue'
Vue.use(Vuex)

//响应组件中的动作
const actions={
    jia(context,value){
        context.commit('jia',value)
    },
    jian(context,value){
        context.commit('jian',value)
    },
    jiaOdd(context,value){
        if(context.state.sum%2){
            context.commit('jia',value)
        }
    }
}
//用于操作数据state
const mutations={
    jia(state,value){
        state.sum+=value
    },
    jian(state,value){
        state.sum-=value
    }
}
//用于操作存储数据
const state={
    sum:0
}



//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//引入store
import store from './store'


new Vue({
  render: h => h(App),
  store
}).$mount('#app')

2：vuex求和案例

Count.vue

    <template>
    <div>
        <h1>当前求和为:{{$store.state.sum}}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
    </template>

    <script>
    export default {
        name:"Count",
        data() {
            return{
                n:1
            }
        },
        methods:{
            increment(){
                this.$store.dispatch('jia',this.n)
            },
            decrement(){
                this.$store.dispatch('jian',this.n)
            },
            incrementOdd(){
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
                setTimeout(()=>{
                },500)
            }
        },
        beforeCreate(){
            console.log('Count',this)
        }

    }
    </script>

    <style lang="css">
        button{
            margin-left: 5px;
        }
    </style>

3：多组件共享数据

Count.vue

    <template>
    <div>
        <h1>当前求和为:{{$store.state.sum}}</h1>
        <h3>下方组件的总人数为：{{PersonList.length}}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
    </template>

    <script>
    export default {
        name:"Count",
        data() {
            return{
                n:1
            }
        },
        computed:{
            PersonList(){
                return this.$store.state.PersonList
            }
        }
        ,
        methods:{
            increment(){
                this.$store.dispatch('jia',this.n)
            },
            decrement(){
                this.$store.dispatch('jian',this.n)
            },
            incrementOdd(){
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
                setTimeout(()=>{
                },500)
            }
        },
        beforeCreate(){
            console.log('Count',this)
        }

    }
    </script>

    <style lang="css">
        button{
            margin-left: 5px;
        }
    </style>

Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'

export default {
    name:"Person",
    data(){
        return{
            name:''
        }
    }
    ,
    computed:{
        personList(){
            return this.$store.state.PersonList
        }
    },
    methods:{
        add(){
            const personObj={id:nanoid(),name:this.name}
            this.$store.commit('Add_person',personObj)
            this.name=''
        }
    }
}
</script>

<style>

</style>

index.js

//引入vuex
import Vuex from'vuex'
import Vue from 'vue'
Vue.use(Vuex)

//响应组件中的动作
const actions={
    jia(context,value){
        context.commit('jia',value)
    },
    jian(context,value){
        context.commit('jian',value)
    },
    jiaOdd(context,value){
        if(context.state.sum%2){
            context.commit('jia',value)
        }
    }
}
//用于操作数据state
const mutations={
    jia(state,value){
        state.sum+=value
    },
    jian(state,value){
        state.sum-=value
    },
    Add_person(state,value){
     state.PersonList.unshift(value)   
    }
}
//用于操作存储数据
const state={
    sum:0,
    PersonList:[
        {id:'001',name:'张三'}
    ]
}



//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

4：路由

index.js

import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'

//创建一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

About.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
    name:"About"

}
</script>

<style>

</style>

Home.vue

<template>
    <h2>我是Home的内容</h2>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false

Vue.use(VueRouter)


new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue(router-view展示组件在哪)

<template>
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
      <div class="list-group">
        <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
        <hr>
        <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel">
        <div class="panel-body"></div>
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

5：嵌套路由

Home.vue

<template>
   <div>
    <h2>Home组件内容</h2>
    <div>
        <ul>
            <li>
                <router-link to="/home/news">News</router-link>
            </li>
            <li>
                <router-link to="/home/message">Message</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
   </div>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style>

</style>

Message.vue

<template>
  <div>
    <ul>
        <li v-for="m in messageList" :key="m.id">
            <router-link :to="{
                path:'/home/message/detail',
                query:{
                    id:m.id,
                    title:m.title
                }
            }">
            {{m.title}}
            </router-link>
        </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:"Message",
    data(){
        return {
            messageList:[
                {id:"001",title:"消息001"},
                {id:"002",title:"消息002"},
                {id:"003",title:"消息003"},
            ]
        }
    }
}
</script>

<style>

</style>

News.vue

<template>
  <div>
            <li>news001</li>
            <li>news002</li>
            <li>news003</li>
  </div>
</template>

<script>
export default {
  name:"News"
}
</script>

<style>

</style>

index.js

import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[{
                path:'news',
                component:News
            },{
                path:'message',
                component:Message,
                children:[{
                    path:'detail',
                    component:Detail
                }]
            }]
        }
    ]
})

App.vue

<template>
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
      <div class="list-group">
        <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
        <hr>
        <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel">
        <div class="panel-body"></div>
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

 Detail.vue

<template>
  <div>
    <ul>
        <li>消息编号：{{$route.query.id}}</li>
        <li>消息标题：{{$route.query.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"Detail",

}
</script>

<style>

</style>

6：命名路由+路由props

index.js

import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建一个路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[{
                path:'news',
                component:News
            },{
                path:'message',
                component:Message,
                children:[{
                    name:'xiangqing',
                    path:'detail',
                    component:Detail,
                    //props的第一种对象，值为对象，该对象的所有值都会以props形式传给Detail组件
                    //props:{a:1,b:'hello'}
                    //props的第二种写法，值为布尔值，将所有参数传给Detail
                    //props:true
                    //props第三种写法，值为函数
                    props($route){
                        console.log($route)
                        return {id:$route.query.id,title:$route.query.title}
                    }
                }]
            }]
        }
    ]
})

Detail.vue

<template>
  <div>
    <ul>
        <li>消息编号：{{$route.query.id}}</li>
        <li>消息标题：{{$route.query.title}}</li>
        <li>{{id}}</li>
        <li>{{title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"Detail",
    props:['id','title']
}
</script>

<style>

</style>

7：

软件开发技术局
关注
  • 11
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-Router2.X多种路由实现方式总结
01-21
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router 一、使用路由 在main.js中，需要明确安装路由功能： import ...
vue 挂载路由到头部导航的方法
08-28
本篇文章主要介绍了vue 挂载路由到头部导航的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex状态管理的使用
大圣归来圣骑士清欢的博客
03-22 202
Vuex状态管理的使用
学习搭建Vuex环境总结
heliang399的博客
01-19 468
Vuex是一个在Vue中实现集中式状态（数据）管理的插件，用于对vue中应用多个组件的共享状态进行集中式的管理（读/写），同时它也是任意组件之间的一种通信方式。可以简单理解成我们把需要共享的数据放到Vuex中，组件就可以通过方法拿到这些数据做后续的处理。下面说一下搭建Vuex环境的步骤。
Vuex笔记
weixin_46160720的博客
03-26 314
vuex 是实现数据集中式状态管理的插件。数据由 vex 统一管理。其它组件都去使用 vuex 中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。多个组件之间依赖于同一状态。来自不同组件的行为需要变更同一状态。
Vue2（Vuex）--day13
javaxueba的博客
11-06 32
概念：Vuex 是专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对应 Vue 应用中的多个组件的共享状态的进行集中式的管理（读 / 写），也是一种组件间通信的方式，且适于任意组件间通信。使用 Vuex 的时机多组件依赖于同一状态来自不同组件的行为需要变更为同一状态现在我们来引入一个背景，说明为什么要引入 Vuex。场景：A B C D四个组件，大家都想用A组件的x属性对其进行读/写1- 全局事件总线实现（其实兄弟组件用最香），（红线是读/绿线是写），如图。
Vue基础知识总结 11：前端路由vue-router
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
vue中使用vuex(超详细)
热门推荐
一只前端小菜鸟
07-15 17万+
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。 那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步） 一、适合初学者使用，保存数据以及...
vue2中如何使用vuex（步骤）
qq_43405603的博客
07-21 3795
vue2中如何使用vuex
vue2和vue3中vuex的区别和使用方法详解？
前端-尔嵘
03-14 2013
Vue.js 是一款流行的前端框架，它提供了 Vuex 管理应用的全局状态。在 Vue 2 和 Vue 3 中，Vuex 的使用方法有些区别。在 Vue 2中，组件中需要使用 $store 方法来获取 Vuex 的状态和方法了。
从Vue 2到Vue 3：深入了解路由配置的变化与升级建议
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
07-28 8901
欢迎阅读本篇文章，我们将带您深入探索Vue 2和Vue 3的路由配置。在现代前端开发中，路由是构建交互式Web应用程序不可或缺的一部分。Vue.js作为一种流行的JavaScript框架，在版本2和版本3之间进行了重大改进和升级。在这篇文章中，我们将比较Vue 2和Vue 3的路由配置，并介绍它们之间的主要区别和新特性。我们将探讨Vue Router的使用方法，包括路由的定义、嵌套路由的设置、路由守卫的应用等。我们还将深入研究Vue 3中的新特性，例如如何影响路由配置的方式。
Vue基础知识总结 1：Vue入门
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue实现将数据存入vuex中以及从vuex中取出数据
10-16
今天小编就为大家分享一篇vue实现将数据存入vuex中以及从vuex中取出数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 303
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 501
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 191
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
Vue3-滑动到最右验证功能
最新发布
地理信息的专栏
06-13 165
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
vue2路由和vue3vuex区别
09-16
在Vue2中，路由和状态管理是通过vue-router和vuex进行管理的。而在Vue3中，路由和状态管理都有了一些新的改进。 1. 路由： - 在Vue2中，使用vue-router来管理路由。它提供了很多功能，如路由配置、导航守卫等。 -...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值