vue知识-07

ref

# 放在组件上:

        this.$refs.名字  ---组件对象.组件对象.属性
# 在vue项目中使用: 

// 写在组件上
<HelloWorld ref="my_hello_world"></HelloWorld>

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()# 调用子组件中得方法取得返回值
            }

# 2 this.$parent     --拿到父组件对象

限制类型props

 # 数组形式:  props:['自定义属性的名字','自定义属性的名字1']
                         props: ['msg']    没有限制类型

# 对象形式,限制类型:

 props:{自定义属性名字:{
            type:String
        }}

# 对象形式,限制类型,默认值,必填:

  props: {
    msg: {
      type: String, //类型
      required: true, //必要性
      default: '老王' //默认值
    }
  }, 

混入mixin

# 定义:可以把多个组件共用的配置提取成一个混入对象

# 作用:以后再可以在组件中写 data,methods,新的不会影响,如果跟混入一样的会使用
# 列如:记录用户查看每个页面所用时间(停留)
    全局每个页面都要写东西:
        beforeCreate:启动一个定时器,每隔1s向后端发送一次请求
        destroyd:中销毁定时器

# 补充:定时器和延时器:
setTimeout( ()=>{
    console.log('延时器,3s后执行')
},3000)
    
setInterval(()=>{
    console.log('每隔3s执行')
},3000)

# 多个组件公用的,抽取出来

        新建  mixin/index.js : data,methods,watch....

export default {
    data() {
        return {
            name: '彭于晏'
        }},
    methods: {
        handleShowName() {
            alert(this.name)
        }},}

#  两种方式使用:
        局部使用:配置项:mixins:[写多个]
        全局使用:Vue.mixin(混入对象)        

 import mixin from "@/mixin";
        // 局部使用
        export default {
          name: 'HomeView',
             mixins: [mixin],
        }
// 使用全局混入  main.js
import mixin from '@/mixin'
Vue.mixin(mixin)

插件plugins

# 作用:插件是用于增强Vue的
# 本质:install 的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据

#第三方 vue的插件:
    vue-router
    vuex (store)
    elementui
# 补充:

# 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    # 从对象中取

# 自定义插件:
 plugins/index.js里写入代码

// cnpm install -g axios
import axios from 'axios'        
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>
            }}

# 使用插件main.js

// 导入插件,使用
import plugin from '@/plugins' 
Vue.use(plugin)

# 第三方插件的使用:
  * vue-router:
        Vue.use(VueRouter)
                以后在组件中this.$router 就拿到的是VueRouter 对象
                以后在组件中 能拿到 this.$route  
                全局组件:  <router-view/>        
   * elementui:
        Vue.use(Elementui)
                全局组件: <el-button></el-button>
                全局变量:this.$message()

插槽使用

# 背景:一般编写完1个组件之后组件的内容都是写死的,加数据需去组件中修改,扩展性差
# 作用:  1、一般在组件<Child>  </Child>中插入<div>或者其他是没有效果的

                2、组件中添加<slot></slot>,就可以在的组件标签中添加内容

# 匿名插槽:

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

# 具名插槽:

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

vuex插件

# 背景:在Vue中实现集中式状态管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理,也是一种组件间通信的方式,且适用于任意组件间通信

# 组件间通信:
            自定义属性、自定义事件
   ref属性:this.$refs.名字 拿到组件对象
        父组件中:this.$refs.名字  拿到子组件对象
        子组件中:this.$parent     拿到父组件对象
   vuex实现组件间通信---不需要关注父子关系
    
