目录
本篇文章帮助读者能够快速掌握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请求。这是很重要的一点。