vuerefprops混入，，插件，，插槽使用，， vuex---，，vue-router，，，，路由嵌套子路由___相关api，路由守卫，，路由两种工作模式，，前端开源项目，，localStorage，sessionStorage和cookie的使用

前情回顾：

　　es6的导入导出语法

导出：　

　　export default {name,add}
　　-导入（随意命名）
　　i　　mport utils from '相对/绝对'
　　# 命名出，命名导入
　　-导出（可以导出多个）：
　　export const name='lqz'
-导入：
　　import {name} from '路径'

文件夹下的 index.js中导入时导这一层就可以

1.安装：

　　　　创建项目时需要执行命令　　npm install -g vue -router (-S是局部，-g的全局)

2.在src下创建 router/index.js 写代码

1 2	`import` `Vue` `from'vue'` `import` `VueRouter` `from` `'vue-router'd`

导入

import IndexView from "@/views/IndexView";
Vue.use(VueRouter)  ——使用插件
const routes=[
②注册路由   
   {    
     path:'/',
     name:'xxx',    
     component:IndexView
   },
]<br>③new 出VueRouter对象<br>const router =new VueRouter({<br>　　mode:'history'<br>　　base:process.env.BASE_URL,<br>　　routes<br>})<br>export default router<br><br>————在main.js中导入<br>import router from './router'<br>new Vue({<br>　　router  做注册  ——之后可以 this.$router<br>　　store,<br>　　render:h =>h(APP)<br>)}.%mount('#app')

我们的使用：

　创建组件，配置路由，在浏览器中访问地址就可以看到组件
　　App.vue 实际上咱们访问某个地址，其实是在切换组件
　　<template>

　　　　<div id='app'>
　　　　<router-view>
　　　　</router-view>
　　　　</div>

　　</template>

　　 -2 以后再：router/index.js的routes中注册路由即可
            {
                path: '/',
                name: 'home',
                component: IndexView
            },
      -3 在浏览器访问某个地址，就可以看到组件了【页面组件】
    
# 4 路由跳转
    this.$router.push('路径')
    
    
# 5 登录跳转案例
    -1 跨域问题解决---》按步骤操作即可
    -2 axios发送请求：安装  导入使用
        import axios from 'axios'
        axios.get().then()
        
    -3 组件跳转：this.$router.push()
    -4 后端登录接口：simple-jwt
    -5 返回电影数据：json文件中读出来---》路径问题
    -6 首页加完成，就向后端发送请求：created()
    
    
# 6 scoped问题

#7 elementui
    -1 安装
    -2 在main.js 中引入
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
    -3 复制，粘贴

今日内容：

ref：

# 放在普通标签上
# 放在组件上


# 在vue项目中使用
    1 写在 组件上
        <HelloWorld ref="my_hello_world"></HelloWorld>
    2 在父组件中使用：js
        handleClick() {
              console.log(this.$refs)
              this.$refs.my_hello_world.name  # 获取子组件中的name属性
              this.$refs.my_hello_world.showName()# 调用子组件中得方法
              this.name = this.$refs.my_hello_world.returnName()# 调用子组件中得方法取得返回值
            }

props

 # 1 使用方式一
props: ['msg'], #  基本用法，没有限制类型

#2  使用方式二 中级用法，有限制类型
props: {
     msg: {
       type: String, //类型
     }
   }, 
# 3 使用方式三：高级用法，有限制类型，限制是否必填，加默认值
  props: {
    msg: {
      type: String, //类型
      required: true, //必要性
      default: '老王' //默认值
    }
  },

混入

功能：可以把多个组件共用的配置提取成一个混入对象
    created,methods,data.....
    
    
# 举个栗子：记录用户查看每个页面所用时间（停留）
    全局每个页面都要写东西：
        beforeCreate：启动一个定时器，每隔1s向后端发送一次请求
        destroyd：中销毁定时器
    

