初学vue.js纪录

媒介

本人刚开始进修vue.js几天,做了一些演习以后,鉴于每隔一段时间就把进修过的内容总结一番,故此写下此文章。
初学Vue.js应该进修哪些学问

1、 vue2.0

重要进修基本学问。首先是引入vue.js,能够在网页中直接引入cdn的链接,或许在当地搭建环境,运用脚手架东西帮你疾速搭建项目,详细环境搭建历程可参考官方文档。然后是基本语法,怎样衬着数据,熟习它的种种指令,前提衬着或许轮回衬着数据等。可大抵相识一下生命周期与钩子函数,能够临时跳过。接下来要进修怎样写函数,盘算属性。末了要会建立组件与援用组件,到此,你算是入门了。给两链接:
Vue.js2.0官方文档:https://cn.vuejs.org/v2/guide/
几个小演习:https://www.cnblogs.com/wuhao…

2、 vue-router

在项目开辟中,常常会用到路由,所以学会怎样构建路由是必需的。
vue-router官方文档:https://router.vuejs.org/zh-c…

3、vuex

这是一个vue中的状况治理堆栈,我们能够借助它来存储一些数据。由于它能被全局接见,所以能借助它来完成差别组件之间的通讯。

4、axios

假如你进修过jquery,它与jquery里的ajax相似,是发送要求,交互数据的东西。
github进修地点:https://github.com/axios/axios

正文

基本学问就不逐一引见了~~

生命周期
vue.js为vue实例划分了从建立到完毕种种差别的阶段,把这些阶段称为生命周期,同时在差别的历程当中也会运转一些叫做生命周期钩子的函数,我们能经由过程这些函数,在差别阶段增加响应的代码。
统共可分为8个阶段:

beforeCreate(建立前),
created(建立后),
beforeMount(载入前),
mounted(载入后),
beforeUpdate(更新前),
updated(更新后),
beforeDestroy(烧毁前),
destroyed(烧毁后)

运用举例:
beforecreate : 举个栗子:能够在这加个loading事宜
created :在这完毕loading,还做一些初始化,完成函数自实行
mounted : 在这提议后端要求,拿回数据,合营路由钩子做一些事变
beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容

盘算属性
在对某些值举行一系列逻辑算法时,虽然能直接在模板内誊写,然则模板中的逻辑代码太多会让模板太重而且难以保护,所以在此时应该运用盘算属性。
盘算属性默许只要getter,但我们还能加上setter,经由过程getter猎取一些值来举行一系列的盘算来返回值,而setter能够设置值,作用到data内里的数据。

前提衬着
在之前的编程中,要想隐蔽一个元素有4种体式格局:display:none,visibility:hidden,opacity:0,position:absolute;left:50000px;top:50000px,而在vue.js内里是运用前提衬着v-if,v-show。v-show就是掌握元素的display款式来显现隐蔽,元素老是会被衬着的,而v-if是掌握衬着与否,这就是他们的区分。

列表衬着
之前看了一点点angularjs和小顺序,发明它们都有相似的列表衬着体式格局。这类体式格局与js内里的for in轮回很像,为列表的每一项取个名字用来示意每一项,然后经由过程这个名字来接见每一项数据。假如会for in轮回那末很容易接受,只不过每一项写在{{}}里。

事宜处置惩罚与修饰符
事宜经由过程v-on指令来绑定,在js中事宜为on+事宜名,所以v-on是很好影象的。而vue还供应了异常轻便的要领来协助事宜处置惩罚,如阻挠冒泡,只须要在v-on+事宜名后运用.stop就行,而不必像原生js写一大行。修饰符还能够串连运用。在vue中有许多修饰符可协助我们削减代码量。

组件
组件实在就是提取一段代码,让它在零丁的文件中,当要运用的时刻引入就行。当某段代码大批反复的时刻它可起了大作用。组件分为部分组件与全局组件。部分组件是在某个页面须要的时刻在这个页面引入,而全局组件是在main.js进口文件中注册,别的页面不必零丁引入,能够直接运用。
部分组件引入要领:
1、简朴的组件能够直接在对应实例内里到场components项,运用键值对的情势写代码。

