1.vue基础

Vue 是一个mvvm 的渐进式框架。Angular 是一个mvc的。所以vue的重点更偏向于mv

他的使用方式

大家会发现里面带有大量的$的属性。

学习vue的指令

V-for  用于便利data中的数组

 

V-bind 用于动态绑定元素的属性 简写 :  如:class=”aa”

 

 

V-on 用于绑定元素的事件  v-on简写 @如 @click=“fn()”

 

V-if=”aa”

V-if 当值为true元素显示 值为false 元素消失 这个是Dom操作

 

V-model=”ss” 实现双向数据绑定，主要针对表单

 

补充 事件的修饰符

事件在操作的时候，会出现一些问题，冒泡和捕获。

V针对这些问题 做了一些修改 提出了一些修饰符 在事件后面加个点.写上对应得修饰符就OK了

 

V-html 跟{

{}} 

2，组件

 

组件 component

 

Vue本身就是一个大组件 根组件 其他的组件都是他的子组件。

 

组件三部曲

 

第一步 定义组件

 

第二步 注册组件

 

第三部 调用组件

 

组件模板： 注意 每个模板必须且只能有一个顶层div

 

嵌套组件

嵌套组件 首先 搞清父子关系 然后在老实的按照组件三部曲走。

组件的生命周期 (钩子函数)

因为组件本身没有这个东西，是我们人为创造的，那么就会出现一个从无到有的过程，这个过程叫生命周期，

三个步骤六个过程

Created  创造 beforeCreated  created

Mounted 加载 beforeMounted mounted

Destroy  销毁 beforeDestroy destroyed

 

 

 

动态组件

组件通信

父组件将数据传递给子组件

子组件给父组件传递信息 （自定义事件）

Vue 给我们提供了自定义事件的方法$emit(参数1,参数2) 参数1 是事件名 参数2是数据

父传子 还是子传父 这种组件的数据通信只适合于中小型项目。如果出现大量数据处理，

我们就需要一个状态机专门来管理这些数据，

vuex

如何子传父，如何父传子。父组件如何去获取子组件里面的数据和方法？

Ref 是父组件获取当前下的子组件的实例对象。

第一步 需要给要获取的子组件标签上加 ref=”” 属性

第二步 可以在控制台 输出 this.refs  会发现这是由ref构成的一个集合

第三部  该干嘛干嘛

 

路由 router

 

Vue路由 我们分成两块

Html中的的书写格式

 

是我们路由配置模块   定配实挂（定义组件 配置路由 实例化路由  挂载对象的组件下）

在实例化的时候，我们的路由有两种，一种默认的hash路由，还有一种是history。

History就是通过path的感觉

 

路由补充的

 

结果是

 

传参

路由嵌套

分两部分