vue.js初学者教程(1)

Vue.js是一个流行的JavaScript MVVM库，它是基于数据驱动和基于组件的思想构建的。与Angular.js相比，Vue.js提供了一个更简单、更容易理解的API，使我们能够快速入门和使用Vue.js。

0.MVVM

什么是MVVM？是模型-视图-视图模型。

ViewModel是Vue.js的核心，它是Vue的一个实例。

不太懂也没关系，慢慢就懂了。

1.基本示例

代码：

！DOCTYPE html html head meta charset=' utf-8 ' meta name=' viewport ' content=' initial-scale=1.0，maximum-scale=1.0，user-scalable=no '/title/title/headsdydiv id=' Didi-navigator ' ul Li v-for='选项卡中的选项卡' { tab . text } }/Li/ul/div script src=' http 3360 js/Vue . js ' type=' text/JavaScript ' charset=' utf-8 '/

使用Vue的过程就是定义MVVM每个组成部分的过程。

定义视图

定义模型

创建一个Vue实例或“视图模型”，用于连接视图和模型

2.数据绑定

2.1插值

有时候只需要渲染一次数据，后续的数据变化就不再关心了，可以通过“*”来实现：

spanText: {{*text}}/span

双大括号标记会将其中的所有值视为字符串。如果值是HTML片段，您可以使用三个大括号来绑定它们：

divLogo: {{{logo}}}/div

徽标： ' spandfe/span '

2.2表达

小胡子标签也接受表达式形式的值。

3.说明(一)

V-if指令v-show指令v-else指令v-for指令v-bind指令v-on指令v-model指令

V-if:是否渲染。

V-show:肯定渲染，是否显示。

其中，v-show不支持模板语法。一般来说，v-if的切换消耗较高，而v-show的初始渲染消耗较高。因此，如果需要频繁切换，最好使用v-show；如果运行时条件不太可能改变，最好使用v-if。此外，在组件上使用v-show时，由于指令v-else的优先级会引起问题，可以用另一个v-show替换v-else。

3.1关于v-for

使用依据见www.jb51.net/article/96364.htm。

补充：

Vue.js添加了两种方法来观察变化：$set和$remove。

3.1.1尽量避免直接设置数据绑定的数组元素

因为Vue.js不会检测到这些变化，所以视图呈现不会更新。此时，我们可以使用$set方法：

demo.item.$set(0，{childMsg: '已更改！'})

$remove是splice的语法糖，用于从目标数组中查找和删除元素。

demo.item.$remove(项目)

3.1.2有时可能需要用全新的对象替换数组

Vue.js应该尽可能重用现有的实例。如果没有用于跟踪的唯一键，可以使用track-by=$ index，这将强制v-for进入就地更新模式：剪辑不会被移动，而只是用相应索引的新值进行刷新。此时，DOM节点不再映射数组元素顺序的变化，无法同步组件的临时状态(如输入元素的值)和私有状态。

由于js的限制，Vue.js无法检测到以下数组的变化：

直接用索引设置元素，例如vm.items[0]={}。修改数据的长度，例如vm.items.length=0。

前一个问题可以用$set解决，后一个问题只需要用空数组替换项目。

3.1.3 v-for可以与vue.js提供的内置filterBy或orderBy数据一起使用

过滤器示例：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body input v-model=' search text '/ul Li v-for=' user in users | filter by search text in ' name ' { user。name } }/Li/ul脚本src=' http : js/Vue。js ' type=' text/JAVAScript ' charset=' utf-8 '/script script type=' text/JAVAScript ' var haha=new Vue({ El 33333快车，标签:'1' }，名称： '慢车，标记：'2' },名称： '好车，标签:'3' }，名称： '破车，标记： ' 4 ' }]})/脚本/正文/html

当我搜破车的时候：

订单方的例子：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body ul Li v-for=' user in users | order by字段反向“{用户。name } }/Li/ul脚本src=' http : js/Vue。js ' type=' text/JAVAScript ' charset=' utf-8 '/script type=' text/JAVAScript ' var demo=new Vue({ El : ' body '，data: { field:颠倒用户：[ { name: '快车，标记：'2' },名称： '慢车，标签:'3' }，名称： '好车，标签:'1' }，名称： '破车，标记：“0”}]})/脚本/正文/html

其他：

垂直装订指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

v型指令后面可以添加数字、懒惰、去抖参数。

数字可以将用户的输入转换为数字类型（如果原值的转换结果为NaN，则返回原值)。在投入中时添加懒惰的将数据改到在变化事件中发生去抖可设置延时。

参考：大神写的：//www .JB 51。net/article/96426。htm 《vue.js权威指南》

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。