1.Vue常用的指令

v-bind

v-bind用于为html的属性绑定数据,如:

<p :title="ptitle"></p>

data () {
    return {
      ptitle: 'this is title'
    }
  },

:为v-bind的简写,以上将data的ptitle绑定到了p标签的title属性上

v-if和v-show

v-if和v-show都是用于对是否显示该元素的控制,区别在于v-if="false"则元素不进行渲染,而v-show="false"仅仅是将元素隐藏

v-for

v-fory可用于循环渲染,其中item为自定义名称,用于数据的读取,items为data中自己定义的数据名,index为数据索引,从0开始。v-for为key绑定具有唯一性的数据,如index

<ul>
  <li v-for="(item,index) in items" :key="index"></li>
</ul>
data () {
  return {
    items: [1, 2, 3, 4, 5]
  }
}

v-on

v-on用于绑定事件,常见的绑定事件如v-on:click=""

<div @click="fun1()">send msg to parent</div>
methods: {
  fun1 () {
    alert('click')
  },
}

@为v-on的简写

2.Vue中获取dom节点

在vue中获取dom节点需要先为元素添加ref属性,然后在script中使用$refs获取dom

<div class="children" ref="children"></div>
fun1 () {
  this.$refs.childrn.style = 'background-color: #000'
}

3.Vue组件通信

父组件向子组件传值

在父组件中引用子组件,并绑定参数,在子组件中使用props接收相同的参数

parent.vue

<parent>
    <child :child-msg="msg"></child>
</parent>

data(){
    return {
        msg: [1,2,3]
    };
}

children.vue

props: ['childMsg']

子组件向父组件传值

在子组件中通过emit发送消息,在父组件中使用v-on绑定参数

children.vue

<div @click="testClick"></div>
methods: {
    testClick() {
        this.$emit('test','123');
    }
}

parent.vue

<div>
    <child @test="change"></child>
</div>
methods: {
    change(msg) {
        this.msg = msg;
    }
}

兄弟组件间通信

借用中间组件作为桥梁:

window.eventBus = new Vue()

 

brother1.vue

 

<div @click="eve"></div>
methods: {
    eve() {
        window.eventBus.$emit('change','hehe'); //Hub触发事件
    }
}

 

brother2.vue

 

created() {
    window.eventBus.$on('change', (res) => { //Hub接收事件
        this.msg = res;
    });
}

4.Vue-router

vue-router是官方提供的一个路由框架,用于路由间的跳转。

以下为个人理解,仅供参考。

router-view

router-view用于渲染匹配到的路由,将其渲染到当前的<router-view>

通俗来讲,router-view类似于一个占位工具,它会将当前路由下的组件填装进来,用于显示

router-view外可以包裹一层keep-alive,使之在返回过程中不重新读取数据

router-link

router-link类似于a标签,用于路由跳转,router-link有以下属性

to:匹配路由地址,如"/index",其中/可省略,或者匹配路由名name,如(:to={name: 'Index'})

replace:设为true可以使点击返回不返回路由

tag:将router-link渲染为什么标签,默认为a标签

active-class:设置该路由被选中时的样式

router.push

通常进行路由跳转使用的是这种方法:

为按钮绑定click事件,使用this.$router.push()

goSlot () {
  this.$router.push('/testslot')
}

路径前有/则是绝对路径,没有/则是相对路径

路由配置

在router文件夹下的index.js配置路由,以我的一个index.js文件进行理解:

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/parent'
import PComponent1 from '@/components/p-component1'
import PComponent2 from '@/components/p-component2'
import ParentBrother from '@/components/parent-brother'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/parent'
    },
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
      children: [
        {
          path: 'pcomponent1',
          name: 'PComponent1',
          component: PComponent1
        },
        {
          path: '/pcomponent2',
          name: 'PComponent2',
          component: PComponent2
        }
      ]
    },
    {
      path: '/parentbrother',
      name: 'ParentBrother',
      component: ParentBrother
    }
  ]
})

一个路由包括的基本属性为path和component,path即url的一部分,component即对应path显示的组件.

name为路由的别名,亦可用于路由跳转

redirect为重定向,可以将当前路由重定向到另一指定路由

children为子路由,即嵌套路由,即可以在当前的router-view内的组件中配置router-view

5.axios

使用axios获取本地json数据

getJson () {
      this.$http.get('../../static/test.json')
        .then(function (res) {
          console.log(res)
        })
        .catch(function (error) {
          // handle error
          console.log(error)
        })
    }

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