目录
一、初始化脚手架
1.1 概念
Vue脚手架是Vue官方提供的标准化开发工具(平台)。
文档: https://cli.vuejs.org/zh/
1.2 使用步骤
第一步(仅第一次执行):全局安装@vue/cli
- npm install -g @vue/cli
第二步:切换到要创建的项目,然后使用命令创建项目
- cd 切换到的目录名字(例如:cd desktop[切换到桌面])
- vue create 项目名字
第三步:启动项目
- npm run serve
注意事项
- 如出现下载缓慢请配置 npm 淘宝镜像 npm config set registry https://registry.npm.taobao.org
- Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置 vue inspect > output.js
1.3 模板项目的结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
二、ref、props、scoped、nextTick
2.1 ref 属性
作用
- 被用来给元素或子组件注册引用信息(id的替代者)
- 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
使用方法
- 打标识:
<h1 ref="xxx">.....</h1>
或<School ref="xxx"></School>
- 获取:
this.$refs.xxx
2.2 props配置项
读取方式一: 只指定名称
props: ['name', 'age', 'setName']
读取方式二: 指定名称和类型
props:{ name:String, age:Number, sex:String }
读取方式三: 指定名称/类型/必要性/默认值
props:{ name:{ type:String, //名字类型 required:true //name是必要的 default:XXX //默认值 } }
2.3 scoped样式
作用
- 让样式在局部生效,防止冲突。
写法
<style scoped> </style>
2.4 nextTick
语法
- this.$nextTick(回调函数)
作用
- 在下一次 DOM 更新结束后执行其指定的回调
什么时候用
- 当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行
三、mixin(混入) 与 插件
3.1 mixin(混入)
功能
- 可以把多个组件共用的配置提取成一个混入对象
方法
- 定义混合 { data(){....}, methods:{....} .... }
- 引用混合 import {共用配置名字1,共用配置名字2} from '写共用配置文件的名字'
- 使用混入 全局混入:Vue.mixin(xxx) / 局部混入:mixins:['xxx']
3.2 插件功能
- 用于增强Vue
本质
- 包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
定义插件
对象.install = function (Vue, options) { // 1. 添加全局过滤器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx }
使用插件
- Vue.use(写插件的js文件名)
四、本地存储webStorage
存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API:
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
xxxxxStorage.getItem('person');
该方法接受一个键名作为参数,返回键名对应的值。
xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
xxxxxStorage.clear()
该方法会清空存储中的所有数据。
备注:
SessionStorage存储的内容会随着浏览器窗口关闭而消失。
LocalStorage存储的内容,需要手动清除才会消失。
xxxxxStorage.getItem(xxx)
如果xxx对应的value获取不到,那么getItem的返回值是null。
JSON.parse(null)
的结果依然是null。
五、组件的自定义事件
概念
- 一种组件间通信的方式,适用于:子组件 ===> 父组件
绑定自定义事件(在父组件中)
- 第一种方式
<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
- 第二种方式
<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }
若想让自定义事件只能触发一次,可以使用 once 修饰符,或 $once 方法。
触发自定义事件 this.$emit('atguigu',数据)
解绑自定义事件 this.$off('atguigu')
组件上也可以绑定原生DOM事件,需要使用 native 修饰符。
六、全局事件总线
一种组件间通信的方式,适用于任意组件间通信。
安装全局事件总线
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, ...... })
使用事件总线
接收数据
- A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) }
提供数据
this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中,用 $off 去解绑当前组件所用到的事件。
七、消息订阅与发布(pubsub)
一种组件间通信的方式,适用于任意组件间通信。
使用步骤
- 安装pubsub:
npm i pubsub-js
- 引入:
import pubsub from 'pubsub-js'
- 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息 }
- 提供数据:
pubsub.publish('xxx',数据)
- 最好在beforeDestroy钩子中,用
PubSub.unsubscribe(pid)
去取消订阅。