vue初级知识总结

从我第一篇博客的搭建环境开始，就开始学习vue了，一直想将这些基本知识点整理出来，但是一直不知如何下手，今天刚好实战了两个小demo,所以就想趁这机会将以前的一起整理出来，这是vue最基础的知识，我有附加代码，方便阅读与学习，近期还会更新我实战的两个demo ,我保证我不会拖太久的。相信我啦~

一、初始化vue项目

相信大家对vue项目的初始化已经很熟练了， vue 的官网有给出安装的步骤，如果你的电脑上已经安有node,webpack和淘宝镜像，那么你只需按官网的安装步骤进行项目的安装即可。

如果你的电脑尚未安装以上工具，那建议你看下我的第一篇博客，里面有详细的介绍呢。

二、vue的结构及生命周期

1、vue结构

app.vue是vue组件树上的最顶层

index.html是页面，vue的所有组件都会通过main.js挂载到html上才会显示

main.js中会引入需要的依赖

index.html

| --->main.js通过一个vue实例（el:"#app",此处的#app是连接index.html中的id）将所有页面挂载至页面中

app.vue

|

所有页面

2、vue的生命周期、

三、vue的基础

1.组件的创建与使用：

新建一个.vue文件作为组件，写入组件内容，template里只可以存在一个根容器。

在app.vue文件里引入组件：import  组件名 from '组件文件的路径名'，components对象里注册组件名，dom页面上加入组件渲染<组件名></组件名>

	2、组件之间的交互（重点）

		a、父组件向子组件传递数据：props,插槽（slot）

			从父组件向子组件传递数据

			在子组件里声明一个props ,接受父组件传递的数据			

		插槽的使用：

		子组件中：放一个<slot></slot>接收

		父组件：在子组件的dom渲染处通过标签传递值

		b、子组件向父组件传递数据：emit

		子组件向父组件传递数据：

父组件接受数据：

3、vue的指令

a>.vue自带指令介绍

v-bind:绑定属性,简写为：

v-on简写为@

v-if: 布尔值;  true则显示，否则不显示。操作的是dom

v-show：布尔值; true则显示，否则不显示，操作的样式

b>.自定义指令

自定义全局指令：

自定义局部指令：

自定义指令的使用：

4、vue的过渡和动画，还有修饰符 这两个知识点官网已经讲得很详细，推荐去官网学习使用。

5、vue路由的使用

在初始化项目时，将是否安装路由依赖项选为是，会自动将路由依赖安装到你的项目中（router文件）。

a>.一级路由的使用：

	路由的引入：'@'
	  创建一个文件(路由页)=>(路由配置页)引入vue-router,Vue.use(Router),引入新建的路由页，配置路径->(主页面)router-view  添加路由视口
	  <router-link :to="{path:'要跳至的路径'}"></router-link>　跳至指定页面
	  去除路由#/的方法：添加mode:"history"

在需要路处添加<router-view></router-view>路由视图

在router/index.js里配置路由页面的路径

b>.二级路由的使用：

  	１>.引入路由页
  	２>.配置路径
     	  在对应的一级路由下添加根目录 redirect:" " => 子路由都在children下添加(childred:[{},{},{}])
      	注意无需写/ ,系统默认处理二级路由的/问题,故无需再加

6、与后台数据交互（我们使用vue-resource实现）

通过cmd命令行进行vue-resource的安装npm install vue-resource –save

在main.js中引入：

请求方法的调用：

以上呢就是总结出来的小知识，当然后期会根据项目总结些常用的问题。如果有不合适的地方，还请指教。