vue总结

vue知识点小结

 vue语法不用加：（v-for v-if） 
 绑定动态数据需要加：（：key :class :style）

循环的时候列表数据不一致
简单数据
<template v-if="list.ground == '' ? true : false">
</template >

<template v-else>
</template >

复杂数据
<template ：is=""></template >

类（class）
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>
<div v-bind:class="[activeClass, errorClass]"></div>      （数组）
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>    （三元）



数据绑定（对象）
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
:style="{backgroundColor:lingqu,display:successFlag}"
:style="{backgroundImage: 'url(' + BtnImg + ')', backgroundSize:'cover'}"

条件渲染：v-if="awesome"
列表渲染：v-for="item in items" v-bind:key="item.id"

watch监听属性能得到 newQuestion, oldQuestion 即是旧值和新值
this.$set(this.student,"age", 24)
this.$delete(this.student,"age")


子父传参
this.$emit('fromChild', this.child) 触发
@fromChild="onFromChild"



同级 兄弟 传参
eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线
eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线
用于把这两个方法牵引起来的vm代表什么呢？其实这个类似于我们的全局变量VUE
如果不用原型链或者bus中央事件总线两个办法不牵连 即直接用this.$on和this.$emit不在同个this不相关
子父组件 父引子有引入是同个this
兄弟无

在mian.js中
Vue.prototype.bus = new Vue() //这样我们就实现了全局的事件总线对象
组件A中，监听事件
this.bus.$on('updata', function(data) {
console.log(data) //data就是触发updata事件带过来的数据
})

组件B中，触发事件
this.bus.$emit('updata', data) //data就是触发updata事件要带走的数据



继承全局 vue 先触发后监听
Vue.prototype.bus = new Vue()
this.bus.$emit() //触发
this.bus.$on() //监听


vue-router
$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象
this.$router 实际上 就是全局 路由对象 任何页面 都可以 调用 push(), go()等方法 跳转前进后退
this.$route 表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等属性； 信息
vue之this.$route.params和this.$route.query
传参可以使用params和query两种方式。
使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。

使用query传参使用path来引入路由。

params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。

二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。




方法：methods       计算属性： computed
计算属性是基于它们的响应式依赖进行缓存的 如果你不希望有缓存，请用方法来替代。
侦听属性:watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }}
通常更好的做法是使用计算属性而不是命令式的 

class三元：<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
class数组：<div v-bind:class="[activeClass, errorClass]"></div>
style对象：<div v-bind:style="styleObject"></div>
style数组：<div v-bind:style="[baseStyles, overridingStyles]"></div>

条件渲染： （这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可）
<div v-if="type === 'A'"  key="key-name"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>
or :  <h1 v-show="ok">Hello!</h1>

v-show 不支持 <template> 元素，也不支持 v-else。

v-if 是“真正”的条件渲染 会销毁和重建。      v-show 基于 CSS 进行切换。

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。



表单绑定：<input v-model.trim.number="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

组件：组件的data 必须是一个函数（每个实例可以维护一份被返回对象的独立的拷贝）

组件局部注册：Vue.component('my-component-name', { /* ... */ })