# 简单使用:
 store/index.js--写代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // index.js 的state中定义变量
  state: {
     count: 0
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

main.js中引入---任意组件中都会有 this.$store 

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

Vue.config.productionTip = false

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

在任意组件中:取值,修改值

                任意组件都可以操作,操作的是同一个变量

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路由

# 简介:官方提供的用来实现SPA 的vue 插件,有着页面跳转效果
# 配置:创建项目时没有安装vue-router

cnpm install -S vue-route

新建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

main.js中:

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

# 以后再任意组件中,都有
            this.$router  # 路由对象,当时导出的
            this.$route   # 当前路由对象

        以后只要配置路由和页面组件的对应关系,在浏览器中访问地址即可
# 在App.vue中:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

# 路由跳转

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

# 路由跳转高级--传对象:

<template>
  <div class="home">
    <h1>vue-router</h1>
    <button @click="handleChange">点我跳转到关于页面--js跳转</button>
    <button @click="handleChange2">点我跳转到关于页面--js跳转-传对象</button>
    <button @click="handleChange3">点我跳转到关于页面--js跳转-传对象-携带数据-带在地址栏中</button>
    <button @click="handleChange4">点我跳转到关于页面--js跳转-传对象-携带数据-带在路径中</button>
    <button @click="handleSave">点我向localStorage中写入名字</button>
  </div>
</template>
methods: {
    handleChange() {
      this.$router.push('/about')
    },
    handleChange2() {
      this.$router.push({
        name: 'about'
      })},
    handleChange3() {
      // 带在地址栏中数据
      this.$router.push('/about?name=xxx')
    },
    handleChange4() {
      // 带在路径中
      this.$router.push({
        name: 'about',
        params: {id: this.id} 
      })},
    handleSave() {
      localStorage.setItem('name', 'lqz')
    }}

# 使用方式四:在路径中解析出数据

// 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:{}}

路由嵌套

# 子路由

# 相关api:

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

# 路由两种工作模式:
hash模式:

        hash值:是指# 及其后面的内容就是hash值。

                       hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器
        缺点:地址中永远带着#号,不美观 。192.168.1.1#login    192.168.1.1#home  
                   若app校验严格,则地址会被标记为不合法。
        优点:兼容性较好。
history模式:
    地址干净,美观 。   192.168.1.1/login    192.168.1.1/home  
    兼容性和hash模式相比略差。
    应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题

# 路由守卫:

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

        全局路由前置守卫—初始化的时候被调用、每次路由切换之前被调用

router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    if (to.name == 'home' || localStorage.getItem('name')) {
        next()
    } else {
        alert('您没有权限')
    }
})

前端开源项目

# 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')

# localStorage和sessionStorage的使用:

  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')
    },
  }

今日思维导图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/326935.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CSS3十大滤镜效果详解

滤镜效果 类似于美颜相机、美图秀秀这样的美颜工具&#xff0c;能够让我们轻松地应用多种特效&#xff0c;例如转换为黑白照片、复古风格化、调整亮度等。在之前仅凭CSS几乎很难做到这些效果。 但在CSS3的语法中&#xff0c;所有的这些视觉特效都是通过“filter”属性来快速实…

基于Java+SSM的技术的社区人口管理系统详细设计和实现【附源码】

基于JavaSSM的技术的社区人口管理系统详细设计和实现 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 …

备份和容灾讲解

备份和容灾 &#xff08;1&#xff09;容灾&#xff08;容许灾难的发生&#xff09;是一种架构方案&#xff0c;包括了很多方案&#xff0c;如下 本地高可用 双活&#xff08;特指存储&#xff0c;可以理解为两端同时对外提供服务&#xff09;&#xff1a;通过一个双写模块把…

【代码随想录06】454. 四数相加 II 383. 赎金信 15. 三数之和 18. 四数之和

目录 454. 四数相加 II题目描述做题思路参考代码 383. 赎金信题目描述做题思路参考代码 15. 三数之和题目描述参考代码 18. 四数之和题目描述参考代码 454. 四数相加 II 题目描述 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你…

burp靶场——XXE注入

XML 外部实体 (XXE) 注入 1. 什么是xxe漏洞&#xff1a; https://portswigger.net/web-security/xxe#what-is-xml-external-entity-injection XML 外部实体注入&#xff08;也称为 XXE&#xff09;是一种 Web 安全漏洞&#xff0c;允许攻击者干扰应用程序对 XML 数据的处理。…

Go语言认识

Go语言认识 1. Go语言的设计背景2. Go语言的历程3. Go语言对比分析4. Go语言未来的发展规划5. 要不要选择Go 关注 go博客 直接了解第一手资料。 go文档 了解go的全貌。 1. Go语言的设计背景 Go语言&#xff08;也称为Golang&#xff09;是由Google开发的一种编程语言。它的设计…

59.说一下 spring 的事务隔离?

spring 的事务隔离有什么作用? 用来解决并发事务所产生一些问题,并发会产生什么问题? 1.脏读2.不可重复度3.幻影读事务隔离的概念 通过设置隔离级别可解决在并发过程中产生的那些问题分别举例说明 1.脏读 上述图表示:一个事务,读取了另一个事务中没有提交的数据,会在…

LabVIEW高效振动时效处理系统

概述&#xff1a;介绍了一个利用LabVIEW开发的振动时效处理系统&#xff0c;有效降低加工工件的内部残余应力&#xff0c;提升其质量和寿命。 项目背景 工业加工中的工件常存在残余应力问题&#xff0c;这直接影响工件的质量和寿命。虽然热时效和自然时效法被广泛应用于降低残余…

