Vue.js—快速入门及实现图书管理系统白菜白

在实现图书馆系统之前,我们先学习一下Vue.js的一些基础语法的使用。

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的,当创建一个Vue实例时,你可以传入一个选项对象。

一个Vue应用由一个通过newVue创建的根Vue实例,以及可选的嵌套的、可复用的组件树组成。

Vue.js使用{{}}绑定表达式,用于将表达式的内容输出到页面中。表达式可以是文字,运算符,变量等,也可以在表达式中进行运算输出结果

在创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中,选项对象的el属性指向View,el:'#app'表示该Vue实例将挂载到...

这个元素;

data属性指向Model,data:message表示我们的Model是message对象。Vue.js有多种数据绑定的语法,最基础的形式是文本插值,使用一对大括号语法,在运行时{{message}}会被数据对象的message属性替换,所以页面上会输出"HelloWorld!"。

首先我们先解释一下什么是双向绑定,Vue框架很核心的功能就是双向的数据绑定。双向是指:HTML标签数据绑定到Vue对象,另外反方向数据也是绑定的。MVVM模式本身是实现了双向绑定的,在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。将message绑定到文本框,当更改文本框的值时,{{message}}中的内容也会被更新。反之,如果改变message的值,文本框的值也会被更新。反过来,如果改变message的值,文本框的值也会被更新,我们可以在Chrome控制台进行尝试。

下面的栗子是在表单控件元素(input等)上创建双向数据绑定(数据源);跟Angular中ng-model用法一样。

上面用到的v-model是Vue.js常用的一个指令,那什么是指令呢?

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性。

Vue.js提供了一些常用的内置指令,接下来就给大家介绍几个Vue中的常用指令:

1、v-if指令

2、v-else指令

3、v-show指令

4、v-for指令

5、v-on指令

6、v-bind指令

v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,这个例子演示了我们不仅可以绑定DOM文本到数据,也可以绑定DOM结构到数据。

123456789

Hello,Vue.js!

10Yes11No12=12">Age:{{age}}13
14151627

可以用v-else指令给v-if添加一个"else"块,条件都不符合时渲染。v-else元素必须紧跟在带v-if或者v-else-if的元素的后面,否则它将不会被识别。

v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。值得我们注意的是,v-show不支持