vue基础入门学习文档.docx
- 文档编号:2975611
- 上传时间:2022-11-16
- 格式:DOCX
- 页数:12
- 大小:518.22KB
vue基础入门学习文档.docx
《vue基础入门学习文档.docx》由会员分享,可在线阅读,更多相关《vue基础入门学习文档.docx(12页珍藏版)》请在冰豆网上搜索。
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构建项目,直接引用
即可。 通过webpack来构建项目步骤如下: 1.安装Node,下载地址: https: //nodejs.org/en/或者 2.安装vue-cli,终端输入: npminstallvue-cli-g 3.初始化项目(即构建项目),vueinitwebpackvue-test,后面名字(vue-test)是本次项目的名字。 4.根据终端提示逐步往下进行。 当进行到是否要安装vue-router时,点击Y,因为后面要用,出现是否语法检测(UseESLinttolineyourcode? )我们点击N。 这个很棘手,因为语法检测非常严格,有时候甚至你多写或者在符号前加空格,他都会报错。 空行也是如此,本人就被它折磨过,甚至最后直接重新开始构建一个新的项目。 5.其余的命令为: “是否安装单元测试工具”以及“是否需要端到端测试工具”,依据个人情况而定选择是否安装。 6.到此步,一个项目便安装完成了。 进入项目cdvue-test,安装依赖npminstall,一般系统会自动帮你安装好了依赖,这里可以选择不用执行此命令。 7.开启本地服务npmrundev,在http: //localhost: 8080中看到vue的一个介绍就表明整个项目构建成功。 二、起步 1.声明式渲染 老样子,先来一个HelloWorld,在src/component新建一个test.vue。 HelloWorld.vue是构建项目完成之后自带的页面,如果不再需要它可以将其删除,若要让test.vue显示出来必须要在router.js中修改他的路由。 现在开始写代码,回归test.vue,在下列方法中写入vue自带的data方法,此方法类似于react的state,用于储存一些变量的信息、状态。 随后通过{{xxx}}的方式渲染在页面上。 Vue的数据和DOM已经被建立了关联,所有东西都是响应式的 本人用的是WebStrome2017-3.5,这一版本中新增了vue文件的创建。 亲测只有从这个版本开始才可以直接创建.vue的文件,当然,别的版本可以直接下载插件包也可以使用。 .vue文件的好处就是自动帮你把组件的格式写好,你只需在里面直接写html的代码,或者js代码就好了。 2.事件 Vue的命令语句中有一个v-on的方法,他正是用来绑定事件的。 以点击事件为例。 “@”可以替换v-on命令,如: “@click=”xxx”” 当然,也可以通过函数来触发点击事件,vue将所有的函数放在methods中,这就意味着我们要在此方法中写所有的事件函数 3.条件与循环 条件判断通过v-if,v-else,v-else-if等命令来控制。 可以把函数直接写在标签里,这样会方便很多 注意,v-else-if、v-else必须紧跟在v-if的元素之后,不然不会被识别。 循环使用v-for命令,它会把一个数组对应为一组元素,类似于React-Native中Flatlist组件的renderItem方法,当然这一切都类似原生JavaScript的map()方法。 个人认为v-for是最方便获取并渲染一组数据的方法。 4.表单输入绑定 表单输入绑定用v-model命令,v-model虽然很像双向数据绑定的Angular,但是vue是单数据流,v-model只是语法糖。 5.父组件传值 与React.js相似,Vue子父组件之间传值也是通过props,包括组件之间的通信也是一样的。 首先我们在父组件上引用子组件,并将其写入容器内。 随后,我们在子组件上面通过props方法来接收父组件传过来的参数,接收后便可以直接在页面上渲染。 父组件可以传多个值,不同的父组件也可以传若干的值,因为props是一个数组,我们接收的值以数组的形式放入即可。 三、vue-router 如果按照之前webpack的方法构建出来的项目,我们就不必再次安装vue-router,因为它已经为我们一套打包安装好了。 进入router文件夹中的index.js,我们需要做的就是两件事: 1.引入需要跳转路由的组件; 2.在routes方法里添加该路由的路径、名字及组件 随后我们只需要通过vue自带的标签 里面的tab属性是可以控制router-link的类型,这里我们选择了让他变成一个按钮。 嵌套路由 嵌套路由,顾名思义就是路由的多层嵌套。 主要写法在于: 把子路由的路径写在你需要嵌套的路由里的children方法中。 在父路由中,通过 动态路由 动态路由运用的场景有很多。 比如像是网上商城,根据不同的id显示出不同的商品。 页面布局是同一个,路径分别是不同商品的路径。 用法很简单,首先注册路由的时候只需要在后面加“: id”。 这地方,: id是自己取的,当然可以选择使用别的字符,功能还是可以照样实现。 在需要跳转的地方,写上完整的路由即可。 路由传值及函数路由 路由可以用函数的方式进行跳转。 在函数中用this.$router.push(‘/....’)即可实现此功能 路由传参分为标签传参,和函数传参。 顾名思义,标签传值就是把参数连带路由直接写在标签里。 下面的便是函数传参。 注意: name为router.js中所定义的名字,而且必须要写在上面。 否则路由虽然能跳转过去,但是值会获取不到 跳转过后页面接收值 四、Vuex Vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 安装 普通html页面直接引用 Npm 在需要用到的页面引用即可 新建一个store.js,引用vuex 这个便是Vuex最基本的一个结构,Vuex使用单一状态树,用一个对象就包含了全部的应用层级状态。 至此它便作为一个“唯一数据源(SSOT)”而存在。 这也意味着,每个应用将仅仅包含一个store实例。 State中存放的是初始的状态值,可以从这里定义一个初始的值,也可以从页面中传值过来,如果获取传过来的值则需要在mutations中获取。 mutations中放置的是一系列改变状态的函数。 更改Vuex的store中的状态的唯一方法是提交mutation。 Vuex中的mutation非常类似于事件: 每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。 这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数。 actions类似于mutation,不同在于: Action提交的是mutation,而不是直接变更状态,Action可以包含任意异步操作。 在页面中显示: 在addCount的方法中,通过dispatch来分发actions。 简而言之就是: 页面函数发起一个行为(action),action自动匹配到mutation中所对应的方法,mutation开始改变最初接收的state中值的状态。 这便是完整的一个vuex的运行流程。 computed是一种计算属性的方法,具体概念可以参照官网中的计算属性。 五、总结 以上介绍的一些命令及方法是最基本的用法。 每个命令具体详细的介绍与使用方法可以在Vue.js官方文档中参考。 Vue的官方文档写的很详细,介绍的方法也很明确,我认为是相当不错的文档之一了,至少我能看懂。 当然还有朋友看过之后给我说过,Vue的文档看起来非常的过瘾,比React的不知道详细多少倍。 对比两大框架,虽然都是开源的,但是不得不说Vue团队做的就很人性化,单单在文档方面就已经为小白们提供了很多便利。 还是想说原来的那句话,这篇文章是关于Vue.js最基础入门的,代码都是自己当时踩坑尝试出来的。 希望大家看完之后能对vue稍微有所认识。 当然,还是得需要多多实际练习才能巩固的更加深透。 愿和我一样的Vue初学者通过此篇简单的小文能够有所收获,并祝愿在未来的前端道路上大显身手。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- vue 基础 入门 学习 文档