Vue.js 学习总结

Vue学习记录

数据绑定

v-model:数据双向绑定

v-text:数据展示

v-html:数据含有html将会解析

v-bind:绑定数据属性

注：v-bind 非常常用，Vue缩写 ：xxx

v-on:绑定事件

注：v-on 绑定的事件，可以在Vue内置方法methods中进行逻辑处理 缩写：@xxxx

逻辑控制

v-if:接受一个boolean值来控制是否显示

v-show：与v-if类似

v-if vs v-show ： 区别就是v-show通过display属性来控制是否显示,v-if 通过boolean值来控制显示

v-for: 循环条件

内置属性方法

data:数据绑定的数据都要在data里面声明

methods:v-on绑定的方法可以在这里面进行逻辑控制

compute:能够把data声明的属性进行计算

Vue组件

1. 声明一个组件

  Vue.component('my-component',{template:'<p></p>'})

1. 在html里面声明这个组件即可

  <div id='app'>
    <my-component></my-component>
  </div>

1. 在此模板中引入即可

子组件与父组件之间的通信

子组件向父组件通信（自定义事件）

通过$emit来向上传递事件

  <my-component @send-to-parent='hello(param)'></my-component>

父组件：

  methods:{
    hello:function(param){
      //todo
    }
  }

子组件：

  somemethod:function(){
    this.$emit('send-to-parent',param)
  }

父组件向子组件传递事件

通过props属性来接收这个参数

  <my-component send-to-child='hello my son'></my-component>

子组件：

  props:[
    'send-to-child' //这里指定之后就可以使用了
  ]

路由(vue-router)

  <div id='app'>
    //挂载在app下的组件，符合路由规则，则显示在router-view中
    <router-view></router-view>
  </div>

路由配置：

  //1.书写两个组件
  const Foo = { template: '<div>foo</div>' }
  const Bar = { template: '<div>bar</div>' }

  //2. 路由表
  const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]

  //3. 创建路由
  const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
  })

  //4. 挂在使用路由
  const app = new Vue({
    router
  }).$mount('#app')

动态路由

使用占位符来匹配路由表

    const routes = [
      //这里匹配 /foo/1
      { path: '/foo/:id', component: Foo }
    ]

注：其中参数保存在this.$router.params.id

路由嵌套

上面路由配置例子：

   //1.书写两个组件
    const Foo = { template: '
          //这里又嵌套了一个<router-view>
          <div id='foo'>
              <router-view></router-view>
          </div>
          ' }
    const Bar = { template: '<div>bar</div>' }

    //2. 路由表
    const routes = [
      //这里新增一个children 子组件将显示在foo下的<router-view>中
      //地址匹配/foo/yourpath
      { path: '/foo', component: Foo,children:[ path:/yourpath, component:yourcomponent] },
      { path: '/bar', component: Bar }
    ]

    //3. 创建路由
    const router = new VueRouter({
      routes // （缩写）相当于 routes: routes
    })

    //4. 挂在使用路由
    const app = new Vue({
      router
    }).$mount('#app')

以上就是我学习Vue总结出来的常用方法函数指令

• 一个比较好的学习vue的例子 基于Vue的一个后台管理模板

• vue官方文档 Vue官方文档

• Element UI 饿了么组件库

• Vue Meterial Vue Material风格组件