组件全局注册：Vue.component('my-component-name', {  // ... 选项 ... })

混入：

var myMixin = { 
       created: function () {
                    this.hello()       
              },
        methods: {
               hello: function () {
                 console.log('hello from mixin!')
                                   } 
                     } 
                   } 

// 定义一个使用混入对象的组件
var Component = Vue.extend({ mixins: [myMixin] })
var component = new Component() // => "hello from mixin!"


访问元素 & 组件
this.$parent.msg   访问父级（上一级）的组件属性msg
this.$root.msg   访问父级（根元素）的组件属性msg​​​​​​
this.$refs.mgs    访问子级的组件属性msg

this指向组件的实例。
this.$el指向当前组件的DOM元素。(#app)



DOM操作。
<button ref="btn">获取ref</button>
this.$refs.btn.style.backgroundColor="#ff0000"

dom查找（dom）
this.$refs.myh2.style.color="red"
this.$el 和 dom节点是在mounted中才会出现的，在created的时候是没有的所以我们引用的时候
this.$refs.wheel.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
ref="wheel"


过渡动画
<transition name="fade">
默认前缀-v  现在是 v-enter 会替换为 fade-enter。
.v-enter：定义进入过渡的开始状态	.v-leave：定义离开过渡的开始状态
.v-enter-to：定义进入过渡的结束状态	.v-leave-to：定义离开过渡的结束状态
.v-enter-active：定义进入过渡生效时的状态	.v-leave-active：定义离开过渡生效时的状态


//一个命名为fade的<transition>标签包裹着类名为h的<div>
<transition name="fade">
    <div class="h" v-if="show">hello world</div>
</transition>

<style>
    /* div的初始状态*/
    .h {
        width:100px;
        height: 200px;
        background-color: aqua;
    }
-----------------------------------------------------------------------------------------
    /**
    * 定义进入动画和退出动画的过程
    * 代表关注的是height的变化，动画的时间是5
    */
    .fade-enter-active, .fade-leave-active {
        transition: height 5s;
    }

-----------------------------------------------------------------------------------------       
    /* 定义进入动画的初始状态*/
    .fade-enter {
        height: 0;
    }

    /* 定义进入动画的结束状态*/
    .fade-enter-to {
        height: 200px;
    }
-----------------------------------------------------------------------------------------

    /* 定义离开动画的初始状态*/
    .fade-leave {
        height: 200px;
    }

    /* 定义离开动画的结束状态*/
    .fade-leave-to {
        height: 0;
    }
</style>

 

Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

vm.$set(vm.items, indexOfItem, newValue)           
 data:{
   return{
        list:[1,2,3]
   }
}
this.$set(this.list,0,7)
this.$delete(this.list,1)
console.log(this.list);//[7,3]

修饰符：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<input v-on:keyup.13="submit">

 

表单

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy.trim="msg" >

事件eventBus

A.vue
import bus from './../lib/bus.js'
beforeDestory(){
bus.$emit('busEvent', '我是参数')
}


B.vue
import bus from './../lib/bus.js'
 /*
  如果要触发视图即this.message的话必须使用箭头函数 因为function(){}的形式就是指向bus.js的实例不会 
  去触发试图更新
*/
created(){
bus.$on('busEvent', (res) => {
      console.log('我被触发了' + res + num)
    })
}

beforeDestroy(){
     bus.$off('busEvent')
 }

补充：
在你两个页面A跳B的时候 当你从页面A到页面B跳转的时候，发生了什么？首先是先B组件先created然后beforeMount接着A组件才被销毁，A组件才执行beforeDestory，以及destoryed.

所以，我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的$on事件已经触发了
所以可以，在beforeDestory的时候，$emit事件。

总结：
1、在created函数监听on
2、在beforeDestory解绑off
3、在beforeDestory触发emit

遇到的问题集合

前进刷新，后退不刷新的问题
方案一 全局解决问题
keep-alive组件缓存不刷新
<keep-alive include="list">
     <router-view/>
</keep-alive>
不需要缓存的页面router配置
   {
          path: 'user',//用户管理
          component: User,
          meta: {
            requireAuth: true,
            keepAlive: false, //此组件不需要被缓存
          },
入口
   <keep-alive>
          <router-view v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件，比如 Home！ -->
          </router-view>
        </keep-alive>
 
        <router-view v-if="!$route.meta.keepAlive"></router-view>
          <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
动态修改

router.beforeEach((to, from, next) => {
 if(to.path === '/filelist' && from.path === '/fileview'){
        to.meta.keepAlive = true;  // 让 列表页 缓存，即不刷新
        next();
      }else {
        to.meta.keepAlive = false;  // 让 列表页 即不缓存，刷新
        next();
      }
})
方案二 watch监听需要重新请求的每个页面的$route

vue3新特性

solt
子组件内如果没有用<solt>插槽的话这段话是不会渲染的 有则反之 有带name则是具名插槽

父组件
<child>
<div slot="show">
我是solt的内容
</div>
</child>

子组件
child.vue
<template>
<slot name="show"></slot>
</template>


作用域插槽  slot-scope
作用域插槽，是为了从父组件中，通过使用注册的子组件标签，并对其属性slot-scope进行定义，从而使用子组件中绑定的数据。
作用域插槽是从组件传值然后再给solt传值 而不是直接solt传值  
this.$emit等等也可以达到slot-scope 但是this.$emit并没有合适的生命周期去调用触发
子组件
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <slot :todo="todo">
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array
    }
  }
}
</script>

父组件
<template>
  <todo-list :todos="todos">
    <template slot-scope="slotProps">
      <span v-if="slotProps.todo.isComplete">✓</span>
      <span>{{slotProps.todo.text}}</span>
    </template>
  </todo-list>
</template>

<script>
import todoList from './todoList'
export default {
  data () {
    return {
      todos: [
        {
          id: 0,
          text: 'a',
          isComplete: false
        },
        {
          text: 'b',
          id: 1,
          isComplete: true
        }
      ]
    }
  },
  components: {
    todoList
  },

}
</script>

深度作用选择器
父组件修改定制第三方组件或者子组件的样式。
深度作用选择器( >>> 操作符)可以助你一臂之力。
如果是less  则用 /deep/ 代替 >>> 操作符

inheritAttrs
当父组件传入了很多props但在子组件没被声明的时候 会在根组件显示值 在子组件上声明inheritAttrs: false就能取掉显示

props父子组件通信 
子组件接受值
 props: {
    data: {
      type: Object
    }
  }
父组件 :data = data

this.$attrs
vm.$attrs是组件的内置属性，值是父组件传入的所有prop中未被组件声明的prop(class和style除外)。
如果用v-bind="$attrs"传值则是把当前组件没有声明的props传递给子组件以及孙组件

this.$listeners
this.$listeners能让父组件和子孙组件通信 在子组件通过v-on="$listeners"将父组件的事件绑定到孙组件的上面 通过 this.$emit("up");触发父组件的 v-on:up="upEvent"

事件触发和事件监听
this.$emit("up");触发父组件的 v-on:up="upEvent"

provider/inject
在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量
父组件
provide() {
      return {
         for: "demo"
     }
}
provide不是必须函数，定义为函数返回对象，可以实现响应，直接定义为对象不会响应
孙组件
inject: ['for']
data(){
demo:this.for
}
this.demo 输出'demo'

监听错误
Vue.config.errorHandler = (err, vm, info) => {
  console.log(err, vm, info)
}

this.nextTick(()=>{})
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

axios拦截器 

import axios from 'axios'

// 配置默认的host,假如你的API host是：http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
    return Promise.reject(error)
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});