600字范文 > Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped

Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped

时间：2020-03-17 20:56:01

文章目录

脚手架的基本使用初始化脚手架分析脚手架结构render函数修改默认配置 ref属性props属性mixin混入插件scoped样式Todo-list案例组件化编码流程(通用）props适用于注意点浏览器本地存储 webStorage组件的自定义事件全局事件总线（GlobalEventBus）消息订阅与发布（pubsub）nextTick过度与动画动画效果过度效果总结集成第三方动画

脚手架的基本使用

初始化脚手架

说明

Vue 脚手架（CLI）是 Vue 官方提供的标准化开发工具（开发平台），.vue文件需要脚手架帮忙转换翻译浏览器才认识最新版本 5.x，用最新版本文档：/zh/

具体步骤

解决npm warn config global--global,--localare deprecated. use--location=globalinstead.

第一步（仅第一次执行）：全局安装@vue/cli

npm install --location=global @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建目录

vue create xxxx

然后选择

第三步：启动项目（对项目进行编译初始化）

npm run serve

按两个ctrl+c停掉这个

备注

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.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 代码

// 该文件是整个项目的入口文件// 引入Vueimport Vue from 'vue'// 引入App组件，他是所有组件的父组件import App from './App.vue'// 关闭Vue的生产提示Vue.config.productionTip = false// 创建vue实例对象 ---vmnew Vue({el:'#app',// 完成了这个功能：将App组件放入容器中render: h => h(App),})

index.html 代码

<!DOCTYPE html><html lang=""><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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><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></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可以对脚手架进行个性化定制，详情见：/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:'-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.vueprops:["chuandi"]

子组件 ==> 父组件通信（要求父先给子一个函数）

这里传递的是checkTodo函数，子组件调用这个函数，把参数传给父组件

注意点

使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

完整 todolist 过程笔记请点击----> TodoList

浏览器本地存储 webStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。

组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件

使用场景：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-activeappear 是刷新页面是否有动画效果，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+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。