ref属性:
1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在htm1标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
3.使用方式:
打标识:<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>获取:this.$refs.xxx
<template>
<div>
<h1 v-text=msg ref="title"></h1>
<button @click="showDOM" ref="btn">点我输出上分DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
//引入School组件
import School from './components/School.vue'
export default {
name:'App',
components:{School},
data() {
return {
msg:'欢迎学习Vue!'
}
},
methods: {
showDOM(){
console.log(this.$refs.title) // 真实DOM元素
console.log(this.$refs.btn) // 真实DOM元素
console.log(this.$refs.sch) // School组件的实例对象(vc)
}
},
}
配置项props
功能:让组件接收外部传过来的数据
(1).传递数据:
<Demo name="xxx"/>
(2).接收数据:
第一种方式(只接收): props:['name']
第二种方式(限制类型): props:{name:String}
第三种方式(限制类型、限制必要性、指定默认值):
props:{ name:
{type:string,//name的类型是字符串
required:true,//name是必要的
default:"老王"//默认值
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,
若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
<template>
<div>
<Student name="杨紫" :age="29" sex="女"/>
</div>
</template>
<script>
// 引入School组件
import Student from './components/Student.vue'
export default {
name: 'App',
components: { Student }
}
</script>
<template>
<div>
<h1>{{msg}}</h1>
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄: {{myAge+1}}</h2>
<h2>学生性别: {{sex}}</h2>
<button @click="updateAge">点击修改年龄</button>
</div>
</template>
<script>
export default {
name: 'Student',
data () {
return {
msg:'我是一个爱学习的人',
myAge:this.age
}
},
methods: {
updateAge(){
this. myAge++
}
},
props:['name','age','sex'] // 简单接收
// 接收的同时对数据进行类型限制
/* props:{
name:String,
age:Number,
sex:String
} */
// 接收的同时对数据: 进行类型限制+默认值的指定+必要性的限制
/* props:{
name:{
type:String, //name的类型是字符串
required:true //name是必要的
},
age:{
type:String,
default:99 // 默认值
},
sex:{
type:String,
required:true
}
} */
}
</script>
2.props适用于:
(1).父组件==> 子组件通信
(2).子组件==>父组件通信(要求父先给子一个函数)
3.使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!
4.props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。
mixin(混入)
功能:可以把多个组件共用的配置提取成一个混入对象使用方式:
第一步定义混合,
export var mixin = {
methods: {
showName(){
alert(this.name)
}
},
mounted() {
console.log('你好呀')
},
}
第二步使用混入,例如:
(1)全局混入:Vue.mixin(xxx)(2).局部混入:mixins:['xxx']
插件
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
定义插件:
export default {
install(Vue){
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定义全局指令
Vue.directive('fbind',{
// 指令与元素成功绑定时
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在的模板被重新解析时
updated(element,binding) {
element.value = binding.value
}
})
// 自定义混入
Vue.mixin({
data() {
return {
x:100,
y:200
}
},
})
//给Vue原型上添加一个方法(vm和vc就都能用了)
Vue.prototype.hello = ()=>{alert('你好呀')}
}
}
scoped样式
作用:让样式在局部生效,防止冲突
写法:<style scoped> </style>
webStorage
1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
2.浏览器端通过 Window.sessionStorage和WindowlocalStorage属性来实现本地存储机制。
3.相关API:
1. xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存诸中,如果键名存在,则更新其对应的值。
2. xxxxxStorage.getItem('person');
该方法接受一个键名作为参数,返回键名对应的值。
3. xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存诸中删除。
4. xxxxxStorage.clear()
该方法会清空存储中的所有数据。
4.备注:
1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2.LocalStorage存储的内容,需要手动清除才会消失,
3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getltem的返回值是null。
4.JSON.parse(null)的结果依然是null。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>localStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button οnclick="savaData()">点我保存一个数据</button>
<button οnclick="readData()">点我读取一个数据</button>
<button οnclick="deleteData()">点我删除一个数据</button>
<button οnclick="deleteAllData()">点我清空数据</button>
<script>
var p = {name:'yz',age:29}
function savaData(){
localStorage.setItem('msg','hello!!!')
localStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log(localStorage.getItem('msg'))
var result = localStorage.getItem('preson')
console.log(JSON.parse(result));
}
function deleteData(){
localStorage.removeItem('msg')
}
function deleteAllData(){
localStorage.clear()
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sessionStorage</title>
</head>
<body>
<h2>sessionStorage</h2>
<button οnclick="savaData()">点我保存一个数据</button>
<button οnclick="readData()">点我读取一个数据</button>
<button οnclick="deleteData()">点我删除一个数据</button>
<button οnclick="deleteAllData()">点我清空数据</button>
<script>
var p = {name:'yz',age:29}
function savaData(){
sessionStorage.setItem('msg','hello!!!')
sessionStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log(sessionStorage.getItem('msg'))
var result = sessionStorage.getItem('preson')
console.log(JSON.parse(result));
}
function deleteData(){
sessionStorage.removeItem('msg')
}
function deleteAllData(){
sessionStorage.clear()
}
</script>
</body>
</html>
组件的自定义事件
1.组件间通信的方式,适用于:子组件传父组件
2.使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。
3.绑定自定义事件:
1.第一种方式,在父组件中:<Demo@atguigu="test">或<Demo v-on:atguigu="test"/>
2.第二种方式,在父组件中:
<Demo ref="demo"/>.....
mounted(){
this.$refs.xxx.$on('atguigu' this.test)
}
3.若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。
4.触发自定义事件:this.$emit('atguigu',数据)
5.解绑自定义事件this.$off('atguigu')
6.组件上也可以绑定原生DOM事件,需要使用nativ修饰符
7.注意:通过this.$refs.xxx.$on(atguigu’,回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!
全局事件总线(GlobalEventBus)
1.一种组件间通信的方式,适用于任意组件间通信。
2.安装全局事件总线:
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 创建vm
new Vue({
el: '#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线
}
})
3.使用事件总线:
1.接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身,
<template>
<div class="School">
<h2>学校名称:{{name}}</h2>
<h2>学校地址: {{address}}</h2>
</div>
</template>
<script>
export default {
name: 'School',
data () {
return {
name:'尚硅谷',
address:'北京'
}
},
mounted() {
// console.log('School',this)
this.$bus.$on('hello',(data)=>{
console.log('我是School组件,收到了数据',data);
})
},
// 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
beforeDestroy() {
this.$bus.$off('hello')
}
}
</script>
<template>
<div class="Student">
<h2>学生姓名:{{name}}</h2>
<h2>学生性别: {{sex}}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
export default {
name: 'Student',
data () {
return {
name:'杨紫',
sex:'女',
}
},
mounted() {
//console.log('Student',this.x)
},
methods:{
sendStudentName(){
//提供数据
this.$bus.$emit('hello',this.name)
}
}
}
</script>
消息订阅与发布(pubsub)
1.一种组件间通信的方式,适用于任意组件间通信。
2.使用步骤:
1.安装pubsub:npm i pubsub-js
2.引入: import pubsub from 'pubsub-js'
3.接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息}
4.提供数据:pubsub.publish('xxx',数据)
5.最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去<span sty1e="coor:red">取消订阅。</span>
nextTick
1.语法:this.$nextTick(回调函数)
2.作用:在下一次DOM更新结束后执行其指定的回调。
3.什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
动画样式
3.写法:
准备好样式:
.元素进入的样式:
1.v-enter:进入的起点
2.v-enter-active进入过程中
3.v-enter-to:进入的终点
.元素离开的样式:
1.v-leave:离开的起点
2.v-leave-active离开过程中
3.v-leave-to:离开的终点
<style scoped>
h1{
background-color: orange;
}
/* 进入的起点 离开的终点*/
.hello-enter,.hello-leave-to{
transform: translateX(-100%);
}
/* 进入的过程 离开的过程*/
.hello-enter-active,.hello-leave-active{
transition: 0.5s linear;
}
/* 进入的终点 离开的起点*/
.hello-enter-to,.hello-leave{
transform: translateX(0);
}
</style>
2.使用<transition>包裹要过度的元素,并配置name属性:
<transition name="hello">
<h1 v-show="isShow">你好啊!</h1></transition>
3.备注:若有多个元素需要过度,则需要使用: <transition-group>,且每个元素都要指定key值。
vue脚手架配置代理
方法一
在vueconfigjs中添加如下配置:
devServer:{
proxy:"http://localhost:5000"
说明:
1.优点:配置简单,请求资源时直接发给前端(8080)即可。
2.缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
3工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先应配前端资源)
方法二
编写vueconfig.js配置具体代理规则:
module.exports ={
devServer:{
proxy:{
"/api1':{// 匹配所有以'/api1'开头的请求路径
target:'http://localhost:5000',// 代理目标的基础路径 changeOrigin: true,
pathRewrite:{'^/api1':''}
},
'/api2':{// 匹配所有以'/api2'开头的请求路径
target:'http://localhost:5001',// 代理目标的基础路径 changeOrigin: true,
pathRewrite:{'^/api2':''}
}
}
}
}
module.exports = {
pages: {
index: {
// 入口
entry: 'src/main.js'
}
},
lintOnSave: false, // 关闭语法检查
//开启代理服务器(方式一)
/* devServer: {
Proxy:'http://localhost:5000'
}, */
//开启代理服务器(方式二)
/* devServer:{
Proxy:{
'/atguigu': {
target:'<http://localhost:5000>',
pathRewrite:{'^/atguigu':''},
// ws:true, //用于支持websocket
// changeOrigin:true //用于控制请求头中的host值
},
/* '/foo': {
target:'<other_url>'
}*/
/* }
},
'/demo': {
target:'<http://localhost:5001>',
pathRewrite:{'^/demo':''},
// ws:true, //用于支持websocket
// changeOrigin:true //用于控制请求头中的host值
} */
}
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000 changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080 changeOrigin默认值为true
说明:
1.优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
2.缺点:配置略微繁琐,请求资源时必须加前缀。
<template>
<div>
<button @click="getStudents">获取学生信息</button>
<button @click="getCars">获取汽车信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
methods:{
getStudents(){
axios.get('http://localhost:8080/atguigu/test.txt').then(
respons => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
},
getCars(){
axios.get('http://localhost:8080/demo/test.txt').then(
respons => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
}
}
</script>
插槽
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式 适用于父组件===>子组件。
2.分类:默认插槽、具名插槽、作用域插槽
3.使用方式:
1.默认插槽:
父组件中:
<Category>
<div>html结构1</div>
</Category>
子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽默认内容...</slot>
</div>
</template>
2.具名插槽:
父组件中:
<Category>
<template slot="center">
<div>html结构1</div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容...</slot>
<slot name="footer">插槽默认内容...</slot>
</div>
</template>
3.作用域插槽:
1.理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot :games="games" msg="hello"></slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title'],
data() {
return {
games:['红色警戒','红色警戒','红色警戒']
}
}
}
</script>
<template>
<div class="container">
<Category title="游戏">
<template scope="atguigu">
<ul>
<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="{games}">
<ol>
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template scope="{games}">
<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category'
export default {
name: 'App',
components:{Category},
}
</script>
理解vuex
vuex是什么←
1.概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中
多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适
用于任意组件间通信。←
2. Github地址:https://github.com/vuejs/vuex
5.1.2什么时候使用Vuexe
1.多个组件依赖于同一状态
2.来自不同组件的行为需要变更同一状态
Vuex
1.概念
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
2.何时使用?
多个组件需要共享数据时
3.搭建vuex环境
# 1.创建文件:src/store/index.js
//引入Vue核心库
import Vue from 'vue
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象-响应组件中用户的动作
const actions ={}
//准备mutations对象-修改state中的数据
const mutations ={}
//准备state对象--保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions, mutations,
state
})
2.在main.js中创建vm时传入store配置项
//引入store
import store from './store"
...
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
基本使用
1.初始化数据、配置actions 配置mutations,操作文件store.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
//响应组件中加的动作
jia(context,value){
// console.log("actions中的jia被调用了',ministore,value) context.commit('JIA',value)
},
}
const mutations = {
//执行加
JIA(state,value){
// console.log('mutations中的JIA被调用了',state,value)
state.sum += value
}
//初始化数据
const state = {
sum:0
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
mputed:{
//借助mapState生成计算属性:sum、school、subject(对象写法)
...mapState({sum:'sum' school:'school',subject:'subject'l),
2.组件中读取vuex中的数据:$store.state.sum
3.组件中修改vuex中的数据:$storedispatch(action中的方法名,数据)或 $store.commit(mutations中的方法名',数据)
备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit
getters的使用
1.概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
2.在store.js中追加getters配置
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.store({
......
getters
})
3.组件中读取数据: $store.getters.bigSum
.四个map方法的使用
1.mapState方法:用于帮助我们映射state中的数据为计算属性
computed:{
//借助mapState生成计算属性:sum、school、subject(数组写法)...mapstate(['sum','school', 'subject']),
},
2.mapGetters方法:用于帮助我们映射getters中的数据为计算属性
computed:{
//借助mapGetters生成计算属性:bigSum(对象写法)
...mapGetters({bigSum:"bigSum'}),
//借助mapGetters生成计算属性:bigSum(数组写法)
...mapGetters(['bigSum'])
},
3.mapActions方法:用于帮助我们生成与actions对话的方法,
即:包含$store.dispatch(xxx)的函数
methods:{
//靠mapActions生成:incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd:jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成:incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
模块化+命名空间
1.目的:让代码更好维护,让多种数据分类更加明确。
修改 store.js
const countAbout = {
namespaced:true, //开启命名空间
state:{x:1},
mutations:{ .…. },
actions:{ ... },
getters:{
bigSum(state){
return state.sum * 10
}
}
}
const personAbout={
namespaced:true,//开启命名空间
state:{ ... },
mutations:{ ... },
actions:{ ... }
}
const store = new Vuex.Store({
modules:{
countAbout,
personAbout
})
3.开启命名空间后,组件中读取state数据:
//方式一:自己直接读取
this.$store.state.personAbout.list//方式二:借助mapState读取:
...mapState('countAbout',['sum', 'school', 'subject']).
4.开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取
this.$store.getters["personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])
5.开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang'person)
//方式二:借助mapActions:
...mapActions('countAbout’,{incrementOdd:'jiaOdd' incrementWait: 'jiaWait'})
6.开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit(personAbout/ADD PERSON'person)
//方式二:借助mapMutations:
...mapMutations('countAbout’,{increment:"JIA',decrement:'JIAN'}),
VueUI组件库
1移动端常用Ul组件库
1. Vant https://youzan.github.io/vant
2.Cube Ul https://didi.github.io/cube-ui
3.Mint Ul http://mint-ui.github.io
2.PC端常用UI组件库
1. Element UI https://element.eleme.cn
2. IView Ul https://www.iviewui.com