export default {
  name: 'App',
  components:{
      'child':{
          template:'<span>{{msg}},我叫{{name}},本年{{age}}岁了,{{sex}}</span>',
          props:['msg','name','age','sex'],
     }

}
2、复杂点的构造不方便直接用引号写,这时候可零丁写一个页面并导出,在运用的页面引入,而且取别号,在用键值对写到components里。

<template>
    <div>
        我是零丁vue文件里建立的组件
    </div>
</template>
<script>
    export default{
        name:'child',
    }
</script>

然后在要运用的页面引入,并注册:
import child from './components/child'
<script>
    export default{
        name:'dad',
        components:{
            'my-clild':child
        }
    }
</script>

全局组件:
与部分组件引入相似,还能够给主实例取名Vue,然后经由过程Vue.components的体式格局增加。

Vue.component('my-child',child)
new Vue({
  el: '#app',
  router,
  components: { App },
})

运用props在组件之间传值
子组件偶然须要动态地显现一些数据而不是直接写静态的。这时候可经由过程props来猎取父组件通报的值并写入模板,父组件可经由过程在子组件写入属性的体式格局通报数据。
不过上面的都是父组件向子组件传值,然则子组件怎样和父组件通讯?这时候就须要用到自定义事宜了,子组件可经由过程$emit来主动让本身触发一个事宜,父组件监听这些自定义事宜的称号就能够完成通讯。

插槽
偶然刻子组件内容能够还须要父组件增加,这时候刻插槽slot就派上用场了。在子组件内定义插槽能够吸收父组件写在元素之间的内容。当没有插槽的时刻这些内容完整没作用,然则有预留插槽时,内容会被嵌入子组件插槽的位置。插槽还能够有多个,这时候刻须要给插槽一个name属性,父组件的内容须要有slot属性,如许多个内容能插进去到响应的位置。

过渡
在元素举行显现隐蔽等切换时,vue为这些行动定义了6个状况:
1、v-enter 2、v-enter-active 3、v-enter-to 4、v-leave 5、v-leave-active 6、v-leave-to
须要显现过渡动画的元素用transition元素包裹,而且取个name属性。在款式里,运用name值替代上面的v,详细结果就是css3的过渡结果等。

过滤器
在把实例里data的数据衬着进模板时还能够对数据举行过滤,情势如{{msg | 过滤要领名}},在须要衬着的数据背面跟上管道符,并跟上要运用的过滤要领的称号,一个简朴的过滤功用就ok了。过滤器还能够运用多个,只须要反复管道符与要领名即可。

vuex的简朴运用
1、在目次下引入vuex模块:cnpm install vuex -S
2、在main.js中引入:import Vuex from ‘vuex’

        import store from './vuex/store'
        new Vue({
              el: '#app',
              store
        })

3、构建中心堆栈 store.js
Vuex 运用的状况 state 都应该存放在 store.js 内里,Vue 组件能够从 store.js 内里猎取状况,能够把 store 浅显的理解为一个全局变量的堆栈。
然则和纯真的全局变量又有一些区分,重要表现在当 store 中的状况发作转变时,响应的 vue 组件也会获得高效更新。
在 src 目次下建立一个 vuex 目次,将 store.js 放到 vuex 目次下:

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
       const store = new Vuex.Store({
      // 定义状况
          state: {
                  author: 'Wise Wrong'
         }
    })
    export default store

4、在组件中映照状况

computed: {
  author () {
    return this.$store.state.author
  }
}

5、修正状况
虽然直接赋值也能修正然则最好照样运用官方引荐的mutations或许actions:
《初学vue.js纪录》

首先在 store.js 中定义一个要领 newAuthor,个中第一个参数 state 就是 $store.state,第二个参数 msg 须要别的传入。
然后修正 header.vue 中的 setAuthor 要领
《初学vue.js纪录》

这里运用 $store.commit 提交 newAuthor,并将 this.inputTxt 传给 msg,从而修正 author。

如许显式地提交(commit) mutations,能够让我们更好的跟踪每个状况的变化。
而actions相似,区分在于actions能够异步实行。

心得体会
全部vue有许多的功用,我也正在探索中,此篇就写到这吧~关于新手而言,浏览官方文档是提拔的好要领,在看过以后最好照样多多演习示例,才敏捷领悟,再以后呢就多能够去网上看看诸位大神的博客啊,论坛啥的,愿望能对新入门的小伙伴有所协助~!

友谊提醒:在我第一次看vue的时刻啥也不懂,装置环境的时刻每次都要把网上的装置教程反复一遍,到厥后我才发明,由于前面几个步骤的东西都装在全局的,所以只须要装一次就行,以后只须要初始化vue项目即可。。。愿望厥后的朋侪少走弯路!

    原文作者:范洋
    原文地址: https://segmentfault.com/a/1190000013875400
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