#如何使用？
    1 新建 mixin/index.js
    2 写代码：能写的配置项：
        data，methods,watch....
    3 在组件中局部使用（如果有多个，在数组中继续追加即可）
        import common from "@/common";
        export default {
          name: 'HomeView',
             mixins: [common],
        }
    4 全局使用：main.js中
        # 使用全局混入
        import common from '@/common'
        Vue.mixin(common)
        # Vue.mixin(common1) // 使用多个混入
        
        
   5 以后再在组件中写 data，methods，新的不会影响，如果跟混入一样的会使用当前组件中得

插件

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

#2 咱们见过的第三方 vue的插件：
    vue-router
    vuex
    elementui
    

#3 补充：python 中和js中往类中放属性
class Person:
     pass
Person.name='lqz'
p=Person()
print(p.name)

# js中
new Vue()  # Vue类
Vue.prototype.$name='lqz' # 往类中加属性,跟python有些区别
# this.$router # this代指Vue实例
this.$name    # 从对象中取


# 4 自定义插件
    -1 plugins/index.js,写入代码
        export default {
            install(Vue) {
                console.log('######' + Vue)
                # 用插件干什么？
                # 1 设置全局变量--以后可以把axios做成全局，每个组件都直接使用this.$http
                Vue.prototype.$http = axios
                # 2 设置全局函数--->以后任意组件中  this.$add(2,3)
                Vue.prototype.$add = (a, b) => {
                    return a + b + 100
                }

                # 3 使用混入
                Vue.mixin({
                    data(){
                        return {
                            name:'lqz'
                        }
                    },
                    methods:{
                        showName(){
                            alert(this.name)
                        }
                    }
                })

               # 4 定义指令  v-for 内置指令，指令是可以自定义的   v-lqz
               # 5 定义全局组件---elementui做的--<el-button></el-button>
            }
        }
        
    -2 使用插件--main.js中
        import plugin from '@/plugins'
        Vue.use(plugin)
        
        
        
# 5 看一下第三方插件的使用
    -vue-router：
        -Vue.use(VueRouter)
        -以后在组件中this.$router 就拿到的是VueRouter 对象
        -以后在组件中 能拿到 this.$route  
        -全局组件：  <router-view/>
        
    -elementui：
        -Vue.use(Elementui)
        -全局组件： <el-button></el-button>
        -全局变量：this.$message()

插槽使用

 匿名插槽
-子组件中：
    <template>
      <div class="hello">
        <button @click="handleClick">组件--点我看控制台</button>
        <div>
           <slot></slot>
         </div>
    </template>
    
-父组件中：    
    <HelloWorld>
       <img src="../assets/img/1.png" alt="" width="200px" height="300px">
    </HelloWorld>
    # 或者写成
    <HelloWorld>
     <template>
       <img src="../assets/img/1.png" alt="" width="200px" height="300px">
     </template>
    </HelloWorld>

# 具名插槽
-子组件中：
    <template>
      <div class="hello">
        <button @click="handleClick">组件--点我看控制台</button>
        <div>
           <slot name='lqz'></slot>
         </div>
    </template>
    
-父组件中：    
    <HelloWorld>
       <img src="../assets/img/1.png" alt="" width="200px" height="300px" slot='lqz'>
    </HelloWorld>
    # 或者写成
    <HelloWorld>
     <template v-slot:lqz>
       <img src="../assets/img/1.png" alt="" width="200px" height="300px">
     </template>
    </HelloWorld>

vuex————————————

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

# 组件间通信
    - 自定义属性
    - 自定义事件
    - ref属性：this.$refs.名字 拿到组件对象
        父组件中：this.$refs.名字  拿到子组件对象
        子组件中：this.$parent     拿到父组件对象
    -vuex实现组件间通信---》不需要关注父子关系
    
