vue小总结

v-bind:title=" "    绑定属性，可以直接用:title=””代替

v-on:click=" "      绑定事件，可以用@click=””代替

v-if=" "           条件渲染

v-for="(item, index) in todos"  列表渲染

v-model=" "        双向绑定

v-once                 只执行一次

v-html                 双大括号会将数据解释为普通文本， 而非HTML代码， 为了输出真正的HTML，要使用v-html

自定义组件

Vue.components('todo-item', {

    template: '<li>我是自定义组件的内容</li>'

})

创建一个dotoItem的组件的实例

<todoItem></todoItem>

引用组件

import content from "./content" //先要引入组件
components: {
     content //将组件写入模板内才生效
}
<content></content> //使用组件

父子传值

在父组件中的子组件上 :title = "title"

在子组件 export default中 props:['title']

子组件中使用 {{title}}

方法中 this.title

接收多个内容 可以在props中用逗号隔开

子组件触发父组件方法

父组件定义方法如 init(){}  并且在父页面的子组件上@init=init

子组件中$emit('init', data) 触发即可

vue中操作dom元素

<div ref="box">我是ref的值</div>

获取div的文本 this.$refs.box.innerHTML 不是this.$ref

改变div的文本 this.$refs.box.innerHTML = "我是ref的新值"

***也可以通过给子组件ref 去调用子组件的方法如下：

<chilid ref="child"></child>

this.$refs.child.init()

v-if 和 v-show的区别

1.v-if 通过条件来判断添加和删除元素 v-show是通过条件判断元素是否显示或隐藏

2.v-if是有惰性的，如果初始条件为假，则直接什么也不做，只有在条件变为真时才开始局部编译

v-show是在任何条件都被编译 然后被缓存， 而且dom元素保留，即使为假值， 在后台仍然可以看到dom元素已经被渲染

3.v-if适合在条件不太可能变化时使用，v-show 适合频繁切换

4.v-if后面可以跟v-else或者v-else-if, 但是v-show不可以

router-link中的tag属性

例如 <router-link to='/home'>首页</router-link>

<router-link to='/center' tag='li'>中心</router-link>

渲染后

<a>首页</a>

<li>中心</li>

tag可以赋值成为我们想要的任意标签

路由监听

watch:{
  $route(to,from){
    console.log(to, to.path)
  }
},
或者
watch: {
  $route: {
    handler(val, oldVal){
      console.log(val)
    },
    // 深度观察监听
    deep: true
  }
},
或者
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path)
  }
}
或者
beforeRouteEnter(to,from,next){
    console.log(to, from)
}

路由守卫

1、全局守卫

router.beforeEach((to,from,next)=>{})
to：进入到哪个路由去

from：当前导航正要离开的路由

next：函数，决定是否展示你要看到的路由页面。
如下：全局js文件中设置全局守卫

router.beforeEach((to,from,next)=>{
  if(to.path == '/login'){
    next();
  } else {
    alert('请先登录');
    next('/login');
  }
})

2、组件内守卫

beforeRouteEnter(to,from,next){next()}

*在渲染该组件的对应路由被 confirm 前调用

 *不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建

*可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate (to,from,next){next()}

*在当前路由改变，但是该组件被复用时调用

beforeRouteLeave(to,from,next){next()}

*导航离开该组件的对应路由时调用

*离开守卫通常用来禁止用户在还未保存修改前突然离开

3、路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

详细可查看官网导航守卫 | Vue Router

动态绑定样式  :style="{height: height - 134 + 'px'}"

动态添加类名  :class="item.read_time === 0 ? 'row-msg unread-text' : 'row-msg'"

tooltip换行显示内容

<el-tooltip class="item" placement="bottom" effect="light">
    <div v-html="item.content"></div>
    <div v-html="item.content" slot="content"></div>
</el-tooltip>

后台返回数据格式：

效果如图：

阻止冒泡： @click.stop 即可 

 from表单校验 

注意：model和数据绑定的对象要一致 否则校验不通过

添加合计后报错处理

Cannot read properties of null  (reading 'map')

解决方法

 改为

el-table 样式错乱

解决方法：

给表格添加唯一key即可

vue获取元素的位置并赋值给另一个元素

this.$refs.completion.$el.style.top = e.target.getBoundingClientRect().top + 'px'
this.$refs.completion.$el.style.left = e.target.getBoundingClientRect().left + 'px'

*** $el 不加获取不到元素的style