Vue(三)使用Vue脚手架
/ 全局过滤器})// 定义全局指令// 指令与元素成功绑定时(一上来)},// 指令所在元素被插入页面时},// 指令所在的模板被重新解析时})//定义混入data() {return {x: 100,y: 200},})//给Vue原型上添加一个方法(vm和vc都能用)alert('你好啊!')1、拆分静态组件组件要按照功能点拆分,命名不要与html元素冲突2、实现动态组件考虑好数据的存放位置
目录
一、初始化脚手架
1.1 使用步骤
1、第一步(仅第一次执行):全局安装@vue/cli:npm install -g @vue/cli
2、第二步:切换到你要创建项目的目录,然后使用命令创建项目:vue create xxxx
3、第三步:启动项目:npm run serve
2.2 模板项目的结构
main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
render:h => h(App)的作用:将App组件放入容器中
注意:
1、vue.js与vue.runtime.xxx.js的区别:
(1)vue.js是完整版的Vue,包含:核心功能+模板解析器
(2)vue.runtime.xxx.js是运行版的Vue,只包含:核心功能,没有模板解析器
2、因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容
二、ref、props、mixin
2.1 ref属性
1、ref属性被用来给元素或子组件注册引用信息(id的代替者)
2、应用在html标签上获取的是真实DOM元素,应用在组件标签上获取的是组件实例对象
3、使用方式:
(1)打标识:<h1 ref="xxx">...</h1>或<School ref="xxx"/>
(2)获取:this.$refs.xxx
2.2 配置项 props
1、功能:让组件接收外部传过来的数据
2、传递数据:
<Student name="李四" sex="女" :age="18"/>
3、接收数据:
//简单接收
props: ['name', 'sex', 'age'],
//接收的同时对数据进行限制
props: {
name: String,
sex: String,
age: Number
},
// 接收的同时对数据进行类型限制+默认值的指定+必要性的限制
props: {
name: {
type: String,
required: true//名字是必传的
},
sex: {
type: String,
required: true
},
age: {
type: Number,
default: 99 //默认值是99
}
}
4、注意:
props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中1一份,然后去修改data中的数据。
例如:
<template>
<div class="school">
<h1>{{ msg }}</h1>
<h2>学生姓名:{{ name }}</h2>
<h2>学生性别:{{ sex }}</h2>
<h2>学生年龄:{{ myAge }}</h2>
<button @click="updateAge">点我年龄+1</button>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
msg: '我是一个尚硅谷的学生',
myAge: this.age,
}
},
methods: {
updateAge() {
this.myAge++
}
},
}
2.3 混入 mixin
1、功能:可以把多个组件共用的配置提取成一个混入对象
2、使用方式:
(1)第一步:定义混入,例如:
{
data(){},
methods:{}
}
(2)第二步:使用混入,例如:
① 全局混入:Vue.mixin(xxx)
② 局部混入:mixins:[ ‘xxx’ ]
三、插件
3.1 功能
用于增强Vue
3.2 本质
包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
3.3 定义插件
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()
},
// 指令所在的模板被重新解析时
update(element, binding){
element.value = binding.value
}
})
//定义混入
Vue.mixin({
data() {
return {
x: 100,
y: 200
}
},
})
//给Vue原型上添加一个方法(vm和vc都能用)
Vue.prototype.hello = ()=> {
alert('你好啊!')
}
}
}
3.4 使用插件
// 引入插件
import plugins from './plugins'
//使用插件
Vue.use(plugins)
四、scoped样式
1、作用:让样式在局部生效,防止冲突
2、写法:<style scoped>
五、组件化编程总结
5.1 组件化编码流程
1、拆分静态组件
组件要按照功能点拆分,命名不要与html元素冲突
2、实现动态组件
考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
(1)一个组件在用:放在组建自身即可
(2)一些组件在用:放在他们共同的父组件上(状态提升)
3、实现交互:从绑定事件开始
5.2 props适用
props适用于:
1、父组件 ==>子组件 通信
2、子组件 ==> 父组件 通信(要求父先给子一个函数)
5.3 注意
1、使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的
2、props传过来的值若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做
六、本地存储
1、存储内容大小一般支持5MB左右(不同浏览器可能不一样)
2、浏览器通过Window.sessionStorage和Window.localStorage 属性来实现本地存储机制
3、相关API:
(1)xxxxStorage.setItem('key', 'value'):该方法接收一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
(2)xxxxStorage.getItem('key'):该方法接收一个键名作为参数,返回键名对应的值
(3)xxxxStorage.removeItem('key'):该方法接收一个键名作为参数,并把该键名从存储中删除。
(4)xxxxStorage.clear():该方法会清空存储中的所有数据。
4、注意
(1)SessionStorage存储的内容会随着浏览器窗口关闭而消失
(2)LocalStorage存储的内容,需要手动清除才消失
(3)xxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null
(4)JSON.parse(null)的结果依然是null
七、自定义事件
1、一种组件间通信的方式:适用于:子组件==>父组件
2、使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件回调在A中)。
3、绑定自定义事件:
(1)第一种方式,在父组件中:<Student @atguigu="getStudentNmae"/>或<Student v-on:atguigu="getStudentNmae"/>
(2)第二种方式,在父组件中:
<Student ref="student"/>
methods: {
getStudentNmae(name) {
console.log('App收到了学生名:', name)
this.studentName = name
}
}
mounted(){
this.$refs.student.$on('atguigu', this.getStudentNmae)//绑定自定义事件
}
(3)若想让自定义事件只能触发一次,可以使用once修饰符,或者$once方法
4、触发自定义事件:this.$emit('atguigu', 数据)
5、解绑自定义事件:this.$off('atguigu')
6、组件上也可以绑定原生DOM事件,需要使用native修饰符
7、注意:通过this.$refs.xxx.$on('atguigu', 回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题
八、全局事件总线(GlobalEventBus)
1、一种组件间通信的方式,适用于任意组件间通信。
2、安装全局事件总线:
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
},
......
})
3、使用全局事件总线
(1)接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
(2)提供数据:
this.$bus.$emit('xxxx',数据)
4、最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
九、消息订阅与发布(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)去取消订阅。
十、Vue封装的过渡与动画
1、作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名
2、图示:
3、写法:
(1) 准备好样式:
①元素进入的样式:v-enter(进入的起点)、v-enter-active(进入过程中)、v-enter-to(进入的终点)
② 元素离开的样式:v-leave(离开的起点)、v-leave-active(离开过程中)、v-leave-to(离开的终点)
(2)使用<translation>包裹要过渡的元素,并配置name属性:
<transition-group name="hello" appear>
<h1 v-show="isShow" key="1">你好啊!</h1>
<h1 v-show="isShow" key="2">尚硅谷!</h1>
</transition-group>
(3)备注:若有多个元素需要过渡,则需要使用:<translation-group>,且每个元素都要指定key值。
更多推荐
所有评论(0)