文章目录
一、安装
第一步(仅第一次执行):全局安装 @vue/cli
npm install -g @vue/cli
第二步:切换到你要创建项目的目录,然后使用命令创建项目
vue create xxxx
第三步:启动项目
npm run serve
二、小Tips
- 如出现下载缓慢请配置 npm 淘宝镜像:
npm config set registry https://registry.npm.taobao.org
- Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpack 配置,请执行如下命令 。就会将脚手架的默认配置生成一个 output.js文件供你查看
vue inspect > output.js
三、分析脚手架结构
- 当我们使用脚手架新建一个项目
vue_demo
时,目录结构如下
assets 存放 png、video等静态资源,
components 存放子组件
脚手架文件结构如下:
- 当我们运行
npm run serve
命令时,系统会去文件中寻找main.js
入口文件,
/*
该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入APP组件,它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象—— —— vm
new Vue({
// 下面这行运行代码完成这个功能,将App组件放入容器中
render: h => h(App),
}).$mount('#app')
/*
* .$mount('#app') ==> el:'#app'
*/
-
首先引入
App.vue
文件,在App.vue
文件中再引入components
文件夹下的其他vue
文件,如下
-
在
public
文件夹下找到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">
<!-- 配置图标文件的引入,<%= BASE_URL %> ,表示 public目录下-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 配置网页标题,<%= htmlWebpackPlugin.options.title %>表示package.json中的name -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- noscript 表示当浏览器不支持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函数
在我们 创建
vm
时,使用的new Vue
时,使用常规的new Vue会出现以下错误
new Vue({
el:'app';
template:'<h1>你好啊!</h1>`;
components:{
App
}
})
错误信息中要求我们使用完整版的vue或者使用render函数,由于在开发中使用完整版的vue占用体积相对较大,因此使用render函数【render函数中必须要有返回值】
一般的render函数写为:
render(createElement){
return createElement('h1','你好啊!')
}
经过使用箭头函数的缩写为:
render: h => h('h1','你好啊!')
即,也可以写为:
因此,总结如下
五、修改脚手架中的默认配置
- Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpack 配置,请执行如下命令 。就会将脚手架的默认配置生成一个 output.js文件供你查看
vue inspect > output.js
- 使用vue.config.js可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh
六、ref属性
当我们在
APP.vue
中给各标签添加属性获取DOM值操作时,建议使用ref属性,来代替document,getElementById(‘title’)
通过ref
属性获取到的值我们进行打印输出,发现,组件的DOM是组件的实例对象,而标签的DOM是真实DOM
因此,ref
- 被用来给元素或子组件注册引用信息(id的替代者)
- 应用在HTML标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
- 使用方式:
打标识:<h1 ref="xxx">...<h1>
或<School ref="xxx><School>
获取 :this.$refs.xxx
七、配置项props
props 实现了父组件向子组件传递数据(或方法),父组件中绑定属性(或方法),子组件中利用props接受数据(或方法)。。。若想要子组件向父组件传递数据,可利用方法传递,将参数带到方法中递回给父组件
现在有这么一个需求:在复用组件时,组件内的数据可以动态的改变,传入什么就展示什么——这就要用到
props
配置属性
所以,配置项props的功能就是让组件接收外部传过来的数据。
props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么就要求复制props的内容到data中一份,然后去修改data中的数据。
接收数据的方式如下
第一种:简单的声明接收【常用,只接收,对数据无特别要求】
props:['name','age','sex']
第二种:接受的同时对数据进行类型限制
props:{
name:String,
age:Number,
sex:String
}
第三种:接受的同时对数据:进行类型限制 + 默认值的指定 + 必要性的限制
注意:default 与 required不能同时出现
props:{
name:{
type:String, // name 的类型是字符串
required:true, // name 是必要的
},
age:{
type:Number,
default:99 // 默认值
},
sex:{
type:String,
required:true
}
}
八、mixin混入
1、功能:复用配置,可以把多个组件共用的配置提取成一个混入对象,即多个组件共享同一个配置。
2、使用方式:
-
将共用的内容抽取到一个
js
文件中
-
在需要用到的组件中进行引入——局部引入
-
在需要用到的组件中进行引入——全局引入
八、自定义插件
1、定义插件:在plugins.js
文件中定义插件,install()
的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据【可写】
2、使用插件:在main.js
文件中引入插件:import,使用插件:Vue.use()
九、scoped样式管理
在新建组件时,会用到
style
样式,scoped的作用就是让样式在局部生效,防止类名相同引起冲突
十、todo案例
1、思路
2、添加数据——Vue组件中按下回车键获取value值
安装npm install nanoid
,并在代码中导入并调用nanoid()
函数可以生成随机的id值
第一种:使用
event
获取数据
<template>
<div>
<input type="text" placeholder="请输入你的信息,按回车键确认" v-model="title" @keyup.enter="add"/>
<div/>
</template>
<script>
import {nanoid} from 'nanoid'
export default {
name:'AddMessage',
methods: {
add(event){
// 将用户的输入包装成一个todo对象
const todoObj = {id:nanoid(),title:event.target.value,done:false)
}
}
}
</script>
第二种:使用
v-model
双向绑定数据
<template>
<div>
<input type="text" placeholder="请输入你的信息,按回车键确认" v-model="title" @keyup.enter="add"/>
<div/>
</template>
<script>
export default {
name:'AddMessage',
data(){
return {
title:''
}
},
methods: {
add(){
// 校验数据
if(!this.title.trim()) return alert('输入不能为空')
// 将用户的输入包装成一个对象
const todoObj = {id:nanoid(),title:this.title,done:false),
// 将输入框的数据进行清除
this.tite = ''
}
}
}
</script>
3、勾选与取消勾选
第一种写法:绑定点击事件
第二种方法:使用
v-model
布尔值的点击绑定修改,但是不推荐使用,因为修改掉了props
4、删除
5、统计已完成与全部完成
第一种:使用foreach循环添加【不推荐使用】
第二种,使用reduce函数实现:
reduce((函数),初始变量接收值,类似于let i=0)
数组的长度为几,reduce中的函数部分就会调用几次。
pre
:上一次的值
cuurrent
:当前的值
使用v-model,但需要get()方法和set()方法同时使用
6、清除已完成的todo
7、总结TodoList案例
注意:vc中data
、props
、methods
、computed
中的名字不能重名
十一、浏览器本地存储WebStorage
首先,定义几个
button
1、location
2、session
十二、todoList案例中添加本地存储
十三、组件的自定义事件
1、自定义事件_绑定
组件的自定义事件需要子组件向父组件进行传递数据,父组件定义函数(带参),绑定在子组件上,子组件通过props去拿到父组件传递过来的函数进行调用并将参数传递出去,从而试下子——父组件之间的传递
父组件App.vue
除此之外还可以用ref去接受,并在mounted中去触发事件
子组件Student.vue
2、自定义事件_解绑
解绑哪个事件就需要在哪个事件应用的组件上绑定解绑事件
十三、事件总线
想要在兄弟组件中互相传递数据,得用到父组件,但是非常麻烦
因此,学习事件总线可以有效的传递兄弟组件间的数据
首先在main.js文件中的实例对象vm上绑定一个事件如下
第二步在兄弟组件1——Student组件中设置方法将name通过事件总线发射出去
第三步,在兄弟组件2——School组件中的bus总线上绑定事件去接收传过来的数据
十四、消息订阅与发布
1、定义:
是一种组件间通信的方式,使用于任意组件间的通信
2、使用步骤
- 安装pubsub:
npm install pubsub-js
- 引入:
import pubsub from 'pubsub-js'
- 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
- 提供数据:
pubsub.publish('xxx',数据)
- 最好在beforeDestroy钩子中,用
PubSub.unsubscribe(pid)
取消订阅
十五、nextTick
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次DOM更新结束后执行其指定的回调
- 什么时候用:当改变数据后,要基于更新后的DOM进行某些操作时,要在nextTick所指定的回调函数中执行
- 案例:在点击编辑下一任务时该任务取消焦点获取,下一任务获得焦点
十六、Vue中封装的过渡与动画
1、效果
向左向右过渡移动的效果
2、实现
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">{{msg}}</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data(){
return{
msg:'你好啊大家!',
isShow:true
}
},
}
</script>
2.1、第一种:使用动画效果实现
1、将要过渡的内容放在
<transition>
标签中,添加name
,在使用时对name
进行过渡效果添加,添加apper
表示在页面加载时开始过渡
2、在css中设置@keyframes
中的移动效果
3、利用.hello-enter-active{}
和.hello-leave-active{}
添加进入,离开的效果
<style scoped>
h1{
background-color: orange;
}
.hello-enter-active{
animation: tran 1s linear;
}
.hello-leave-active{
animation: tran 1s linear reverse;
}
@keyframes tran {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>
2.2、第二种:使用过渡方式
2.3、第三种:使用第三方库实现过渡效果
该库的官网
第一步:安装库:npm install animate.css
第二步:导入库:import 'animated'
第三步:使用:
十七、vue脚手架配置代理
1、方法一
2、方法二