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

声明一个组件

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

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

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

在此模板中引入即可

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

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

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