# 使用： 创建项目已经安装了----》简单使用
    1 在store/index.js, 写代码---》详情见项目
       # 1 导入
        import Vue from 'vue'
        import Vuex from 'vuex'
        #  2 让vue使用插件
        Vue.use(Vuex)
        # 3 导出对象
        export default new Vuex.Store({
            state: {
                count: 0
            },
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
        })
    
    2 在main.js中引入---》以后 任意组件中都会有 this.$store 
        import store from './store'
        new Vue({
            store,
            render: h => h(App)
        }).$mount('#app')
    3 在index.js 的state中定义变量--上面定义过了
         state: {
                count: 0
                },
        
    4 在任意组件中：取值，修改值--->任意组件都可以操作，操作的是同一个变量
        js:this.$store.state.count
        html中：{{$store.state.count}}
    
            
            
            
# 麻烦使用  ---》官方推荐的
    #1 直接操作。不用了
    this.$store.state.count++
    # 2 通过actions
    this.$store.dispatch('addCountAction')
    # 3 通过mutations
    this.$store.commit('addCountMutations')

vue-router——————————

#1 官方提供的用来实现SPA 的vue 插件
    页面跳转效果
    
#2 使用步骤：如果创建项目，没有安装vue-router，需要这么配置
    -1 cnpm install -S vue-router
    -2 新建router/index.js
        import Vue from 'vue'
        import VueRouter from 'vue-router'
        import HomeView from '../views/HomeView.vue'
        Vue.use(VueRouter)
        const routes = [
            {
                path: '/',
                name: 'home',
                component: HomeView
            },
        ]
        const router = new VueRouter({
            mode: 'history',
            base: process.env.BASE_URL,
            routes
        })
        export default router
   -3 main.js中
    import router from './router'
    new Vue({
        router,
        render: h => h(App)
    }).$mount('#app')
   -4 以后再任意组件中，都有
    this.$router  # 路由对象，当时导出的
    this.$route   # 当前路由对象
   -5 在App.vue中
      <div id="app">
        <router-view/>
      </div>
   -6 以后只要配置路由和页面组件的对应关系，在浏览器中访问地址即可



# 3 路由跳转
    -通过js跳转
         this.$router.push('/about')
    -通过组件跳转
        <router-link to="/about">
          任意标签
        </router-link>

# 4 路由跳转高级--传对象
    -通过js跳转时，传对象
        # 1 使用方式1 
        this.$router.push({
            name:'about'
        })
        # 2 使用方式2 
        this.$router.push({
            path:'/about'
        })
        # 3 使用方式三，带在地址栏中数据
        this.$router.push({
               name:'about',
               query:{name:'lqz',age:19}
            })
       # 4 取出地址栏中数据：
            this.$route.query.名字
       # 5 使用方式四：在路径中解析出数据
        -router/index.js中：
           {
            path: '/about/:id',
            name: 'about',
            component: AboutView
         }
         -组件中跳转
            this.$router.push({
               name:'about',
               params:{id:999}
            })
            this.$router.push('/about/666')
         -在另一个组件中取：
            this.$route.params.名字
            
            
    -通过标签跳转传对象
        <router-link :to="to_url"><button>标签跳转-传对象</button></router-link>
        # 变量定义
        to_url:{name:'about',query:{},params:{}}

路由嵌套 - --子路由

路由守卫：

作用：对路由进行权限控制

# 全局路由前置守卫
# 等后，才能跳转，是否有权限
# 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    if (to.name == 'home' || localStorage.getItem('name')) {
        next()
    } else {
        alert('您没有权限')
    }
})

路由两种工作模式

路由器的两种工作模式
    1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
    2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
    
3 hash模式：
    地址中永远带着#号，不美观 。192.168.1.1#login    192.168.1.1#home  
    若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    兼容性较好。
4 history模式：
    地址干净，美观 。   192.168.1.1/login    192.168.1.1/home  
    兼容性和hash模式相比略差。
    应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

