Vue.js前端框架入门介绍

前言

  Vue是一款是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。在有 HTML、CSS和JavaScript的基础下学习Vue很快就能上手它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率。

vue实例常用到的构造选项

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

  在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

data数据对象

   data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

methods方法

methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。在methods方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问，this表示Vue实例。

常用指令

v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML

v-bind

v-bind指令用于实现单向动态数据绑定。

v-on

v-on指令用来绑定事件监听器。

v-for

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for， 它需要结合着in或者of来使用。

v-model

v-model指令主要用于实现表单元素和数据的双向绑定

v-if和v-else

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。

v-show

v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。

vue脚手架的安装

搭建复杂的软件项目和处理复杂的业务逻辑，就要使用到Vue的脚手架。

首先去下载node 官方网站下载 | Node.js 中文网

下载完成后按住电脑的win+R键盘，调出终端控制台，输入命令行node -v

然后通过npm全局安装Vue/cil脚手架，然后输入代码

npm install -g @vue/cli

进行下载

下载完成后输入vue -V查看下载的Vue版本

这样就下载好Vue的脚手架了。