初识Vue.JS

概述

Vue是一套用于构建用户界面的渐进式框架,与其他大型框架不同,Vue被设计为可以自底向上逐级应用,Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或者既有项目整合,另一方面它还可以与现代化的工具链以及各种支持类库结合使用,它还能够完全为复杂的单页应用提供驱动。

起步

首先我认为我们需要掌握如下知识

1. HTML/CSS
2. JavaScript

首先你可以尝试新建一个HTML文档,然后在其头部引入JS文件来达到引入Vue的效果

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

学习初步的使用Vue

Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

那么我们可以看到如下效果

分析

我们来分析一下,首先我们在HTML文档中建立了一个div盒子,并且将这个盒子id命名为app,之后我们在JS文件中new一个Vue对象,并且通过el参数绑定#app之后在data参数对象中进行对message的赋值,那么我们在前端就可以直接采用{{message}}来引用我们所声明的message的值,这就是声明式渲染。

后续

目前我也在学习VueJS,相信大家对Vue.JS已经有了一个初步的认识,那么我们来看看在WEB程序中Vue能够给我们带来的视觉震撼吧!

下面我们来说说对PC端WEB程序的Vue.JS组件库的推荐

1. iView组件库
2. Element UI组件库
3. bootstrap-vue

强烈安利第一和第二两款组件库,效果棒棒的!

当然如果你是BootStrap的资深玩家,那么我相信bootstrap-vue你也能够很快上手,但很遗憾,官方只提供了英文文档(英语很好的巨佬请忽视这句话)

那么在我们熟悉Vue.JS之后便可以尝试将它运用到我们的实际项目中来!