首页 > 其他分享 >vue-混入、插件、elementui、页面跳转的两种方式、localStorge系列、vuex

vue-混入、插件、elementui、页面跳转的两种方式、localStorge系列、vuex

时间：2023-02-21 22:25:01浏览次数：33  
标签：index 插件 vue name Vue 跳转 组件 import

1. props其他

"""
安装依赖(在打开别的vue文件时，肯能不会有node_modules目录，需要在根路径下执行):
cnpm install
"""
做成纯净的vue项目
	-在router 的index.js 中删除about的路由
    -删除所有小组件和about页面组件
    -App.vue 只留
    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
props自定义属性作用:自定义属性，接收父组件的数据
用法一:
HomeView.vue:
<template>

  <div class="home">
    <h1>props其他使用</h1>
    <hr>
    <Hello :myname="name"></Hello>  <!--自定义属性，让后端能拿到数据-->
    <hr>
  </div>
</template>

<script>
import Hello from '@/components/Hello.vue'
export default {
  name:'HomeView',
  data(){
    return {
      name:'max'  // vue中data中数据要return出去
    }
  },
  components:{
    Hello
  }
}
</script>

Hello.Vue:
<template>

  <div class="hello">

    <button>后退</button>
    <div>{{myname}}</div>
    <button>前进</button>
  </div>

</template>

<script>
export default {
  name: "Hello",
  props:['myname']  // 拿到父组件数据
}
</script>

<style scoped>

</style>


用法二:也可以通过字典的形式指定子组件收到数据的数据类型:
HelloView.vue:
<template>

  <div class="hello">

    <button>后退</button>
    <div>{{myname}}</div>
    <button>前进</button>
  </div>

</template>

<script>
export default {
  name: "Hello",
  props:{myname:String}
}
</script>

用法三:如果不传会默认传default对应的值
props: {
    myname: {
      type: String, //类型
      required: true, //必要性
      default: '老王' //默认值
    }
  }
}

2.混入mixin

作用:把多个组件共用的配置兔子成一个混入对象，在组件中也能够使用其他组件的属性和方法
步骤:
	1.定义混入对象，新建mixin报，下新建index.js
	2.在index.js中写代码(组件中对用到的属性和方法)
mixin/index.js:(提供一些数据和方法，在其他组件中也能正常使用)
export const index1={
    data(){
        return {
            age:19
        }
    },
    methods:{
        handAlert(){
            alert('111')
        }
    },
    mounted() {
        console.log('页面正在执行')
    }
}

router/index.js:(可访问的组件需要要添加路由)
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
    {
    path:'/index',
    name:'index',
    component:index
  }
]

views.vue:(引入其他组件，使用其他组件中的属性和方法)
<template>

  <div class="home">
    <h1>混入的使用</h1>
    <button @click="handAlert">点击</button>
    {{age}}  // 该组件中没有age属性，但是可以使用index组件中的
  </div>

</template>

<script>
import {index1} from '@/mixin'

export default {
  name:'HomeView',
  data(){
    return {
      name:'彭于晏'
    }
  },
  mixins:[index1]
}

</script>

<style scoped>

</style>

3.插件(功能和混入相同)

功能：用于增强Vue,
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

使用步骤:
	1.新建plugin包
	2.在main.js中配置

应用一:固定代码放在插件中，统一调用
plugins/index.vue:(自定义指定在任意地方都可以使用)
export default {
    install(vue){
        console.log('插件执行了',vue)
    }
}

main.js:

import plugin from '@/plugins'
Vue.use(plugin)


应用二:在插件中定义全局变量,定义全局变量需要借助Vue.prototype:
plugins/index.vue:(使用axios之前需要在pycharm终端下载)
import Vue from "vue";
import axios from "axios";
export default {
    install(vue) {
        Vue.prototype.$hobby = 'soccer'
        Vue.prototype.$add = (a, b) => {
            return a + b
        }
        Vue.prototype.$ajax=axios
    }
}

