美文网首页
vue 初步学习记录

vue 初步学习记录

作者: 临川慕容吹雪 | 来源:发表于2019-10-30 17:39 被阅读0次

题前话:之前接手了我们公司的半成品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项目手机端效果如下:

手机端效果图 电脑端效果图

相关文章

  • vue 初步学习记录

    题前话:之前接手了我们公司的半成品Vue项目,由于自己不是做网页前端的,自己初步看了下Vue相关东西,今天才算是把...

  • Vue学习初步

    v-cloak 解决插值表达式方法渲染闪烁问题,如果vue控制区域内的标签上面加了v-cloak,在网速不够无法请...

  • vue之Helloworld

    一,vue核心框架为vue.js, 初步学习可不使用vue.cli, 可在本地引入vue.js或vue.min.j...

  • vue 初步学习感悟

    ?xml version="1.0" encoding="UTF-8"? 首先,阐明一下我是一名iOS开人员,学习...

  • Vue 初步学习积累

    1. v-for 遍历 2. v-if 判断 登陆判断 常与v-else搭配(明白v-if和v-show的区别) ...

  • Vue.js初步学习

    1 Vue官网 https://cn.vuejs.org/ 2 Mvvm模式 Model-View-View-Mo...

  • Vue.js初步学习(二)--初步使用

    1026--使用需知1、引进方式:(1) 可以直接通过script标签引进: (2)也可以下载js文件到本地,其中...

  • Vue 学习

    vue 学习记录。 参考网址 Vue:https://cn.vuejs.org/v2/guide/ Vue-rou...

  • 在vue项目中,去使用Element-ui

    element-ui初步使用.md START 这里主要记录一下,在vue项目中,去使用Element-ui el...

  • 第十六节:Vue生命周期与钩子函数

    前沿:通过前面几节的学习,我们已经对vue有了初步的了解,vue可以帮我们干什么,而接下来就介绍vue的生命周期和...

网友评论

      本文标题:vue 初步学习记录

      本文链接:https://www.haomeiwen.com/subject/hjgovctx.html