vue知识-07

ref

# 放在组件上：

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

// 写在组件上


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做的--
            }}

# 使用插件：main.js中

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

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

插槽使用

# 背景：一般编写完1个组件之后组件的内容都是写死的，加数据需去组件中修改，扩展性差
# 作用：  1、一般在组件  中插入

或者其他是没有效果的

                2、组件中添加，就可以在的组件标签中添加内容

# 匿名插槽：

    
  
      // 父组件中
       
    

# 具名插槽:

    
  
      // 父组件中
       
    

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

# 路由跳转：

//通过js跳转
this.$router.push('/about')
//通过组件跳转

//任意标签

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

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.名字

# 通过标签跳转传对象:

标签跳转-传对象
// 变量定义:
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')
    },
  }

今日思维导图：