Vue.js先入个门看看
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单,先看看几个例子:
例一:Helloworld
html代码:
{{message}}
js代码:
newVue({
el:''#app'',
data:{
message:''HelloVue.js!''
}
})
例二:双向绑定
说明:html中以v-开头的标记都是vue.js提供的标记。v-model属性表示数据模型。
html代码:
{{message}}
js代码:
newVue({
el:''#app'',
data:{
message:''HelloVue.js!''
}
})
例三:渲染列表
说明:v-for表示遍历集合数据,下面的代码遍历集合todos并输出每项。
html代码:
js代码:
newVue({
el:''#app'',
data:{
todos:[
{text:''LearnJavaScript''},
{text:''LearnVue.js''},
{text:''BuildSomethingAwesome''}
]
}
})
例四:事件绑定
说明:v-on是vue.js特性,表示绑定事件方法。
html代码:
{{message}}
ReverseMessage
js代码:
newVue({
el:''#app'',
data:{
message:''HelloVue.js!''
},
methods:{
reverseMessage:function(){
this.message=this.message.split('''').reverse().join('''')
}
}
})
看完上面的4个例子,感觉vue.js挺容易入门,确实是这样,不得不说vue.js深受开发人员喜爱,简单易学。前面的例子只是展示了如何使用vue.js,但它到底包含了哪些功能?vue.js提供了两大核心功能:响应的数据绑定、视图组件化。接下来我们看看vue.js是怎么定义这两大功能的。
两大核心功能:响应的数据绑定、视图组件化
响应的数据绑定:vue.js拥抱数据驱动的概念,一当DOM和数据绑定,Dom将会和数据保持同步,数据有变动DOM会立即渲染,在也不用担心数据变更后DOM如何渲染的问题。并且如果手动修改数据绑定的DOM元素的值,数据模型也会被同步。因为vue.js支持双向绑定。绑定过程如下图所示:
视图组件化:vue支持抽象组件化,我们整个系统可以使用若干个小的组件构造,例如下面是一个html页面对应的摸快。整个系统可分为三个大的组件:app-nav、app-sidebar、app-content,app-sidebar下又包含两个小组件,app-content下包含三个小组件。这些组件也相当于是自定义的DOM元素,我们可以直接使用。
html代码:
前面简单介绍了vue的主要功能,接下来我们详细的看看在实际项目开发中,vue.js到底给我们提供了哪些方面的功能。
数据绑定语法
1.文本绑定:在html的文本字符串中,可以通过{{}}格式包含vue特性。
Message:{{msg}}
2.单向绑定:只同步一次,如果msg特性值有变化,html中的文本不会被更新。
Thiswillneverchange:{{msg}}
3.输出包含html的数据:1和2中的代码不支持输出html代码,需要用下面的格式。
{{{raw_html}}}
4.html属性值绑定
5.支持javascript表达式
{{number+1}}
{{ok?''YES'':''NO''}}
{{message.split('''').reverse().join('''')}}
6.过滤器:vue提供了属性过滤功能,下面的代码message是一个特性,filterA是一个过滤函数,最终输出为filterA(message)的结果。
{{message|filterA}}
7.判断语法:如果条件成立则输出结果,条件不成立无任何输出。
Hello!
8.html属性绑定:下面代码和:和效果一样,其实最终也会转换为v-bind模式。
9.事件绑定:使用v-on为html的事件属性绑定方法。
10.v-bind缩写:下面的第一段代码为v-bind的完整写法,第二段代码为缩写方式。
Button
Button
11.v-on缩写:和v-bind相似,区别在于v-on用@符号表示,而v-bind用:表示。
vue提供的语法让开发人员很方便的完成view和model的动态绑定,vue不仅提供特性和html元素属性的绑定,它对css和style支持也比较完善。
Class与Style绑定
1.class绑定对象特性:vue绑定class支持直接绑定json字符串格式设置。下面代码vue实例包含isA和isB两个类型为布尔的属性,可供元素的class直接绑定。下面的html代码有人会有疑问:在div上写了两次class属性。这个问题不用担心,vue会自动把两个class属性合并成一个。
html代码:
js代码:
data:{
isA:true,
isB:false
}
输出结果:
2.class字节绑定对象:vue支持直接给class属性绑定对象,这样写也更灵活些。
html代码:
js代码:
data:{
classObject:{
''class-a'':true,
''class-b'':false
}
}
3.数组语法:class属性可直接绑定一个数组,数组里边的项为vue实例特性。
html代码:
js代码:
data:{
classA:''class-a'',
classB:''class-b''
}
条件渲染
1.v-if和v-else:下面代码如果条件为true则输出yes,否则输出no。
Yes
No
2.templatev-if输出多条html元素:v-if和template标签配合使用可嵌入多个html标签,当着模板使用,最终输出值包含html元素。
Title
Paragraph1
Paragraph2
3.v-show和v-else:和v-if相似,都作为条件判断,不同点在于渲染的区别。v-if只有等条件成立时才会渲染html元素,而v-show不管条件是否成立都会渲染,如果条件不成立则设置元素的display为none。
4.v-show和组件混合使用问题:将v-show用在组件上时,由于指令优先级v-else会出问题,所以不要使用v-else。下面代码是错误的:
这可能也是一个组件
应该这样写:
这可能也是一个组件
列表渲染
1.语法v-for:通过v-for可遍历js对象集合,然后用可以直接输出每一项的数据。下面的代码直接用文本输出items的每项数据。
html代码:
{{item.message}}
js代码:
varexample1=newVue({
el:''#example-1'',
data:{
items:[
{message:''Foo''},
{message:''Bar''}
]
}
})
2.获取遍历项索引:使用v-for遍历有时候想得到每一项的索引值,可通过index直接获取,index直接获取,index是vue直接提供的特性。我们也可以给索引取别名:
{{idx}}{{item.message}}
3.template和v-for:有时候我们想每次输出多条html标签,那么我们可通过v-for和template配合使用达到效果:
4.操作数组:vue提供了一些数组操作方法,包括push、pop、shift、unshift、splice、sort、reverse等。如果我要对vue实例example1的集合特性items添加项,可以使用:
example1.items.push({message:‘Baz’});
如果要过滤数组选项,可以使用filter函数。例如下面的代码找出item属性message包含Foo的选项集合:
example1.items=example1.items.filter(function(item){
returnitem.message.match(/Foo/)
})
5.数组操作问题
不能直接使用数组索引设置元素,例如vm.items[0]={www.hunanwang.net},这样设置的话,vue是不能检测到数组的变化。可使用set方法:
example1.items.set(0,{childMsg:''Changed!''})
不能直接修改数组长度,这样设置后vue检测不到变化。可直接使用一个空数组替换:
example1.items=[];
6.对象v-for:v-for也可直接遍历对象属性。
html代码:
{{$key}}:{{value}}
js代码:
newVue({
el:''#repeat-object'',
data:{
object:{
FirstName:''John'',
LastName:''Doe'',
Age:30
}
}
})
方法与事件处理器
1.方法处理器:使用v-on监听DOM事件,例如
html代码:
Greet
js代码:
varvm=newVue({
el:''#example'',
data:{
name:''Vue.js''
},
//在`methods`对象中定义方法
methods:{
greet:function(event){
//方法内`this`指向vm
alert(''Hello''+this.name+''!'')
//`event`是原生DOM事件
alert(event.target.tagName)
}
}
})
2.如何传递参数:可直接传递字符串或者对象,如果想传递事件对象可以使用$event:
Submit
js代码和其他绑定一样:
//...
methods:{
say:function(msg,event){
//现在我们可以访问原生事件对象
event.preventDefault(www.visa158.com)
}
}
3.数据逻辑和事件逻辑隔离:为了让数据模型只处理数据逻辑,而不混杂其他逻辑,vue.js提供了两个事件修饰符.prevent和.stop。
4.按键修饰符:可以使用按键编码或者别名。
vue.js提供的别名包括:enter、tab、delete、esc、space、up、down、left、Right。
vue.js也支持自定义别名,例如我们想控制F1按键事件,可以先给F1(编码为112)定义一个别名:
//可以使用@keyup.f1
Vue.directive(''on'').keyCodes.f1=112
直接使用别名即可:
表单控件绑定
1.text控件:如果修改了text控件的值,span绑定的message会不同更新。
Messageis:{{message}}
2.checkbox控件
{{checked}}
多个checkbox绑定:每个checkbox绑定一个类型为数组的数据模型checkedNames。
html代码:
inputtype="checkbox"id="jack"value="Jack"v-model="checkedNames">
Jack
John
Mike
Checkednames:{{checkedNames|json}}
js代码:
newVue({
el:''...'',
data:{
checkedNames:[]
}
})
3.radio
One
Two
Picked:{{picked}}
4.select
单选:
A
Selected:{{selected}}
多选:
A
Selected:{{selected|json}}
select的option也可以动态通过v-for方式渲染。
html代码:
{{option.text}}
Selected:{{selected}}
js代码:
newVue({
el:''...'',
data:{
selected:''A'',
options:[
{text:''One'',value:''A''},
{text:''Two'',value:''B''},
{text:''Three'',value:''C''}
]
}
})
|
|