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风格组件