Vue 入门知识

前言

今年开始正式使用Vue,目前也有几个月的时间了。主要想借助这篇文章记录下自己的学习过程,权当个记录。

了解Vue

这个阶段主要是根据官网的guides敲代码,看着挺笨的方式,但是效果还不错,每个点有什么不明白的基本都可以立即用代码验证下。当时为了快速了解Vue,并没有每个模块都仔细看过,主要看了基础下的模块就投入实践了。

  • 安装
  • 介绍
  • Vue实例
  • 模板语法
  • 计算属性和观察者
  • Class和Style绑定
  • 条件渲染
  • 列表渲染
  • 事件处理
  • 表单输入绑定
  • 组件

假如自身有一定的编程和前端知识,基本上通读上面的几个模块后,就可以尝试写点代码实现功能。我下面主要介绍下每个模块的大概情况,便于大家有个基本的认识。

安装

Vue的安装主要是两个方式,直接引入和Npm安装。
直接引入就像引入一个js文件一样引入Vue的js文件即可
Npm安装的话,需要对Node有点了解。
对Npm了解后,还可以使用vue-cli方便的搭建Vue的项目

需要注意的是Vue并不能兼容IE8及以下的浏览器,可以兼容ECMAScript 5的浏览器

介绍

Vue是一套构建用户界面的渐进式框架。Vue核心库只关注视图层

在这个部分,主要了解下数据与Dom的绑定,跟着文档中例子自己敲敲代码,体验下数据绑定带来的好处,再想想之前使用jQuery时如何处理,就很容易体会到Vue的强大了。
最后了解下Vue的组件,目前的看到的组件挺好理解的,简单理解成一个html标签即可。

Vue实例

了解下生命周期

模板语法

了解指令,绑定的语法怎么使用。
v-bind , v-on 怎么使用

计算属性和观察者

computed和watch的使用

Class与style绑定

学会使用v-bind给Dom元素绑定样式

条件渲染

v-if 和 v-show 的使用

列表渲染

v-for 的使用。既可以循环数值,也可以循环对象

事件处理

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码

表单输入绑定

这个基本没看,暂未使用

组件

学会使用组件,通俗的说,就是利用前面学到的Vue知识、html、css、js等知识,构建常用的模块。使用vue这个技术,把html、js、css更好的组织在一起

Vue实践

开发项目的过程中,UI-framework选的饿了么出品的ElementUI。入门文档写的挺好的,自己看看就知道咋用了。

样式采用的是SCSS,可以在 style 模块写 css 的时候支持继承和一些逻辑,这个难度不大,看个文档了解下就能开始使用了。

前后端的数据的请求采用的 axios