title

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

[复制链接]
发表于 2017-10-2 22:41:10 | 显示全部楼层 |阅读模式

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中,最好也要界说这个属性,否则会报错。

旅客,假如您要检察本帖隐藏内容请答复


回复

使用道具 举报

发表于 2018-7-17 18:00:10 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

发表于 2018-10-10 13:54:21 | 显示全部楼层
vue.js实战项目:Vue入门到实战图书管理
回复

使用道具 举报

发表于 2018-10-16 10:34:14 | 显示全部楼层
非常好非常好非常好非常好非常好非常好非常好
回复

使用道具 举报

发表于 2019-8-1 14:22:30 | 显示全部楼层
Very good
回复

使用道具 举报

发表于 2019-12-24 19:58:39 | 显示全部楼层
鐪嬬湅鎬庝箞鏍
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|站点地图|ITFXZ社区 |网站地图

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表