views/index.vue:
<template>

  <div class="home">
    <h1>混入的使用</h1>
    <button @click="handAlert">点击</button>
    {{ age }}
    <h1>插件定义全局变量</h1>
    <button @click="handClick">点击发送ajax请求</button>
    <button @click="getHobby">点击拿兴趣爱好</button>
  </div>

</template>

<script>
import {index1} from '@/mixin'
import plugin from '@/plugins'
import Vue from "vue";
Vue.use(plugin)
export default {
  name: 'HomeView',
  data() {
    return {
      name: '彭于晏',
    }
  },
  methods: {
    handClick() {
      this.$ajax('sss').then(res => {
        console.log(res)
      })
    },
    getHobby(){
      console.log(this.$hobby)
    }
  },
  mixins: [index1]
}

</script>

<style scoped>

</style>

4.elementui使用(重点)

1.在vue上，css样式，用的最多的是elementui，但是还有其他的
	elementui:做网页端 样式用的多  vue2的 饿了吗团队开发的
	elementui-plus:第三方团队继续基于vue3写的
	vant:做app的样式
	iview:pc端用www.iviewui.com

2.elementui的使用:
	官网:https://element.eleme.cn/#/zh-CN/component/layout
	1 安装
    	cnpm i element-ui -S
    2 配置完整引入  在 main.js 中写入以下内容
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI)  // 以后在咱们组件中直接使用elementui提供的全局组件即可
	3 在组件中使用
    	-去官网看到好的，复制贴到你的项目中

5.vue Router

作用:第三方插件，用来实现SPA 的vue插件(路由控制)
1.创建vue项目时加入了，直接用即可.
2.配置路由跳转:只需要在routes数组中写对象即可
import index from '@/views/index.vue'
import VueRouter from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
    {
    path:'/index',
    name:'index',  // 别名，反向解析用
    component:index  // 之前一定要先写index组件
  }
]

6.页面跳转的两种方式

方式一:用js控制跳转
router/index.js:

import Vue from 'vue'
import HomeView from '../views/HomeView.vue'
import index from '@/views/index.vue'
import VueRouter from 'vue-router'
import login from "@/views/Login.vue";
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
    {
    path:'/index',
    name:'index',
    component:index
  },
  {
    path: '/login',
    name:'login',
    component: login
  }
]

views/Login.vue:
<template>
  <h1>登陆页面</h1>
</template>

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

<style scoped>

</style>

views/index.vue:
<template>

  <div class="home">
  <el-row>
  <el-button @click="handClick">默认按钮</el-button>
</el-row>


  </div>

</template>

<script>
export default {
  name:'index',
  data(){
    return {}
  },
  methods:{
    handClick(){
      this.$router.push('/login')
    }
  }
}

</script>

"""
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
"""

方式二:在页面中利用<router-link>路由跳转:
  <router-link to="/home">
    <el-button>跳转home按钮</el-button>
  </router-link>

7.路由跳转携带数据的两种方式

方式1:/course/?pk=1形式:
我们通过打印:
console.log('route',this.$route)
console.log('router',this.$router)
得到:
route是当前路径对象:{name: 'login', meta: {…}, path: '/login/', hash: '', query: {…}, …}，我们在地址栏中携带的信息就在route中的query中
router是路由对象:VueRouter {app: Vue, apps: Array(1), options: {…}, beforeHooks: Array(0), resolveHooks: Array(0), …}
所以想通过地址栏携带信息需要通过:
this.$route.query.pk(route前面要加$)


方式2:/course/2形式:
如果选用这种路由方式我们需要在router/index.js中加入一个路由:
router/index.js:
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name:'login',
    component: login
  },
    {
    path: '/login/:pk',
    name:'login',
    component: login
  }
]
通过打印console.log(this.$route)得知:信息在params中:
所以我们在取数据时需要从:this.$route.params.pk中取

8.localStorge系列

localStorge、sessionStorge、cookie都是在浏览器中存在数据的，它们有什么区别?
1.localStorage
	-永久存储，除非清空缓存，手动删除，代码删除
    -localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
    -localStorage.getItem('userinfo')
    -localStorage.clear()  // 清空全部
    -localStorage.removeItem('userinfo') 