数据结构学习 jz45 把数组排成最小的数

关键词&#xff1a;贪心 排序 快速排序 题目&#xff1a;破解闯关密码 思路&#xff1a; 快排自己制定快排规则 开辟一个vector存string&#xff0c;自己制定排序规则&#xff0c;然后用快排比较string大小。 排序规则&#xff1a; sort(strs.begin(),strs.end(),[](string…

供应链管理是什么?专业就业前景如何?

什么是供应链管理 供应链&#xff08;Supply Chain&#xff09;&#xff0c;也被称为价值链或需求链&#xff08;Demand Chain&#xff09;&#xff0c;包括顾客、供应商、过程、产品以及对产品和服务有影响的各种资源。供应链强调的是公司之间的过程与关系。 《中华人民共和国…

置位复位寄存器的某一位(多工位多工站渗透线控制应用)

这里的置位复位特定寄存器位功能块可以应用在渗透线控制应用上,我们可以根据小车当前所在位置,对相关工作槽里的标志位进行置位复位等操作(某个槽有产品,某个槽没有产品等)。 下面我们看下对应的控制要求 1、置位复位特定的位 2、置位复位寄存器中的某一位 3、置位bit8 4…

vue中使用mpegts.js播放flv的直播视频流

第一步&#xff1a;引入mpegts.js npm install --save mpegts.js 第二步&#xff1a;在vue文件中引入mpegts.js的依赖 第三步&#xff1a;编写展示视频的盒子 我这里是使用循环遍历的方式创建video标签&#xff0c;这样方便后面随机展示视频使用 <template><div>&l…

k8s存储卷-动态PV

pv和PVC&#xff0c;存储卷&#xff1a; 存储卷&#xff1a; EmptyDir&#xff1a;容器内部&#xff0c;随着pod销毁&#xff0c;emptyDir也会消失&#xff0c;不能做数据持久化 HostPath&#xff1a;持久化存储数据&#xff0c;可以和节点上目录做挂载&#xff0c;pod被销毁…

屏蔽/非屏蔽线、屏蔽/非屏蔽端口介绍

一、双绞线 双绞线&#xff08;twisted pair&#xff0c;TP&#xff09;是一种综合布线工程中最常用的传输介质&#xff0c;是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起&#xff0c;每一根导线在传输中辐射出来的电波会被另一根线上发出的…

vivado 使用约束、添加和创建约束文件

使用约束 Vivado IDE支持Xilinx设计约束&#xff08;XDC&#xff09;和Synopsys设计约束&#xff08;SDC&#xff09;文件格式。SDC格式用于定时约束&#xff0c;而XDC格式用于两者时间和物理约束。约束可以包括位置、时间和I/O限制。您可以在设计流程的各个步骤中创建约束&am…

1 python计算机基础

计算机基础和环境搭建 1 计算机基础和环境搭建1.计算机基础1.1 基本概念1.2 编程语言1.3 编译器/解释器 2.学习编程的本质3.Python的介绍3.1 语言的分类3.2 Python3.3 Python的解释器种类&#xff08;了解&#xff09;3.4 CPython解释器的版本 4.环境搭建4.1 安装Python解释器4…

详解SpringCloud微服务技术栈:Nacos配置管理

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;详解SpringCloud微服务技术栈&#xff1a;Nacos服务搭建及服务分级存储模型 &#x1f4da;订阅专栏&#xff1a;微服务技术全家桶…

LaTeX系列1——主结构

初学&#xff0c;可交流&#xff0c;轻喷 \documentclass{book} \begin{document} \title{Book Title} \author{Author Name} \date{\today} \maketitle\chapter{Introduction} This is the introduction chapter of the book.\section{First Section} The first section of t…

学位论文中常用的参考文献格式

撰写学位论文中&#xff0c;要确保文献列表中列出的参考文献格式正确&#xff0c;为此这篇文章给出常用的参考文献格式。 目录 目录 一、学位论文中常用的文献类型&#xff1a; 1.1学位论文中常用的文献类型&#xff1a; 1.2作者名字的书写格式&#xff1a; 1.3特殊符号// …

JRTP实时音视频传输(1)-必做的环境搭建与demo测试

1.需求 1&#xff09;支持协议自动切换。在网络优的情况下使用TCP、网络差的情况下使用UDP&#xff0c;满足实时音视频传输需求&#xff0c; 2&#xff09;支持RTCP &#xff0c;流量控制&#xff0c;阻塞控制等。需要能支持RTCP&#xff0c;这样便能在这个基础上&#xff0c;…