微客导航 » 文章资讯 » vue的基本用法与常见指令

vue的基本用法与常见指令

2023-09-26 11:07:06 145

什么是vue?

Vue.js是JavaScriptMVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。

vue是由尤雨溪开发的一款基于MVVM的框架，M->模型，V->视图，也就是说模型数据改变了，视图也跟着改变，视图内容改变，模型内容也跟着改变，业界称之为双向绑定，或者说双向数据驱动，基于此特点，学习这个框架，跟jquery完全不同，不要用DOM的思想来学习vue,在vue里面几乎不需要用到DOM操作，一切都是基于数据驱动.

如何使用vue?

现在vue已经发布了2版本，为什么学1版本，如果想要深入的学习vue，了解和掌握个版本的异同是很有必要的。要想使用vue,首先必须引入vue，在客户端(浏览器)可以通过script标签引入，如果是服务端，通过import引入

一个基本的vue程序有哪些部分组成？

就像初学者学习jquery一样，一个基本的jquery程序，有domReady,选择器，this绑定，事件绑定，属性和样式修改组成的，而vue的基本结构如下：

window.onload=function(){
varc=newVue({
el:'#box',//相当于选择器
data:{
content:'ghostwutellyouhowtolearnvue',
msg:'vue中的数据1',
msg2:'vue中的数据2'
}
});
}

这段简单的代码，可以实现最基本的数据读取和显示功能.

1，使用vue，先要实例化一个vue

2,构造函数中，传入字面量对象，data后面也是一个字面量对象，里面的数据可以自定义，按照json的格式

3,el:表示要把data中的数据显示在el后面跟的元素下面，比如上面的例子，就是把data中,content,msg,msg2的数据显示在id为box的元素下面

具体怎么读取呢？


{{content}}


{{msg}}


{{msg2}}

{{data中定义的键}}，如{{content}}读取的就是vue实例data里面的content定义的值，所以{{content}}输出ghostwutellyouhowtolearnvue，同理{{msg}}输出vue中的数据1,

{{msg2}}输出vue中的数据2

如果我们需要让数据显示在不同的元素下面，可以定义多个vue实例

window.onload=function(){
varc=newVue({
el:'#box',//相当于选择器
data:{
content:'ghostwutellyouhowtolearnvue',
msg:'vue中的数据1',
msg2:'vue中的数据2'
}
});
varc2=newVue({
el:'#box2',
data:{
msg:'thisisaparagraphy'
}
});
varc3=newVue({
el:'#box3',
data:{
msg2:'thisisbox3'
}
});
}
{{msg}}

{{content}}


{{msg}}


{{msg2}}

指令：v-model 作用：实现数据的双向驱动

window.onload=function(){
varc=newVue({
el:"body",
data:{
msg:'welcometostudyvue!!!'
}
});
}




{{msg}}

{{msg}}

上例，如果修改data中msg的值，那么输入框中v-model绑定的msg,以及4个div中输出的msg的值都会随着data中msg的值的变化而变化，这个就叫做M->V，模型M(data中的数据),

视图V(html代码). 模型改变，视图V也跟着改变，同样的上面两个input输入框中的值任何一个改变了，data中的msg也会改变，4个div中的msg也跟着改变，这个就叫做V->M，视图改变，模型数据也跟着改变.

data中可以定义哪些数据？

常见的字符串，整形数字，数组，布尔，对象类型都可以

window.onload=function(){
varc=newVue({
el:'body',
data:{
msg:'thisisamsg',
msg2:'helloworld!',
arr:[100,200,300],
flag:true,
json:{
key1:'八戒',
key2:'悟空',
key3:'沙僧'
},
num:100,
}
});
}
{{msg}}

{{msg2}}

{{arr}}

{{flag}}

{{json}}

{{num}}

输出结果：

thisisamsg
helloworld!
100,200,300
true
[objectObject]
100

对于json数据，默认情况输出的是objectObject，实际使用中，我们肯定是不希望输出这玩意，所以，vue中提供了一个指令v-for

指令：v-for.作用：循环数组与对象

window.onload=function(){
varc=newVue({
el:'#box',
data:{
persons:{
name1:'八戒',
name2:'沙增',
name3:'悟空'
}
}
});
}


{{value}}


{{a}}

输出结果:

八戒
沙增
悟空
八戒
沙增
悟空

v-for指令中，in前面的变量，就是当前需要输出persons的每一项的值，他的名称可以自定义.

v-for也可以循环数组

window.onload=function(){
varc=newVue({
el:'#box',
data:{
arr:['张三',100,'李四',200]
}
});
}


{{value}}

输出结果：

张三
100
李四
200

如果需要获取当前数组项的索引，可以用{{$index}}


{{value}}----{{$index}}

输出结果：

张三----0
100----1
李四----2
200----3

v-for还有另外几种形式，输出数组:

window.onload=function(){
varc=newVue({
el:'#box',
data:{
persons:{
name1:"八戒",
name2:"悟空",
name3:"唐僧"
}
}
});
}

{{value}}---{{$index}}----{{$key}}

{{value}}---{{$index}}----{{$key}}

{{k}}----{{v}}---{{$index}}---{{$key}}

输出结果：

八戒---0----name1
悟空---1----name2
唐僧---2----name3
八戒---0----name1
悟空---1----name2
唐僧---2----name3
name1----八戒---0---name1
name2----悟空---1---name2
name3----唐僧---2---name3

总结

以上所述是小编给大家介绍的vue的基本用法与常见指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue的基本用法与常见指令

热门推荐

随机推荐