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.$httpVue.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 = falsenew 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')},}