脚手架配置
脚手架文档：Vue CLI
npm config set registry https://registry.npm.taobao.org
vue.config.js配置选项：
配置参考 | Vue CLI
ref选项
ref和id类似，给标签打标识。
document.getElementById('btn');
this.$ref.btn;
父子组件间通信
App.vue 加上冒号之后，18就成了一个表达式。 传递到Student中，就可以进行运算了。
<Student name="李四" age="18"/> <Student name="李四" :age="18"/>
Student.vue，接受的数据，相当于跑到了VC中的data里边。
props:['name','age']
props:{
name:String,
age:Number,
sex:String
}
props:{
name:{
type:String,
required:true,
default:''
}
}
props收到的属性，是不建议修改的，控制台会报错的。
data(){
return{
myAge:this.age
}
}
但是将收到的属性值，赋值到新的字段中，是可以支持修改的。
引入混合js[复用配置]
mixin.js
export const hunhe = {
methods:{
showName(){
//....
}
},
mounted(){
//....
}
}
引入
import {hunhe} from '../mixin'
export default{
name:'Student',
data(){
return{
}
},
mixins:[hunhe],
}
全局混合，不建议用
import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
插件plugins
plugins.js
export default{
install(Vue){
console.log('aaa');
Vue.filter(...)
}
}
main.js 在new Vue({})上边引入
import plugins from './plugins'
Vue.use(plugins)
scoped作用域
<style lang="less" scoped> .... </style>
查看npm库版本
npm view webpack versions npm i less-loader@7
子传父组件通信-v1
App.vue
methods:{
receive(x){
}
}
<Myheader :receive="receive"/>
//==============================================================
MyHeader.vue
props:['receive'],
methods:{
add(e){
this.reveive(e.target.value);
}
}
统计数量
computed:{
doneTotal(){
let i = 0;
this.todos.forEach((todo)=>{
if(todo.done) i++;
})
return i;
}
}
const x = this.todus.reduce((pre,current)=>{
return pre+(current.todo ? 1: 0);
},0); //0是传入的初始值 {}里边的逻辑，数组有多少个，就调用多少次
第二次调用时，pre就是第一次调用函数的返回值
current就是每一个todo项
x就是计算todo项为true的统计
computed:{
doneTotal(){
return this.todos.reduce((pre,todo)=>pre+(todo.done?1:0),0);
}
}
浏览器的本地存储
localstorage也可以用在移动端开发中
**组件的自定义事件通信**
1、通过父组件给子组件传递函数类型的props实现，子给父传递数据
2、绑定自定义事件传递给父组件
//自定义事件,给Student所在的vc绑定事件
App.vue
<Student v-on:pshdhx="demo"/>
methods:{
demo(name){
console.log('demo被调用了',name)
}
}
Student.vue
<button @click="sendStudentName">把学生名传递给app</button>
methods:{
sendStudentName(){
this.$emit('pshdhx',this.name) //触发Student组件实例的pshdhx事件
}
}
3、使用ref来替换
//使用ref来替换 <Student v-on:pshdhx="demo"/> <Student @pshdhx.once="demo"/>
App.vue
<Student ref="student"/>
methods:{
getStudentName(name,...params){ //params是一个数组
console.log('App.vue收到了Student.vue传递过来的name值',name,params);
}
}
mounted:{
this.$refs.student.$on('pshdhx',this.getStudentName);
this.$refs.student.$once('pshdhx',this.getStudentName);
}
解绑自定义事件
//方法区域
unbind(){
this.$off('pshdhx'); //只适用于解绑一个
this.$off(['pshdhx','demo2']); //用数组来解绑多个自定义事件
this.$off();//解绑所有
}
箭头函数没有自己的this，所以就往外找。
自定义组件要想使用Vue事件
<Student @click.native="showInfo"/> //如果不加.native，它就是一个自定义事件。
全局事件总线
任意组件之间的通信。
傀儡VueComponent，就是x
//App.vue
const Demo = Vue.extend({})
const d = new Demo();
Vue.prototype.x = d;
//School.vue
mounted(){
this.x.$on('hello',(data)=>{
console.log('我是school组件，收到了数据',data);
})
}
//Student.vue
methods:{
sendStudentName(){
this.x.$emit('hello',666);
}
}
构建傀儡组件2 ,就是x
new Vue({
el:'#app',
render:h=>h(App),
beforeCreate(){
Vue.prototype.x = this
}
})
x就是$bus了。
$bus很累了，所以销毁组件的时候，就要关闭
beforeDestory(){
this.$bus.off('hello');
}
消息订阅与发布
npm i pubsub-js
School.vue
import pubsub from 'pubsub-js'
mounted:{
this.pubid = pubsub.subscribe('hello',function(name,data){
console.log('有人发布了hello消息，hello的回调执行了',data)
})
}
Student.vue
import pubsub from 'pubsub-js'
methods:{
sendStudentName(){
pubsub.publish('hello',666);
}
}
取消订阅，订阅之后，返回了一个id，需要销毁。
beforeDestory(){
pubsub.unsubscribe(this.pubid);
}
判断对象有没有这个属性
todo.hasOwnProperty('isEdit')
$nextTick
点击编辑按钮，input获取焦点：
<input ref="inputTitle"/>
this.$ref.inputTitle.focus(); settimeout
this.$nextTick(function(){
//会在dom节点更新之后，才会触发
})
动画效果
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<!-- <transition name="test" :appear="true"> 刷新时，也能有动画效果 -->
<transition name="test" appear>
<h1 v-show="isShow" class="come">你好呀</h1>
</transition>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Test",
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
/*借助动画效果去实现过度*/
h1{
background-color: aqua;
}
/*入场动画 名称固定 配合transition 使用*/
/*.v-enter-active{*/
.test-enter-active{
animation: pshdhx 1s ;
}
/*离场动画，名称固定*/
/*.v-leave-active{*/
.test-leave-active{
animation: pshdhx 1s reverse;
}
/*定义动画*/
@keyframes pshdhx {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style><template>
<div>
<button @click="isShow = !isShow">显示/隐藏2</button>
<!-- <transition name="test" :appear="true"> 刷新时，也能有动画效果 -->
<transition name="test2" appear>
<h1 v-show="isShow" class="come">你好呀2</h1>
</transition>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Test2",
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
/*接触过度效果去实现过度*/
h1{
background-color: aqua;
}
/*进入的起点、离开的终点*/
.test2-enter,.test2-leave-to{
transform: translateX(-100%);
}
.test2-enter-active,.test2-leave-active{
transition: 0.5s linear;
}
/*进入的终点，离开的起点*/
.test2-enter-to,.test2-leave{
transform: translateX(0);
}
</style><template>
<div>
<button @click="isShow = !isShow">显示/隐藏3</button>
<transition appear
name="test"
enter-active-class="animate__animated animate__swing"
leave-active-class="animate__animated animate__backOutUp"
>
<h1 v-if="isShow">你好呀3</h1>
</transition>
</div>
</template>
<script>
import 'animate.css';
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Test3",
data() {
return {
isShow: true
}
}
}
</script>
<style scoped>
/*接触过度效果去实现过度*/
h1 {
background-color: antiquewhite;
}
</style>
