目录
Vue高级
1. ref 属性
实现父子组件通信
自定义属性和自定义事件可以实现父子传值，同时ref也可以实现。
1.ref写在普通标签上，通过this.$refs.myinput拿到的标签的dom对象
通过this.$refs可以拿到标签上写了ref属性的标签，对象属性key值是ref对应的value值，value值是原生的dom对象
<button @click="handleClick">点我显示数据</button>---》{{age}}
<input type="text" ref="myinput">
// 直接修改原生dom对象的value属性，input就能看到有值了
this.$refs.myinput.value='我该了值'
-
ref属性写在组件上，通过
this.$refs.mychild拿到的是子组件对象 -------常用方法可以操作子组件对象的属性和方法，
子传父`this.age=this.$refs.mychild.age` 父传子`this.$refs.mychild.age=this.age`重点：以后可以不用关注是父传子还是子传父，直接通过组件对象使用即可
2. props配置项-父传子自定义属性
props：让组件接收外部传过来的数据
自定义属性，在子组件中接收传入的数据，通常有三种方式。
方式一（只接收）：
props:['name']
方式二（限制类型--对象）：
props:{name:Number}
方式三(限制类型、限制必要性、指定默认值):
props:{
name:{
type:String, //类型
required:true, //必要性
default:'kiki' //默认值
}
}
代码操作--vue-cli
如果项目运行不起来，就先安装依赖
1.安装依赖
cnpm install
2. 要纯净的vue项目
在router的index.js中删除about的路由
删除所有小组件和about页面组件
App.vue 只留
<template>
<div id="app">
<router-view/>
</div>
</template>
3.mixin混入--了解
mixin:可以把多个组件共用的配置提取成一个混入对象
使用步骤
-
新建一个mixin包
-
在mixin里新建一个index.js文件---使用index这个名字的话就是在导入的时候只需要导入到文件夹就可以了
-
在 index.js中写 代码（data，methods.....配置项）
-
里面可以放一个公用的东西
// index.js export const mixin_bag ={ methods:{ showName(){ alert(this.name) // 没有this.name } }, mounted() { console.log('看到这里，说明页面正在执行') } }
全局混入---所有组件都可以使用---main.js中
import Vue from 'vue'
import App from './App.vue'
//导入
import {mixin_bag} from '@/mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false
//注册组件
Vue.mixin(mixin_bag)
//创建vm
new Vue({
el:'#app',
render: h => h(App)
})
局部混入---只在当前组件中使用
<script>
import {mixin_bag} from '@/mixin'
export default {
data() { },
mixins:[mixin_bag] //列表可以写多个
};
</script>
4.插件--了解
- 功能：增强Vue
- 本质：包含install方法的一个对象，installd的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
定义插件
-
新建包
plugins，新建index.jsimport Vue from "vue"; import axios from "axios" export default { install(a){ console.log('执行了插件',a) //1. 定义指令 //定义全局指令：跟v-bind一样，获取焦点,使用的时候用V-fbind Vue.directive("fbind",{ //指令与元素成功绑定时（一上来） bind(element,binding){ element.value=binding.value }, //指令所在元素被插入页面时 inserted(element,binding){ element.focus(); }, //指令所在的模板被重新解析时 update(element,binding){ element.value=binding.value; } }) //2. 定义全局变量，以后在任何组件都可以使用的到，借助于Vue.prototype往里放 ,以后所有组件只要this.$ajax 就是axios对象 //3. 使用全局混入--所有vc和vm上都有name和lqz Vue.mixin({ data(){ return{ name ='kiki', age:18 } } }) // 原型上放方法，所有vc和vm都可以用hello Vue.prototype.hello =()=>{ alert('欢迎来学插件') } } } -
在
main.js中配置----使用插件Vue.config.productionTip = false Vue.use(plugin) // 本质使用use,会自动触发插件对象中得installApp.vue
<template> <div> {{name}} <input type="text" v-fbind:value="v"> <br> <button @click="hello">点我</button> </div> </template> <script> export default { name: "App", data() { return { v:'xxx' }; }, }; </script>
5. scoped样式
-
作用--让样式在局部生效，防止冲突
-
写法
<style scoped> </style>
6. 插槽
作用
让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式
一般情况下，编写完1个组件之后，组件的内容都是写死的，需要添加数据只能去组件中修改，扩展性很差。由此引入了插槽，只需要在组件中添加<slot></slot>,就可以在body的组件中标签中添加内容
1.匿名插槽
2.具名插槽
根据slot的名字指定添加的数据位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div class="app">
<home>
<div slot="a">
<img src="https://img2.baidu.com/it/u=2289365917,2384630369&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500" alt="" width="200px" height="150px">
</div>
<div slot="b">
我是div中属性slot为b
</div>
</home>
</div>
</body>
<script>
var home = {
template:`
<div>
<h1>home页面</h1>
<slot name="a"></slot>
<h1>结束了</h1>
<slot name="b"></slot>
</div>
`
}
var vm = new Vue({
el:'.app',
data:{ },
methods:{ },
components:{
home,
}
})
</script>
</html>
7.Router
8. localStorage、sessionStorage和cookie系列
window浏览器对象有些东西可以在浏览器中存储对象，主要是localStorage、sessionStorage和cookie这三种方式。
浏览器存数据的作用
- 登录成功 token存在本地
- 不登录加入购物车功能，迪卡侬存在了localStorage中
- 组件间通信----》 跨组件
localStorage--永久存储
永久存储，除非清空缓存/手动删除/代码删除
<template>
<div class="home">
<h1>localStorage操作</h1>
<button @click="savaStorage">点我向localStorage放数据</button>
<button @click="getStorage">点我获取localStorage放数据</button>
<button @click="removeStorage">点我删除localStorage放数据</button>
</div>
</template>
<script>
// @ is an alias to /src
import cookies from 'vue-cookies'
export default {
name:'Child',
data(){
return {}
},
methods:{
savaStorage(){
var userInfo={
name:'成和花',
age:3
}
localStorage.setItem('userInfo',JSON.stringify(userInfo))
},
getStorage(){
let user=localStorage.getItem('userInfo')
console.log(user) //
console.log(typeof user)
},
removeStorage(){
// localStorage.clear() 清楚所有
localStorage.removeItem('userInfo')
}
},
}
</script>
动图-----
sessionStorage和cookie同上理
sessionStorage---临时存储
关闭页面存储数据就没了
# 关闭浏览器，自动清理
sessionStorage.setItem('userInfo',JSON.stringify(userInfo))
let user=sessionStorage.getItem('userInfo') # 字符串
// localStorage.clear() 清楚所有
sessionStorage.removeItem('userInfo')
cookie---可定时过期
在vue中如果想要操作cookie，除了使用之前我们自己封装好的操作cookie的方法之外，我们还可以使用vue-cookies插件，这是一个简单的Vue.js插件，专门用于在vue中处理浏览器的cookie操作，vue-cookies没有依赖关系，它可以独立存在，对vuejs友好。
# 提前下载插件
cnpm install vue-cookies
# 导入
import VueCookies from 'vue-cookies'
# api 设置全局配置l
this.$cookies.config(expireTimes[,path]) // default: expireTimes = 1d , path=/
# 设置cookie过期时间
// 30天后过期
this.$cookies.config('30d')
this.$cookies.config(new Date(2019,03,13).toUTCString())
this.$cookies.config(60 * 60 * 24 * 30,'');
// window object
window.$cookies.config('30d')
# 有过期时间，到过期时间自动清理
cookies.set('userinfo', JSON.stringify(this.userInfo))
cookies.get('userinfo') # 是对象
cookies.delete('userinfo')