2.sessionStorage
	-关闭浏览器，自动清理
    -sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
    -sessionStorage.getItem('userinfo')
    -sessionStorage.clear()  // 清空全部
    -sessionStorage.removeItem('userinfo') 
3.cookie  
	-有过期时间，到过期时间自动清理
    -借助于第三方 vue-cookies
    -cookies.set('userinfo', JSON.stringify(this.userInfo))
    -cookies.get('userinfo')
    -cookies.delete('userinfo')

9.vuex

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信


# 使用步骤
	1 安装，新建store/index.js

    2 在index.js 中写
        export default new Vuex.Store({
            state: {
                # 放数据
            },

            mutations: {
                # 放方法，正常是让actions中来调用
                # 组件也可以直接调用

            },
            actions: {
                # 放方法，正常组件调用
            }
        })
        
     3 在组件中
    	-显示state的变量
        html中：
          {{$store.state.变量名}}
        js中：
        	this.$store.state.变量面
        改state中的值
        	-推荐按正常步骤---》this.$store.dispatch('actions中的方法',参数)---》actions中的方法调用 context.commit('mutations',参数)---》在mutations中直接修改state的值
            -可以跨过任何一步
            	this.$store.commit()
                this.$store.state.变量名

标签：index,插件,vue,name,Vue,跳转,组件,import
From： https://www.cnblogs.com/ERROR404Notfound/p/17142689.html

相关文章

  • 混入mixin/插件/router路由/cookie的使用
    props用法父传子父组件给子组件传递数据自定义属性方式#父组件调用子组件注册，并使用<hello:name="name"></hello>#给子组件绑定自定义属性importhellofro......
  • 基于Vue项目+django写一个登录的页面
    基于Vue项目+django写一个登录的页面前端借用了一下vue项目模板的AboutView.vue页面组件<template><divclass="about"><h1>登录功能</h1><p>输入用户名......
  • props其他、混入mixin、插件、elementui使用(重点)、vuex、vue Router、localStorage
    目录1props其他2混入mixin3插件4elementui使用(重点)5vuex6vueRouter7localStorage系列1props其他#安装依赖 cnpminstall#做成纯净的vue项目 -在router......
  • Vue数据存储及vuex状态管理
    Vue数据存储及vuex状态管理我们想要往浏览器客户端存储数据，有三种方式：localStorage——存储到本地，浏览器重新开数据还存在sessionStorage——存储到浏览器应用，浏......
  • vue-cil02
    今日内容props其他#安装依赖 cnpminstall#做成纯净的vue项目 -在router的index.js中删除about的路由 -删除所有小组件和about页面组件 -App.vue上只保留......
  • 父传子 props其他使用方法,混入 mixin,插件,Vue操作cookie,vue Router 设置跳转路由,v
    目录父传子props其他使用方法混入mixin页面组件局部使用混入对象main全局使用插件使用方法1.新建包plugins2.页面组件Vue操作cookie的几种方式1.localStorage永久存储，除......
  • vue3 + ts
    安装#Vite需要Node.js版本>=12.0.0npminitvite@latest#根据相关问题进行回答#需要选择框架以及使用语言配置项目名#进入项目目录cdvite-project#......
  • Vue路由插件使用 -- vue-router
    Vue路由插件使用--vue-router路由插件可以在创建项目时就在手动配置时下载安装。如果没有创建时没有下载，那也可以用npm或cnpm安装。npminstallvue-router@4路由设......
  • Vue-cli混入、elementUI的使用、vue-router、Vuex
    目录混入、elementUI的使用、vue-router、Vuex一、Vue项目改成比较纯净的状态及props其他使用1.Vue项目改成纯净的项目2.props的其他使用二、混入(mixin)三、elementUI的使......
  • vue3 vite异步组件路由懒加载
    引言在Vue2中，异步组件和路由懒加载处理使用import就可以很轻松实现。但是在Vue3.x中异步组件的使用与Vue2.x完全不同了。本文就详细讲讲vue3中异步组件和路由懒......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99