从零开始学Vue（一）—— Vue.js 入门

1、什么是vue.js

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。它的作者是位中国人–尤雨溪（EvanYou).

它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的API。

很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。

2、Vue的优点

 1、 小而简单,轻量级框架,上手容易,简单易学,便于与第三方库或既有项目整合
 
 2、只关注视图层， 它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
 
 3、Vue封装了大量的组件,可以直接使用,简便而而美,省去了大量的Js代码.(有字体\主题\各种表单,表格,图标,按钮,提示
 框,导航栏等等)
 
 比如：Element  antd  vant

3、vue中的 mvvm模式

  MVVM - Model View ViewModel，数据，视图，视图模型
  
 三者与 Vue 的对应：view  对应  template，vm 对应  new Vue({…})， model 对应 data

三者的关系：view 可以通过事件绑定的方式影响 model，model 可以通过数据绑定的形式影响到view，viewModel是把 model 和 view 连起来的连接器

4、vue创建项目

1、首先：先从nodejs.org中下载nodejs

2、安装vue-cli   npm install vue-cli -g      //全局安装 vue-cli   （查看vue-cli是否成功，不能检查vue-cli,需要检查vue     vue  list）

3、vue init webpack  ”项目名称“   vue init webpack dome

现在已经创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：

项目目录解析：

5、初试Vue.js

6、vue的基本指令

1、 v-model  在表单元素上实现双向绑定

2、v-if指令   条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值

3、v-show指令  条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有			当v-if      的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值

4、v-else指令   可配合v-if或v-show使用，v-else指令必须紧邻v-if或v-show，否则该命令无法正常工作。

5、v-for指令   循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似，语法如下：

		 v-for = "（item，index ）in items"
		 
6、v-bind指令    给DOM绑定元素属性，语法如下

   v-bind:argument="expression"   简写   :   如 :class="expression"。
   
 7、 v-on指令    用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click="doSth"

    v-on指令可以缩写为@符号。如：@click="doSth"。 

7、vue的生命周期

什么是生命周期?

简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程

Vue实例有一个完整的生命周期，

开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程

生命周期方法?

	Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法
	
	生命周期钩子 = 生命周期函数 = 生命周期事件

创建期间生命周期方法

    beforeCreate:
    created:
    beforeMount
    mounted

运行期间生命周期方法

	  beforeUpdate
	  updated

销毁期间的生命周期方法

  beforeDestroy
  destroyed

8、在vue中使用组件

基本组件四步骤

1、写好组件

2、在页面种引用组件

3、在components中声明组件

4、在页面上使用

组件间的传参

1、父组件传给子组件

父组件准备一个数据，通过自定义属性给子组件赋值，进行传递

在子组件中通过 props 属性来接收参数

2、子组件传给父组件

 在子组件准备一个数据，通过 this.$emit('自定义事件', '参数'),进行传递。this.$emit 相当于
 要执行子组件的自定义事  件 ，并且传入参数

 在父组件中给子组件注册好自定义事件，并且实现这个方法，就可以得到参数了。

3、 兄弟组件间传值（或者夸组件传值）

 新建一个js文件作为兄弟组件间传值的中转站（new 一个vue）
 
然后再mian.js  引入 
	
import bus from './utlis/bus' //同组件传值   

Vue.prototype.bus = bus;

传值

接收值：

9、vue2.0路由传参

vue-routerCDN地址：https://unpkg.com/[email protected]/dist/vue-router.js

vue-router下载地址：https://github.com/vuejs/vue-router/tree/dev/dist

1、现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。

方案一、

get(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/index/${id}`,
        })

路由对应配置

{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

获取参数用

	$route.params.id

方案二、

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

	this.$router.push({
	          name: ''Index",
	          params: {
	            id: id
	          }
	        })

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{
     path: '/index',
     name: 'Index',
     component: Index
   }

获取参数用

		$route.params.id

方案三、

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
     path: '/index',
      query: {
        id: id
      }
    })

对应路由配置：

{
     path: '/index',
     name: 'Index',
     component: Index
   }

对应子组件: 这样来获取参数

$route.query.id