Vue | 使用Vue脚手架 【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录
- 脚手架的基本使用
- 初始化脚手架
- 分析脚手架结构
- render函数
- 修改默认配置
- ref属性
- props属性
- mixin混入
- 插件
- scoped样式
- Todo-list案例
- 组件化编码流程(通用）
- props适用于
- 注意点
- 浏览器本地存储 webStorage
- 组件的自定义事件
- 全局事件总线（GlobalEventBus）
- 消息订阅与发布（pubsub）
- nextTick
- 过度与动画
- 动画效果
- 过度效果
- 总结
- 集成第三方动画
脚手架的基本使用
初始化脚手架
说明
- Vue 脚手架（CLI）是 Vue 官方提供的标准化开发工具（开发平台），
.vue文件需要脚手架帮忙转换翻译浏览器才认识 - 最新版本 5.x，用最新版本
- 文档：https://cli.vuejs.org/zh/
具体步骤
解决npm warn config global --global, --local are deprecated. use --location=global instead.
第一步（仅第一次执行）：全局安装@vue/cli
npm install --location=global @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建目录
vue create xxxx
然后选择
第三步：启动项目（对项目进行编译初始化）
npm run serve
按两个ctrl+c停掉这个
备注
- 如出现下载缓慢请配置 npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org - Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的webpakc 配置，请执行：
vue inspect > output.js
分析脚手架结构
执行顺序：
在vscode终端（ctrl+~）执行了npm run serve -> 来到maxin.js引入App.vue -> 来到App.vue 引入组件School ->maxin.js里面创建实例对象将App放入容器里index.html
里面组件的名字要用驼峰法！！！
main.js 代码
// 该文件是整个项目的入口文件// 引入Vue
import Vue from 'vue'
// 引入App组件，他是所有组件的父组件
import App from './App.vue'// 关闭Vue的生产提示
Vue.config.productionTip = false// 创建vue实例对象 ---vm
new Vue({el:'#app',// 完成了这个功能：将App组件放入容器中render: h => h(App),
})
index.html 代码
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 开启移动端的理想视口 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 配置页签的图标 --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 配置网页的标题 --><title><%= htmlWebpackPlugin.options.title %></title>
</head><body><!-- 如果浏览器不支持JS，noscript中的元素就会被渲染 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><!-- 容器 --><div id="app"></div><!-- built files will be auto injected -->
</body></html>
render函数
关于不同版本的 Vue
vue.js与vue.runtime.xxx.js的区别：
（1）vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）vue.runtime.xxx.js是运行时版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项所以在new Vue的时候不能写template，需要使用render函数接收到的createElement函数去指定具体内容。
render是个函数，vue帮你调用，调用的时候传递一个createElement函数，这个函数能创建具体的元素
new Vue({el:'#app',// 完成了这个功能：将App组件放入容器中render: h => h(App),
})
render完整写法：
render(createElement){ return createElement('h1','你好啊')},
使用箭头函数简写：
render:createElement=> createElement(App),
render参数方法说明
内置创建元素的方法，第一个参数是创建的内置元素，第二个参数是元素内容
为什么不引入完整的Vue？
完整Vue包含了核心功能+模板解析器，但最终我们项目打包的时候，webpack会帮我们解析模板，为了减轻容量大小，所以选择了去掉模板解析器的Vue版本
为什么组件里的模板就可以解析呢？
脚手架里提供了模板编译器的库，专门解析标签里面的模板组件，完美取代了Vue的编译器
修改默认配置
- 使用
vue inspect > output.js可以查看到Vue脚手架的默认配置(output.json)。 - 使用
vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh
脚手架的哪些默认配置不能改？
修改脚手架的默认配置
- 创建一个和
package.json同级的vue.config.js文件
- Vue.config.xxx 与 vue.config.js 有啥区别？
前者是给vue构造函数身上的某个属性配置属性，后者是配置脚手架工作模式的
- 在官网找到响应的配置代码，复制到
vue.config.js里面，修改相应的属性就可以了
关闭语法检查
在 vue.config.js 里面 关闭语法检查
module.exports = defineConfig({transpileDependencies: true,lintOnSave:false // 关闭语法检查
})
ref属性
- 被用来给元素(html,h1,button)或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DOM元素
- 应用在组件标签上是组件实例对象（vc）
- 使用方式：
打标识：<h1 ref="xxx">.....</h1>或<School ref="xxx"></School>
获取：this.$refs.xxx
给哪个DOM元素添加了
ref，$refs就会收集这些DOM元素
App.vue 代码：
<template><div><h1 v-text="msg" ref="title"></h1><button @click="showDOM" ref="btn">点我输出上方的DOM元素</button><SchoolName ref="sch"/></div>
</template><script>// 引入SchoolName组件import SchoolName from './components/SchoolName.vue'export default {name:'App',components:{SchoolName},data(){return {msg:'2022-7-17'}},methods:{showDOM(){console.log(this); // 组件中的this均指向VueComponent实例对象console.log(this.$refs.title); // 真实DOM元素console.log(this.$refs);console.log(this.$refs.sch); // 给组件加的话，会获得SchoolName组件实例对象(vc)// 在原生JS里面这样获取DOM元素// console.log(document.querySelector('#title'));}}}
</script><style></style>
props属性
功能：让组件接收外部传过来的数据
传递数据：
<Demo name="xxx"/>或<Demo :age="xxx"/>（前者"“中是字符串，后者”"中是表达式） ！注意 ：这里StudentName.vue没有在组件里面传入数据
v-bind得到的是表达式，里面可以进行运算
接收数据：
第一种方式（只接收）：props:['name']
第二种方式（限制类型）：props:{name:String}
// 接收的同时对数据进行类型限制props:{ name:String,age:Number,sex:String}
第三种方式（限制类型、限制必要性、指定默认值）：
// 接收的同时对 数据进行类型限制+ 默认值的指定+ 必要性的限制props:{name:{type:String, // name的类型是字符串required:true, // name是必要 传参的},age:{type:Number,default:99, // 不传参的话默认值是 99},sex:{type:String, // name的类型是字符串required:true, // name是必要的}}}
备注：
props与data是有区别的，props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告- 若业务需求确实需要修改，那么请复制
props的内容到data中一份，然后去修改data中的数据。
mixin混入
功能：可以把多个组件共用的配置提取成一个混入对象
- 使用方式：
1.第一步定义混合：
2.第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
注意
插件
功能：用于增强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() - 组件里直接使用插件
scoped样式
作用：让样式在局部生效，防止冲突。
写法：<style scoped>
原因：如果不加scoped样式，组件里面的样式在项目里面只能写一次，其他组件写的话会覆盖掉，加上的话就可以让样式在单个组件里生效，不影响其他组件的样式命名
vue里的style标签 可以使用
less,前提是下载less-loader ，在终端输入npm i less-loader
Todo-list案例
组件化编码流程(通用）
拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
(1).一个组件在用：放在组件自身即可。
(2). 一些组件在用：放在他们共同的父组件上App.vue（状态提升）。
(3). 用：指的是 读 或者 写实现交互：从绑定事件开始。
props适用于
- 父组件 ==> 子组件 通信(传递数据)
// App.vue
<MySon :chuandi="chuandi" />
// MySon.vue
props:["chuandi"]
- 子组件 ==> 父组件 通信（要求父先给子一个函数）
这里传递的是checkTodo函数，子组件调用这个函数，把参数传给父组件
注意点
使用
v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。完整 todolist 过程笔记请点击----> TodoList
浏览器本地存储 webStorage
存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过
Window.sessionStorage和Window.localStorage属性来实现本地存储机制。相关API：
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。xxxxxStorage.getItem('person');
该方法接受一个键名作为参数，返回键名对应的值。xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数，并把该键名从存储中删除。xxxxxStorage.clear()
该方法会清空存储中的所有数据。
备注：
SessionStorage存储的内容会随着浏览器窗口关闭而消失。LocalStorage存储的内容，需要手动清除才会消失（调api或清除缓存）。xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。JSON.parse(null)的结果依然是null。
更多见—>【黑马】本地存储
组件的自定义事件
一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
第一种方式，在父组件中：
<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/>
第二种方式，在父组件中：
$on(' ')绑定自定义事件
<Demo ref="demo"/> ...... mounted(){this.$refs.xxx.$on('atguigu',this.test) }若想让自定义事件只能触发一次，可以使用
once修饰符，或$once方法。this.$refs.student.$once('atguigu',this.getStudentName) // 绑定自定义事件 一次性
触发自定义事件：
this.$emit('atguigu',数据)解绑自定义事件
this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用
native修饰符。<StudentName ref="student" @click.native="show"/>在App.vue中给组件绑定了click点击事件，但是需要加
native注意：通过
this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
全局事件总线（GlobalEventBus）
一种组件间通信的方式，适用于任意组件间通信。
安装全局事件总线：
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去解绑当前组件所用到的事件。
$bus是一个傀儡，才能让任意组件通过他来传数据- 借用了原型链继承的特性，在vue实例的原型上注册自定义事件，那么所有组件都可以访问得到
- Vue的原型对象
Vue.prototype任何组件vc都可以看到 - Vue的实例对象(vm)上有
$on等方法
消息订阅与发布（pubsub）
一种组件间通信的方式，适用于 任意组件间通信。
使用步骤：
安装pubsub：
npm i pubsub-js哪里用就哪里引入:
import pubsub from 'pubsub-js'
我两个子组件进行消息订阅与发布，我的两个子组件分别引用在script标签里接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){demo(data){......} } ...... mounted() {this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息 }提供数据：
pubsub.publish('xxx',数据)最好在beforeDestroy钩子中，用
PubSub.unsubscribe(pid)去取消订阅。
nextTick
- 语法：
this.$nextTick(回调函数) - 作用：在下一次 DOM 更新结束后执行其指定的回调。
- 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在
nextTick所指定的回调函数中执行。
过度与动画
动画效果
- 定一个动画效果@keyframes
@keyframes atguigu {from{transform: translateX(-100%);}to{transform: translateX(0px);} } - 给要有动画效果的元素外面 用 transition标签 包含
- 给样式添加动画 ，如果transition有name，样式就是
.name-enter-active，没有的话就是v-enter-active - appear 是刷新页面是否有动画效果，appear 为 true就是刷新有动画效果
- 使用动画的话光使用
v-enter-active和v-leave-active就可以啦
过度效果
- 过渡效果不用写@keyframes了，vue封装了三个样式，
v-enter是进入的起点，v-enter-active是进入的过程，v-enter-to是进入的终点 - 在起点和终点写相应的位置即可
- 要加上动画效果，就要在
v-enter/leave-active加上transition效果
总结
作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
图示：
写法：
准备好样式：
- 元素进入的样式：
- v-enter：进入的起点
- v-enter-active：进入过程中
- v-enter-to：进入的终点
- 元素离开的样式：
- v-leave：离开的起点
- v-leave-active：离开过程中
- v-leave-to：离开的终点
- 元素进入的样式：
使用
<transition>包裹要过度的元素，并配置name属性：<transition name="hello"><h1 v-show="isShow">你好啊！</h1> </transition>备注：若有多个元素需要过度，则需要使用：
<transition-group>，且每个元素都要指定key值。
集成第三方动画
https://animate.style/
第一步：下载动画库
npm install animate.css
第二步：导入动画库
import 'animate.css'
第三步：基本使用
<transition-group appearname="animate__animated animate__bounce" enter-active-class="animate__swing"leave-active-class="animate__backOutUp"><h1 v-show="isShow" key="1">引入</h1><h1 v-show="isShow" key="2">动画库</h1></transition-group>
Vue | 使用Vue脚手架 【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】相关推荐
- 前端之vue的ref、props属性和mixin, 插件,局部样式
ref属性与props属性 ref ref作用 使用 ref实例 props 三种方式 数组 -- 简单声明接收 对象 -- 接收并指定属性 对象:{对象} -- 接收+指定属性+默认/必要性 pro ...
- Vue 浏览器本地存储
文章目录 localstorage SessionStorage 总结 TodoList 改为本地存储 localstorage <!DOCTYPE html> <html lang ...
- 【Vue组件间通信】 全局事件总线、订阅与发布
目录 一.全局事件总线 作用 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 二.订阅与发布 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 一.全局事 ...
- Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值 注意点 子组件给父组件传值 父组件接受子组件的传值 通过函数 组件的自定义事件 事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
- 「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮 你能照见南边,也能照见北边 照见她,你跟她说一声,就说我想她了. 前言 前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
- Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息 子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
- vue 分模块打包 脚手架_手动撸一个webpack4脚手架(仿vuecli2)
其实vue的脚手架是真的多,vue的nuxt脚手架的,vue的webpack脚手架的,还有各种gitHub上的后台管理系统模板的..... 而vue-cli2的webpack模板,这个相信是大多数人最 ...
- vue 分模块打包 脚手架_一步步从头搭建 Vue 开发环境
前言 由于是工具,很可能你看到的时候有些工具包已经升级了,会有一些报错:这个你就需要自己探索了. 工具的版本 node: v10.16.0 npm: v6.9.0 babel: 7.5.5 webpa ...
- Vue.js 介绍及其脚手架工具搭建
vue.js介绍 (MVVM.核心思想) vue.js 是一套轻量级的 MVVM 的渐进式框架.Vue 的核心库只关注视图层. vue.js 的官方网址是:点我,我是网址 MVVM 介绍 MVVM 全 ...
最新文章
- Swift语言实现代理传值
- iOS-开启arc之后 NSNotificationCenter removeObserver 是否需要调用
- Objective-C设计模式——生成器Builder（对象创建）
- win7(x64）安装oracle 10g 32位的方法
- C语言（CED）输出前k大的数（分治法/局部快速排序）:给定一个数组，统计前k大的数并且把这k个数从大到小输出。
- iOS大型项目之模块化管理
- es6 实例：模块的 Singleton 模式
- 为特定的提交生成一个git补丁
- mac安装ffmpeg
- 分享一个自己写的py扫描路径工具
- ppt生成器_#PPT素材神器#在线卡通头像生成器: avataaars generator
- JavaSE IDEA 使用-面向对象
- 【动手学深度学习】01 Windows下安装环境
- 腾讯云技术布道师贺嘉正式受邀出席SDCC 2016微信开发专题，分享腾讯云的小程序解决方案...
- 【转】区块链经济学：制度加密经济学入门指南
- 是时候要说再见了，春风十里，不如邮你！
- 在你的时区里，一切准时-很美的英文诗
- Kubernates(k8s)工作负载之工作负载资源
- 〖Python 数据库开发实战 - Python与MySQL交互篇⑫〗- 项目实战- 实现新闻管理模块
- windows10系统搜索不到无线WIFI网络打印机