前端学习笔记Vue篇（1）

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;
    }
}

兄弟组件间通信

创建一个eventHub组件用于数据的接收和传递

brother1.vue

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

brother2.vue

created() {
    let Hub = new Vue()
    Hub.$on('change', () => { //Hub接收事件
        this.msg = 'hehe';
    });
}

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文件夹下的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)
        })
    }

前端学习笔记Vue篇（1）

猜你喜欢