vue.js实战项目:Vue入门到实战图书管理

admin

[table][tr][td]
vue.js实战项目:Vue入门到实战图书治理
第一章 Vue.js是什么?
Vue(法语)同view(英语)
Vue.js是一套构建用户界面(view)的MVVM框架。Vue.js的焦点库只关注视图层，而且很是轻易进修，很是轻易与其他库或已有的项目整合。
1.1 Vue.js的目标
Vue.js的发生焦点是为领会决以下三个题目：
1. 处理数据绑定的题目;
2. Vue.js框架生产的首要目标是为了开辟大兴单页面利用(SPA：Single Page Application)
Angular.js中对PC端支持的比力杰出，可是对移动端支持就一般。而Vue.js首要支持移动端，也支持PC端。
3. 它还支持组件化。也就是可以将页面封装成多少个组件，采用积木式编程 ，这样是页面的复用度到达最高(支持组件化)。
1.2 Vue.js特征
1. MVVM形式
M: model 营业模子，用处：处置数据，供给数据
V: view 用户界面、用户视图
营业模子model中的数据发生改变的时辰，用户视图view也随之变化。用户视图view改变的时辰，营业模子model中的数据也可以发生改变。
2. 组件化
3. 指令系统
4. Vue.js 2.0起头支持虚拟DOM(Vue.js 1.0 是操纵的真是DOM，而不是虚拟DOM)
虚拟DOM可以提升页面的革新速度。
第二章 Vue.js入门
利用Vue.js的步调：
第一步：在html页面中引入vue.js
第二步：Vue.js供给了一个Vue,我们需要建立一个工具。
new Vue({});
第三步：在用户界面view中，经过{{}}形式将data中的数据显现在页面中。
在用户界面中，{{}}代码中绑定的data的key，而在页面中显现的是该key的value。
Vue.js对获得的data与页面上显现的{{}}会发生一种映照关系。
app这个变量会代理vue中data数据。所以我们拜候data中数据的时辰，间接用app.name便可以了
这样，假如我们要实现前背景交互，只要将从背景获得的数据，放在data中,页面就会自动绑定，这样就实现了从model->view的数据流向。
第三章 Vue.js指令
指令，实在指的就是vue的v-开首的自界说属性。每个分歧的属性都有各自分歧的意义和功用。
指令的语法：
v-指令称号=”表达式判定大概是营业模子中属性名大概是事务名”
3.1 v-text
感化：操纵元素中的纯文本
快速方式：{{}}
3.2 v-html
感化：操纵元素中的html
3.3 v-bind
感化：v-bind绑定页面中的元素属性。例如：a的href属性，img的src、alt和title属性。
语法：v-bind:元素的属性名 = “data中键名”
在view模板中，可以利用简单的JS表单式，例如：
3.4 v-show
感化：经过判定，能否显现该内容。假如值为true，则显现。否则就隐藏。
语法：v-show=”判定表达式”
特点：元素会始终衬着在DOM中，只是被设备了display:none
3.5 v-if
感化：判定能否加载牢固的内容。假如为真，则加载;为假时，则不加载。
用处：用在权限治理，页面条件加载
语法：v-if=”判定表达式”
特点：控制元素插进来大概删除，而不是隐藏。
v-if与v-show的区分：
一般来说，v-if有更高的切换消耗，平安性更高，而v-show有更多的初始化衬着消耗。是以，假如需要频仍切换而对平安性无要求，利用v-show。假如在运转时，条件不成能改变，则利用v-if较好。
3.6 v-else
v-else必须紧跟在v-if前面，否则他不能被识别。暗示：当v-if的条件不建立的时辰履行。
3.7 v-for
感化：控制html元素中的循环，实现诗句列表的天生。
用法：
view:
v-for=”item in 调集”
item: 调集的子项
调集：被遍历的调集，凡是为数组。
用处：写在谁上，谁循环。
数据：
3.8 v-on
感化：对页面中的事务停止绑定
语法： v-on:事务范例=“事务处置函数名”
缩写： @事务范例=“事务处置函数名”
用法：
在view中，用v-on:事务范例=”methods中的方式名字”
在vue实例中，在methods中去监听：也就誊写methods的该方式。
3.9 v-model
感化：接管用户输入的一些数据，间接便可以将这些数据挂在到data属性上。这样就发生了双向的数据绑定(当营业模子中的数据发生变化时，用户界面中的数据会发生变化;当用户界面中的数据变化时，营业模子中的数据也会发生变化)。
语法：v-model = “data中的键名”
在data中，最好也要界说这个属性，否则会报错。
旅客，假如您要检察本帖隐藏内容请答复
图书管理项目原代码, 图书管理系统java案例, vue项目实例, 图书管理设计文档, vue 项目