vue基础入门学习文档

前言看了无数篇阮一峰、廖雪峰大牛们的博客，也想尝试着写一篇像他们一样通俗易懂的Vue入门的文章。当然本人也是入门小白一个，关于高深层次的技术性东西自己也不是参悟的很透彻。不过倒是可以与大家一起分享一下自己踩坑以及关于Vue必学的一些最基础方面的知识。Vue作为目前前端开发中三大框架之一，是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。Vue.js是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js；同时比起React+Redux相对复杂的架构，Vue.js更加轻量级也更加容易上手，是初创项目的首选前端框架。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。并且作者是华人的关系，Vue拥有着对华人开发者最友好的api文档和官方教程。一、安装对于没有接触过es6和webpack的同学来说，不建议直接用官方的脚手架vue-cli构建项目，直接引用<scriptsrc="/npm/vue/dist/vue.js"></script>即可。通过webpack来构建项目步骤如下：.安装Node，下载地址：/en/或者/.安装vue-cli，终端输入：npminstallvue-cli-g.初始化项目（即构建项目），vueinitwebpackvue-test,后面名字（vue-test）是本次项目的名字。.根据终端提示逐步往下进行。当进行到是否要安装vue-router时，点击Y，因为后面要用，出现是否语法检测（UseESLinttolineyourcode?）我们点击N。这个很棘手，因为语法检测非常严格，有时候甚至你多写或者在符号前加空格，他都会报错。空行也是如此，本人就被它折磨过，甚至最后直接重新开始构建一个新的项目。.其余的命令为：“是否安装单元测试工具”以及“是否需要端到端测试工具”，依据个人情况而定选择是否安装。.到此步，一个项目便安装完成了。进入项目cdvue-test,安装依赖npminstall,一般系统会自动帮你安装好了依赖，这里可以选择不用执行此命令。.开启本地服务npmrundev,在http://localhost：8080中看到vue的一个介绍就表明整个项目构建成功。二、起步声明式渲染老样子，先来一个HelloWorld，在src/component新建一个test.vue。HelloWorld.vue是构建项目完成之后自带的页面,如果不再需要它可以将其删除,若要让test.vue显示出来必须要在router.js中修改他的路由。importTestfrom'../coniponents/testVue,use(Router)exportdefaultnewRouter({Iroutes:[{path:1/'jname:'test1ycomponent:Test।}现在开始写代码，回归test.vue,在下列方法中写入vue自带的data方法，此方法类似于react的state,用于储存一些变量的信息、状态。随后通过{{xxx}}的方式渲染在页面上。Vue的数据和DOM已经被建立了关联，所有东西都是响应式的<template><hl>{{message}<script>exportdefault(name:T,testfdm。{return(message:'H^llcWorld本人用的是WebStrome2017-3.5,这一版本中新增了vue文件的创建。亲测只有从这个版本开始才可以直接创建.vue的文件，当然，别的版本可以直接下载插件包也可以使用。.vue文件的好处就是自动帮你把组件的格式写好，你只需在里面直接写html的代码，或者js代码就好了。事件Vue的命令语句中有一个v-on的方法，他正是用来绑定事件的。以点击事件为例。“@”可以替换v-on命令，如："@click二“xxx"”<div><hl>当前己点岛{{count}}<t>Littoriv0nicLi.elc^,\ciiiit+=ib,>eiLek</button></div></teiFiplate><scriptsfeKportdefault{name:"test",d^ta(>{return(count;9当然，也可以通过函数来触发点击事件，vue将所有的函数放在methods中，这就意味着我们要在此方法中写所有的事件函数<div>dhl'i芋izru"'?{{isTru匕}}£/hl><bnttonvon:clicks'change'>click</button></div></template>g「ipCdepartdefault{lame:dataC){return(IsTriie:true}Lmethods:{charige:function(){this,islrue=Ithis.isirue)条件与循环条件判断通过v-if，v-else，v-else-if等命令来控制。可以把函数直接写在标签里，这样会方便很多<tenpl3te>«liv><divv-if="type=="A",>A<fdiv><divv-else-if="Ftype==="B',F>&</div></div></tempiate><5tript>exportdefault{name;"test"^d总{return(type:'A'注意，v-else-if、v-else必须紧跟在v-if的元素之后，不然不会被识别。循环使用v-for命令，它会把一个数组对应为一组元素，类似于React-Native中Flatlist组件的renderItem方法，当然这一切都类似原生JavaScript的map()方法。个人认为v-for是最方便获取并渲染一组数据的方法。<divv-far=<1itemsin£h2>Jf号为二Ritemmijm}卜内容为:{(items.pj)</h2></div>w/di"</tQ(nplate><5-Gript>exportdefault{'tes-t"jg皿)(return{ite-mi[{num:ijOts-g:bfirstitem'}>{num:?,msg;'seconditem'},.{rtkiui：3>msg:hthirdItem'},]表单输入绑定表单输入绑定用v-model命令，v-model虽然很像双向数据绑定的Angular,但是vue是单数据流，v-model只是语法糖。<tejnplate><div><input8holdd‘战输入力[)帖A的内容是：k{m「:</div></tenpUte5<$cript>exportdefault(ndine:''test",return(message:''父组件传值与React.js相似，Vue子父组件之间传值也是通过props,包括组件之间的通信也是一样的。首先我们在父组件上引用子组件，并将其写入容器内。<childreni:messag6=rin?<5cript>士叩"tChildrenlfrom(,/children!"exportdefault{componerts:[匚kilMgrrl>>namesdata(){return{巾健ssmge;'h«1loworld'随后，我们在子组件上面通过props方法来接收父组件传过来的参数，接收后便可以直接在页面上渲染。从装我件生过来的『"占({me£sage}}</hi></template><5-(ript>exportdefault{nai!^:"children*\dataO{广由七uM{1bpraps:[*messae^']}<i/s(!TLpt>父组件可以传多个值，不同的父组件也可以传若干的值，因为props是一个数组，我们接收的值以数组的形式放入即可。三、vue-router如果按照之前webpack的方法构建出来的项目，我们就不必再次安装vue-router,因为它已经为我们一套打包安装好了。进入router文件夹中的index.js，我们需要做的就是两件事：引入需要跳转路由的组件；在routes方法里添加该路由的路径、名字及组件importTestfrom1../cojnpcncnts/test1importAnotherfrom'../components/anothervue,iJS£(Router)exportdefaultnewRouter({routess[(path：,/：name:'te5t'component;Testl]，।{path;■曲notMr'dn^[a>G：'another'jcompofient:AnotherI)1})随后我们只需要通过vue自带的标签<router-link>,它相当于a标签，是一个链接。里面的tab属性是可以控制router-link的类型，这里我们选择了让他变成一个按钮。<div><router-1inkto=,r/anather"tag=,1buIton">gatoanotherPage</router-1ink></div>c/template>嵌套路由嵌套路由，顾名思义就是路由的多层嵌套。主要写法在于：把子路由的路径写在你需要嵌套的路由里的children方法中。path:1/another1name:1another'component:Another,children:[{path:1child]r-component:Child1)3{path:1child2'>component:ChiId2}j]}在父路由中，通过<router-link>引用即可，注意路径要写全，否则不会成功跳转到相应的子页面。<router-view>里面会自动接收来自子路由里的内容。<template><div>小2》首页4外2)<router-linkto=M/another/childl1D>childl</router-link><router-link.to="/anothen/child2,'>child2</router-link><div>crouter-view/></diV></dlv>动态路由动态路由运用的场景有很多。比如像是网上商城，根据不同的id显示出不同的商品。页面布局是同一个，路径分别是不同商品的路径。用法很简单，首先注册路由的时候只需要在后面加“:id”。这地方，：id是自己取的，当然可以选择使用别的字符，功能还是可以照样实现。patIn1/another/1id*,name:ranotherF,component:Another3在需要跳转的地方，写上完整的路由即可。<template><router-linkto='7anQther/child3,T>child3</rQirter-lirik></div>路由传值及函数路由路由可以用函数的方式进行跳转。在函数中用this.$router.push(‘/’)即可实现此功能<template><div>《buttonlijk-”goChild3">gQtoChild3</buttc?n><div><router-view/></div>^/div><script>exportdefault{name:"test'1,methods:{go■匚hildm：function(){this.Srouter,pusfi(R/another/child3*)I})}</script>路由传参分为标签传参，和函数传参。顾名思义，标签传值就是把参数连带路由直接写在标签里。<router-link：10="(^111^：20^^pyrans:{k电y：value}}">valueStrir>g</router-link>下面的便是函数传参。注意：name为router.js中所定义的名字，而且必须要写在上面。否则路由虽然能跳转过去，但是值会获取不到methods:{gdAhOthei':function(){this,irouter,.pushfipath:1another'tnam^:1another".messagf?:"helloworld}力)跳转过后页面接收值<hi>{{thist$rautefparams.message四、VuexVuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。安装普通html页面直接引用*scriptsrc=/patti/ta/T/ue,js»<.script*<scriptsre-/path/to/vuex.jsscriptsNpmnprninstallvuex'--save在需要用到的页面引用即可importVue-from-hub"importVuexfron'vuexVue.use:Vuex新建一个store.js,引用vueximportVuefrom1vue,importVuexfrom*vuex'Vue,use(Vuex);coj^stStore=newUU总乂・state:{count:e卜mutations:{addcount(state){state.count+t)hactions:[addcount(fcommit}){commit('addC^unt')))>)；exportdef^iwltstore这个便是Vuex最基本的一个结构，Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源（SSOT）”而存在。这也意味着，每个应用将仅仅包含一个store实例。State中存放的是初始的状态值，可以从这里定义一个初始的值，也可以从页面中传值过来，如果获取传过来的值则需要在mutations中获取。mutations中放置的是一系列改变状态的函数。更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数。actions类似于mutation，不同在于：Action提交的是mutation，而不是直接变更状态，Action可以包含任意异步操作。在页面中显示：importVue-From'vue1imp