Vuejs教程概要.docx
- 文档编号:26022471
- 上传时间:2023-06-17
- 格式:DOCX
- 页数:93
- 大小:537.73KB
Vuejs教程概要.docx
《Vuejs教程概要.docx》由会员分享,可在线阅读,更多相关《Vuejs教程概要.docx(93页珍藏版)》请在冰豆网上搜索。
Vuejs教程概要
Vue.js教程
起步
我们以Vue数据绑定的快速导览开始。
如果你对高级概述更感兴趣,可查看这篇博文。
尝试Vue.js最简单的方法是使用 JSFiddleHelloWorld例子。
在浏览器新标签页中打开它,跟着我们查看一些基础示例。
如果你喜欢用包管理器下载/安装,查看安装教程。
HelloWorld
{{message}}
newVue({
el:
'#app',
data:
{
message:
'HelloVue.js!
'
}
})
HelloVue.js!
双向绑定
{{message}}
newVue({
el:
'#app',
data:
{
message:
'HelloVue.js!
'
}
})
HelloVue.js!
渲染列表
newVue({
el:
'#app',
data:
{
todos:
[
{text:
'LearnJavaScript'},
{text:
'LearnVue.js'},
{text:
'BuildSomethingAwesome'}
]
}
})
∙LearnJavaScript
∙LearnVue.js
∙BuildSomethingAwesome
处理用户输入
{{message}}
click="reverseMessage">ReverseMessage
newVue({
el:
'#app',
data:
{
message:
'HelloVue.js!
'
},
methods:
{
reverseMessage:
function(){
this.message=this.message.split('').reverse().join('')
}
}
})
HelloVue.js!
ReverseMessage
综合
keyup.enter="addTodo">
{{todo.text}}
click="removeTodo($index)">X
newVue({
el:
'#app',
data:
{
newTodo:
'',
todos:
[
{text:
'Addsometodos'}
]
},
methods:
{
addTodo:
function(){
vartext=this.newTodo.trim()
if(text){
this.todos.push({text:
text})
this.newTodo=''
}
},
removeTodo:
function(index){
this.todos.splice(index,1)
}
}
})
∙Addsometodos X
希望上例能让你对Vue.js的工作原理有一个基础概念。
我知道你现在有许多疑问——继续阅读,在后面的教程将一一解答。
概述
Innovative&powerful.Over100elements,230styles,and18headerstyles.adsviaCarbon
Vue.js(读音/vjuː/,类似于 view)是一个构建数据驱动的web界面的库。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue.js自身不是一个全能框架——它只聚焦于视图层。
因此它非常容易学习,非常容易与其它库或已有项目整合。
另一方面,在与相关工具和支持库一起使用时,Vue.js也能完美地驱动复杂的单页应用。
如果你是有经验的前端开发者,想知道Vue.js与其它库/框架的区别,查看对比其它框架;如果你对使用Vue.js开发大型应用更感兴趣,查看构建大型应用。
响应的数据绑定
Vue.js的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单。
在使用jQuery手工操作DOM时,我们的代码常常是命令式的、重复的与易错的。
Vue.js拥抱数据驱动的视图概念。
通俗地讲,它意味着我们在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。
一旦创建了绑定,DOM将与数据保持同步。
每当修改了数据,DOM便相应地更新。
这样我们应用中的逻辑就几乎都是直接修改数据了,不必与DOM更新搅在一起。
这让我们的代码更容易撰写、理解与维护。
可能是最简单的例子:
--这是我们的View-->
Hello{{name}}!
//这是我们的Model
varexampleData={
name:
'Vue.js'
}
//创建一个Vue实例或"ViewModel"
//它连接View与Model
varexampleVM=newVue({
el:
'#example-1',
data:
exampleData
})
结果:
Hello Vue.js!
看起来这跟单单渲染一个模板非常类似,但是Vue.js在背后做了大量工作。
并且DOM会自动响应数据的变化。
我们如何知道?
打开你的浏览器的控制台,修改exampleData.name,你将看到上例相应地更新。
注意我们不需要撰写任何DOM操作代码:
被绑定增强的HTML模板是底层数据状态的声明式的映射,数据不过是普通JavaScript对象。
我们的视图完全由数据驱动。
让我们来看第二个例子:
Hello!
varexampleVM2=newVue({
el:
'#example-2',
data:
{
greeting:
true
}
})
Hello!
这里我们遇到新东西。
你看到的 v-if 特性被称为指令。
指令带有前缀 v-,以指示它们是Vue.js提供的特殊特性。
并且如你所想象的,它们会对绑定的目标元素添加响应式的特殊行为。
继续在控制台设置 exampleVM2.greeting 为 false,你会发现“Hello!
”消失了。
第二个例子演示了我们不仅可以绑定DOM文本到数据,也可以绑定DOM 结构 到数据。
而且,Vue.js也提供一个强大的过渡效果系统,可以在Vue插入/删除元素时自动应用过渡效果。
也有一些其它指令,每个都有特殊的功能。
例如 v-for 指令用于显示数组元素,v-bind指令用于绑定HTML特性。
我们将在后面详细讨论全部的数据绑定语法。
组件系统
组件系统是Vue.js另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。
如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树:
实际上,一个典型的用Vue.js构建的大型应用将形成一个组件树。
在后面的教程中我们将详述组件,不过这里有一个假想的例子,看看使用了组件的应用模板是什么样的:
你可能已经注意到Vue.js组件非常类似于自定义元素——它是 Web组件规范的一部分。
实际上Vue.js的组件语法参考了该规范。
例如Vue组件实现了 SlotAPI 与 is 特性。
但是,有几个关键的不同:
1.Web组件规范仍然远未完成,并且没有浏览器实现。
相比之下,Vue.js组件不需要任何补丁,并且在所有支持的浏览器(IE9及更高版本)之下表现一致。
必要时,Vue.js组件也可以放在原生自定义元素之内。
2.Vue.js组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。
组件系统是用Vue.js构建大型应用的基础。
另外,Vue.js生态系统也提供了高级工具与多种支持库,它们和Vue.js一起构成了一个更加“框架”性的系统。
Vue实例
JupiteristhefastestandlightestWordPressthemeever.Unparalleledperformance.adsviaCarbon
构造器
每个Vue.js应用的起步都是通过构造函数 Vue 创建一个 Vue的根实例:
varvm=newVue({
//选项
})
一个Vue实例其实正是一个 MVVM模式中所描述的ViewModel-因此在文档中经常会使用vm 这个变量名。
在实例化Vue时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
全部的选项可以在API文档中查看。
可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器:
varMyComponent=Vue.extend({
//扩展选项
})
//所有的`MyComponent`实例都将以预定义的扩展选项被创建
varmyComponentInstance=newMyComponent()
尽管可以命令式地创建扩展实例,不过在多数情况下将组件构造器注册为一个自定义元素,然后声明式地用在模板中。
我们将在后面详细说明组件系统。
现在你只需知道所有的Vue.js组件其实都是被扩展的Vue实例。
属性与方法
每个Vue实例都会代理其 data 对象里所有的属性:
vardata={a:
1}
varvm=newVue({
data:
data
})
vm.a===data.a//->true
//设置属性也会影响到原始数据
vm.a=2
data.a//->2
//...反之亦然
data.a=3
vm.a//->3
注意只有这些被代理的属性是响应的。
如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
我们将在后面详细讨论响应系统。
除了这些数据属性,Vue实例暴露了一些有用的实例属性与方法。
这些属性与方法都有前缀 $,以便与代理的数据属性区分。
例如:
vardata={a:
1}
varvm=newVue({
el:
'#example',
data:
data
})
vm.$data===data//->true
vm.$el===document.getElementById('example')//->true
//$watch是一个实例方法
vm.$watch('a',function(newVal,oldVal){
//这个回调将在`vm.a`改变后调用
})
参考API文档查看全部的实例属性与方法。
实例生命周期
Vue实例在创建时有一系列初始化步骤——例如,它需要建立数据观察,编译模板,创建必要的数据绑定。
在此过程中,它也将调用一些生命周期钩子,给自定义逻辑提供运行机会。
例如 created 钩子在实例创建后调用:
varvm=newVue({
data:
{
a:
1
},
created:
function(){
//`this`指向vm实例
console.log('ais:
'+this.a)
}
})
//->"ais:
1"
也有一些其它的钩子,在实例生命周期的不同阶段调用,如 compiled、 ready、destroyed。
钩子的 this 指向调用它的Vue实例。
一些用户可能会问Vue.js是否有“控制器”的概念?
答案是,没有。
组件的自定义逻辑可以分割在这些钩子中。
生命周期图示
下图说明了实例的生命周期。
你不需要立马弄明白所有的东西,不过以后它会有帮助。
数据绑定语法
Vue.js的模板是基于DOM实现的。
这意味着所有的Vue.js模板都是可解析的有效的HTML,且通过一些特殊的特性做了增强。
Vue模板因而从根本上不同于基于字符串的模板,请记住这点。
插值
文本
数据绑定最基础的形式是文本插值,使用“Mustache”语法(双大括号):
Message:
{{msg}}
Mustache标签会被相应数据对象的 msg 属性的值替换。
每当这个属性变化时它也会更新。
你也可以只处理单次插值,今后的数据变化就不会再引起插值更新了:
Thiswillneverchange:
{{*msg}}
原始的HTML
双Mustache标签将数据解析为纯文本而不是HTML。
为了输出真的HTML字符串,需要用三Mustache标签:
{{{raw_html}}}
内容以HTML字符串插入——数据绑定将被忽略。
如果需要复用模板片断,应当使用partials。
在网站上动态渲染任意HTML是非常危险的,因为容易导致 XSS攻击。
记住,只对可信内容使用HTML插值,永不用于用户提交的内容。
HTML特性
Mustache标签也可以用在HTML特性(Attributes)内:
注意在Vue.js指令和特殊特性内不能用插值。
不必担心,如果Mustache标签用错了地方Vue.js会给出警告。
绑定表达式
放在Mustache标签内的文本称为绑定表达式。
在Vue.js中,一段绑定表达式由一个简单的JavaScript表达式和可选的一个或多个过滤器构成。
JavaScript表达式
到目前为止,我们的模板只绑定到简单的属性键。
不过实际上Vue.js在数据绑定内支持全功能的JavaScript表达式:
{{number+1}}
{{ok?
'YES':
'NO'}}
{{message.split('').reverse().join('')}}
这些表达式将在所属的Vue实例的作用域内计算。
一个限制是每个绑定只能包含单个表达式,因此下面的语句是无效的:
--这是一个语句,不是一个表达式:
-->
{{vara=1}}
--流程控制也不可以,可改用三元表达式-->
{{if(ok){returnmessage}}}
过滤器
Vue.js允许在表达式后添加可选的“过滤器(Filter)”,以“管道符”指示:
{{message|capitalize}}
这里我们将表达式 message 的值“管输(pipe)”到内置的 capitalize 过滤器,这个过滤器其实只是一个JavaScript函数,返回大写化的值。
Vue.js提供数个内置过滤器,在后面我们会谈到如何开发自己的过滤器。
注意管道语法不是JavaScript语法,因此不能在表达式内使用过滤器,只能添加到表达式的后面。
过滤器可以串联:
{{message|filterA|filterB}}
过滤器也可以接受参数:
{{message|filterA'arg1'arg2}}
过滤器函数始终以表达式的值作为第一个参数。
带引号的参数视为字符串,而不带引号的参数按表达式计算。
这里,字符串 'arg1' 将传给过滤器作为第二个参数,表达式 arg2 的值在计算出来之后作为第三个参数。
指令
指令(Directives)是特殊的带有前缀 v- 的特性。
指令的值限定为绑定表达式,因此上面提到的JavaScript表达式及过滤器规则在这里也适用。
指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。
我们来回头看下“概述”里的例子:
Hello!
这里 v-if 指令将根据表达式 greeting 值的真假删除/插入
元素。
参数
有些指令可以在其名称后面带一个“参数”(Argument),中间放一个冒号隔开。
例如,v-bind 指令用于响应地更新HTML特性:
href="url">
这里 href 是参数,它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。
可能你已注意到可以用特性插值 href="{{url}}" 获得同样的结果:
这样没错,并且实际上在内部特性插值会转为 v-bind 绑定。
另一个例子是 v-on 指令,它用于监听DOM事件:
click="doSomething">
Heretheargumentistheeventnametolistento.Wewilltalkabouteventhandlinginmoredetailstoo.
这里参数是被监听的事件的名字。
我们也会详细说明事件绑定。
修饰符
修饰符(Modifiers)是以半角句号 . 开始的特殊后缀,用于表示指令应当以特殊方式绑定。
例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式:
href.literal="/a/b/c">
当然,这似乎没有意义,因为我们只需要使用 href="/a/b/c" 而不必使用一个指令。
这个例子只是为了演示语法。
后面我们将看到修饰符更多的实践用法。
缩写
v- 前缀是一种标识模板中特定的Vue特性的视觉暗示。
当你需要在一些现有的HTML代码中添加动态行为时,这些前缀可以起到很好的区分效果。
但你在使用一些常用指令的时候,你会感觉一直这么写实在是啰嗦。
而且在构建单页应用时,Vue.js会管理所有的模板,此时 v- 前缀也没那么重要了。
因此Vue.js为两个最常用的指令 v-bind 和 v-on提供特别的缩写:
v-bind 缩写
--完整语法-->
href="url">
--缩写-->
href="url">
--完整语法-->
disabled="someDynamicCondition">Button
--缩写-->
disabled="someDynamicCondition">Button
v-on 缩写
--完整语法-->
click="doSomething">
--缩写-->
它们看起来跟“合法”的HTML有点不同,但是它们在所有Vue.js支持的浏览器中都能被正确地解析,并且不会出现在最终渲染的标记中。
缩写语法完全是可选的,不过随着一步步学习的深入,你会庆幸拥有它们。
计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作。
模板是为了描述视图的结构。
在模板中放入太多的逻辑会让模板过重且难以维护。
这就是为什么Vue.js将绑定表达式限制为一个表达式。
如果需要多于一个表达式的逻辑,应当使用计算属性。
基础例子
a={{a}},b={{b}}
varvm=newVue({
el:
'#example',
data:
{
a:
1
},
computed:
{
//一个计算属性的getter
b:
function(){
//`this`指向vm实例
returnthis.a+1
}
}
})
结果:
a=1,b=2
这里我们声明了一个计算属性 b。
我们提供的函数将用作属性 vm.b的getter。
console.log(vm.b)//->2
vm.a=2
console.log(vm.b)//->3
你可以打开浏览器的控制台,修改例子的vm。
vm.b 的值始终取决于 vm.a 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。
Vue知道 vm.b 依赖于 vm.a,因此当 vm.a 发生改变时,依赖于 vm.b 的绑定也会更新。
而且最妙的是我们是声明式地创建这种依赖关系:
计算属性的getter是干净无副作用的,因此也是易于测试和理解的。
计算属性vs.$watch
Vue.js提供了一个方法 $watch,它用于观察Vue实例上的数据变动。
当一些数据需要根据其它数据变化时, $watch 很诱人——特别是如果你来自AngularJS。
不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。
考虑下面例子:
{{fullName}}
varvm=newVue({
data:
{
firstName:
'Foo',
lastName:
'Bar',
fullName:
'FooBar'
}
})
vm.$watch('firstName',function(val){
this.fullName=val+''+this.lastName
})
vm.$watch('lastName',function(val){
this.fullName=this.firstName+''+val
})
上面代码是命令式的重复的。
跟计算属性对比:
varvm=
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
Vuejs
教程
概要
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。