vue 初步学习记录

题前话:之前接手了我们公司的半成品Vue项目,由于自己不是做网页前端的,自己初步看了下Vue相关东西,今天才算是把基本项目功能都完成了。这里记录下初步学习Vue过程。

相关学习

Vue.js 基础学习

Vue 官网,我们第一步就需要在官网了解和学习Vue基本知识面,并可以按照官网新建我们第一个Vue文件。

这里我简单记录了下我初步学习vue中用到比较多的属性:

v-bind

缩写:

动态地绑定一个或多个特性,或一个组件 prop 到表达式。
在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

v-on

缩写: @

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 event 属性:v-on:click="handle('ok',event)"。
从 2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。

v-model

限制:

  • <input>
  • <select>
  • <textarea>
  • components

在表单控件或者组件上创建双向绑定

slot-scope

用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中,你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。可参考作用域插槽。已经被v-slot代替掉了

基础的vue知识学完之后,因为我们需要开发一个Vue项目,这里我们就需要用到下面的一个插件:

Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。在这里我们可以按照指导来搭建一个我们自己的项目了。

  • 我们使用 npm install -g @vue/cli 下载这个工具,
  • 使用vue create hello-world 命令创建一个项目
    或者通过 vue ui命令以图形化界面创建和管理项目。

为了更好构建单页面应用,控制不同页面,我们需要下面路由插件:

Vue Router

Vue Router 是 Vue.js 官方的路由管理器,可以让我们方便快捷管理界面。

为了更好的进行数据监控,我们也需要下面状态管理器插件:

Vuex 基础学习

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex))

vue开发中,需要用到各种功能,比如地址选择器,商品列表啊,我们可以自己写,但有些功能我们可以用比较完善的第三方vue组件库:

vue手机端界面我主要用到:Vant

Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 Vant 旨在更快、更简单地开发基于 Vue 的美观易用的移动站点

vue 电脑端我主要用到:Element

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

调试相关用到:vue-devtools

允许你在一个更友好的界面中审查和调试 Vue 应用。可以显示vue的数据结构。
这个很方便快捷:

就我公司项目进行简单说明:

页面管理 router

使用Vue Router 管理所有界面。
把所有页面放到一个.js文件中:
其实更好的方式是this.$router.addRoutes方式动态注册

页面路由
数据状态响应

使用Vuex中的GetterMutation来进行数据状态管理。类似下面这种:

getters

Mutation
state
注册绑定
界面传值

界面传值我基本上使用Vue Router paramsquery属性操作的。具体可参考vue $router 路由传参的4种方法详解

网络请求

网络请求这块用了axios
axios进行了简单封装:

axios

最后我们需要使用命令 npm run build打包生成一个dist文件夹,然后把这个打包好的文件部署到服务器上即可。

写着写着感觉写的有点乱了唉。。,最后实现的公司vue项目手机端效果如下:

手机端效果图
电脑端效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 225,124评论 6 523
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,453评论 3 404
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,386评论 0 368
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,136评论 1 301
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,142评论 6 400
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,593评论 1 315
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,958评论 3 429
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,944评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,477评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,512评论 3 346
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,639评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,227评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,971评论 3 340
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,397评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,550评论 1 277
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,203评论 3 381
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,713评论 2 366