从零开始学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

从零开始学Vue(一)—— Vue.js 入门_第1张图片

三者的关系: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

从零开始学Vue(一)—— Vue.js 入门_第2张图片

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

在这里插入图片描述

项目目录解析:

从零开始学Vue(一)—— Vue.js 入门_第3张图片

5、初试Vue.js

从零开始学Vue(一)—— Vue.js 入门_第4张图片

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.js 入门_第5张图片

什么是生命周期?

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

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

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

生命周期方法?

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

创建期间生命周期方法

    beforeCreate:
    created:
    beforeMount
    mounted

运行期间生命周期方法

	  beforeUpdate
	  updated

销毁期间的生命周期方法

  beforeDestroy
  destroyed

从零开始学Vue(一)—— Vue.js 入门_第6张图片

8、在vue中使用组件

基本组件四步骤
1、写好组件

2、在页面种引用组件

3、在components中声明组件

4、在页面上使用

从零开始学Vue(一)—— Vue.js 入门_第7张图片

组件间的传参

1、父组件传给子组件

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

从零开始学Vue(一)—— Vue.js 入门_第8张图片

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

从零开始学Vue(一)—— Vue.js 入门_第9张图片

2、子组件传给父组件

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

从零开始学Vue(一)—— Vue.js 入门_第10张图片

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

3、 兄弟组件间传值(或者夸组件传值)

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

Vue.prototype.bus = bus;

从零开始学Vue(一)—— Vue.js 入门_第11张图片

传值
在这里插入图片描述

接收值:
从零开始学Vue(一)—— Vue.js 入门_第12张图片

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
    

    你可能感兴趣的:(Vue)