前端开源项目

# 1  后台管理
    -django-vue-admin：https://gitee.com/liqianglog/django-vue-admin/tree/main/web
    -https://gitee.com/yudaocode/yudao-ui-admin-vue2
# 2 移动端： vue 在uniapp上写
    -https://gitee.com/xany/yoshop2.0-uniapp  商城类
    -https://gitee.com/yudaocode/yudao-mall-uniapp

localStorage，sessionStorage和cookie的使用

# 浏览器可以存数据
    存在cookie中：过期时间，过期了，就清理掉了
    localStorage：永久有效，即便浏览器重启也有效，只能手动或代码删除
    sessionStorage：当次有效，关闭浏览器，就没了
    
    
    
# vue-cookies的使用
cnpm install vue-cookies -S
cookie.set('xx', 'yy', '7d')
console.log(cookie.get('xx'))
cookie.remove('xx')

# 具体使用
  methods: {
    saveLocalStorage() {
      // localStorage.setItem('name', 'xxx')
      // sessionStorage.setItem('name', '彭于')
      cookie.set('xx', 'yy', '7d')

    },
    getLocalStorage() {
      // console.log(localStorage.getItem('name'))
      // console.log(sessionStorage.getItem('name'))
      console.log(cookie.get('xx'))

    },
    deleteLocalStorage() {
      // localStorage.clear()
      // localStorage.removeItem('name')
      // sessionStorage.clear()
      // sessionStorage.removeItem('name')

      cookie.remove('xx')

    },
  }

posted @ 2024-01-15 19:26 拆尼斯、帕丁顿阅读(13) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

· vue——oref属性（组件间通信），，动态组件__案例

· vue基础：props配置项、mixin（混入）、插件、elementui使用(重点)、localStorage和sessionStorage、vue Router、vuex

· Vue框架：8、props使用补充，混入mixin，插件，elementui的使用，Vuex，vue Router，localstorage系列用法

· vue项目

阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通

公告

昵称：拆尼斯、帕丁顿
园龄： 1年6个月
粉丝： 2
关注： 15

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案

阅读排行榜

评论排行榜

1. Python——函数认识补充(1)

vuerefprops混入，，插件，，插槽使用，， vuex---，，vue-router，，，，路由嵌套子路由___相关api，路由守卫，，路由两种工作模式，，前端开源项目，，localStorage，sessionStorage和cookie的使用

前情回顾：

es6的导入导出语法

文件夹下的 index.js中导入时导这一层就可以

导入

我们的使用：

今日内容：

ref：

props

混入

插件

插槽使用

vuex————————————

vue-router——————————

路由嵌套 - --子路由

相关api

路由守卫：

路由两种工作模式

前端开源项目

localStorage，sessionStorage和cookie的使用

公告

搜索

常用链接

随笔档案

阅读排行榜

评论排行榜

最新评论

vue__ref__props__混入 ，，插件，，插槽使用，， vuex---，，vue-router，，，，路由嵌套__子路由___相关api，路由守卫，，路由两种工作模式，，前端开源项目，，localStorage，sessionStorage和cookie的使用

前情回顾：

es6的导入导出语法

文件夹下的 index.js中 导入时 导这一层就可以

导入

我们的使用：

今日内容：

ref：

props

混入

插件

插槽使用

vuex————————————

vue-router——————————

路由嵌套 - --子路由

相关api

路由守卫：

路由两种工作模式

前端开源项目

localStorage，sessionStorage和cookie的使用

公告

搜索

常用链接

随笔档案

阅读排行榜

评论排行榜

最新评论

vuerefprops混入，，插件，，插槽使用，， vuex---，，vue-router，，，，路由嵌套子路由___相关api，路由守卫，，路由两种工作模式，，前端开源项目，，localStorage，sessionStorage和cookie的使用

　　es6的导入导出语法

文件夹下的 index.js中导入时导这一层就可以