Vue快速入门：引入、简单使用

目录

一. Vue的引入

        1. Vue下载官网：

        2. Vue引用

二. Vue的简单使用

        1. Vue基本框架

        2. 数据双向绑定

三. 常见指令

        1. v-bind 的使用

         2. v-model 的使用

        3. v-on 的使用

        4.v-if、v-else-if、v-else 的使用

         5.v-show 的使用

        6.v-for 的使用

四. 生命周期

 

        本篇文章帮助读者能够快速掌握Vue如何在开发中引入并使用。

一. Vue的引入

        Vue是一款前端框架，用于简化js中的DOM操作，基于 Mode-View-ModelView 的思想，比较值得关注的一点是Vue实现了数据的双向绑定。

        1. Vue下载官网：

Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/         现在开发中使用的大多数是Vue2，在这里对Vue2进行简单介绍。 

        2. Vue引用

        Vue的导入方式不同于Java中的jar包，它不需要在项目中进行手动加载。建议在项目中创建一个单独的JS包用来存放JS文件，将vue文件直接拖入到JS包中。

        接着需要在HTML中引入vue，使用script标签将vue的路径写入。

二. Vue的简单使用

        1. Vue基本框架

        通俗一点来讲就是Vue到底长什么样子。图中script标签中所包含的就是Vue的基本结构，

        "el" 是Vue的接管区域。意思就是我们在HTML标签中定义了一个id选择器，并把它命名为app。代表当前Vue控制的是id选择器"app"。

        "data"用于定义数据模型，例如我们在里边编写"message"这个变量。数据模型可以是变量、三元运算符、函数的调用、算数运算。

        "methods"中用来编写方法，图中"on"代表方法名，其他方法体的编写和JS相同。

        在HTML标签中引用方式是通过Vue的"v-"指令来实现，图中使用v-model绑定数据模型，v-on绑定事件。{{message}}是插值表达式，可以直接将定义的数据模型展示出来。

        2. 数据双向绑定

        比较值得注意的是我们在更改输入框的内容的同时，插值表达式的内容也接着更改。

        原因：在网页中更改input标签里的内容，就是更改HTML的内容，这个时候因为绑定了Vue的数据模型，Vue数据模型也会跟着发生变化；在后边使用插值表达式的时候就是变化后的数据。这就是Vue所体现的数据双向绑定。

三. 常见指令

        Vue以 v- 为特殊前缀的常用指令如下几个：

指令	作用
v-bind	为HTML标签绑定属性值，设置css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if、v-else-if、v-else	根据条件渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

        1. v-bind 的使用

                图中v-bind用于修改href超链接的属性，在Vue中定义数据类型url链接到百度，语法格式有两种书写方式。中文百度超链接标签使用的是第一种；拼音百度标签使用的是第二种更简洁的方式，两种方式都可以改变被Vue接管的url。

 

         2. v-model 的使用

                v-model更改表单内容，通过绑定到url实现表单中的链接内容。配合着插值表达式和Vue的数据双向绑定的特性，可以看到更改输入框中的内容同时自动更改插值表达式的内容。

   

        3. v-on 的使用

                HTML标签中所展示的就是v-on的语法格式，第一行是常规写法，第二行是用"@"简写的写法，其中click是点击触发方式，触发方式还有focus等等。

 

        4.v-if、v-else-if、v-else 的使用

                首先使用v-model绑定num的数据模型，再使用v-if这三个指令去判断在input输入框中的数字大小。

   

         5.v-show 的使用

                v-show和v-if三个指令不同的地方在于，v-show在使用的时候会将所有的span标签都渲染出来，通过控制样式中display的属性控制span标签的显示。而v-if三个指令只会渲染符合条件的span标签。

        6.v-for 的使用

                v-for遍历names数组中的名字赋值给name，通过name用插值表达式表示出来。在第二行中index是取出数组中的下标数字，下标跟数组吻合是从0开始的。

四. 生命周期

                 Vue的生命周期分为八个阶段，触发生命周期的时候，会自动执行一个生命周期方法。其中着重需要掌握的是mounted，挂载完成时的生命周期方法。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestory	销毁前
destroyed	销毁后

 

                mounted生命周期方法与methods平级，在网页加载完成过后会自动执行。他的主要使用作用是在mounted中发送get、post请求。这是很重要的一点。