JavaScript

超轻量级php框架startmvc

vue的基本用法与常见指令

更新时间:2020-05-30 02:36:01 作者:startmvc
什么是vue?Vue.js是JavaScriptMVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相

什么是vue?

Vue.js是JavaScript MVVM(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 () {
 var c = new Vue({
 el: '#box', //相当于选择器
 data: {
 content: 'ghostwu tell you how to learn vue',
 msg : 'vue中的数据1',
 msg2 : 'vue中的数据2'
 }
 });
}

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

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

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

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

具体怎么读取呢?


<div id="box">
 {{content}}
 <br>
 {{msg}}
 <br>
 {{msg2}}
</div>

{{data中定义的键}}, 如{{content}} 读取的就是vue实例 data里面的 content定义的值,所以{{content}}输出 ghostwu tell you how to learn vue, 同理{{msg}}输出vue中的数据1 ,

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

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


window.onload = function () {
 var c = new Vue({
 el: '#box', //相当于选择器
 data: {
 content: 'ghostwu tell you how to learn vue',
 msg : 'vue中的数据1',
 msg2 : 'vue中的数据2'
 }
 });
 var c2 = new Vue({
 el: '#box2',
 data: {
 msg: 'this is a paragraphy'
 }
 });
 var c3 = new Vue({
 el: '#box3',
 data: {
 msg2: 'this is box3'
 }
 });
 }
<p id="box2">{{msg}}</p>
<div id="box">
 {{content}}
 <br>
 {{msg}}
 <br>
 {{msg2}}
</div>
 <div id="box3">{{msg2}}</div>

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


window.onload = function () {
 var c = new Vue({
 el: "body",
 data: {
 msg: 'welcome to study vue!!!'
 }
 });
 }
<input type="text" v-model="msg" id="txt" />
 <input type="text" v-model="msg" id="txt2"/>
 <br/>
 {{msg}}
 <div class="box">
 {{msg}}
 </div>
 <div class="box">
 {{msg}}
 </div>
 <div class="box">
 {{msg}}
 </div>
 <div class="box">
 {{msg}}
 </div>

上例,如果修改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 () {
 var c = new Vue({
 el: 'body',
 data: {
 msg: 'this is a msg',
 msg2 : 'hello world!',
 arr : [ 100, 200, 300 ],
 flag : true,
 json : {
 key1 : '八戒',
 key2 : '悟空',
 key3 : '沙僧'
 },
 num : 100,
 }
 });
 }
{{msg}} <br/>
 {{msg2}} <br/>
 {{arr}} <br/>
 {{flag}} <br/>
 {{json}}<br/>
 {{num}}<br/>

输出结果:


this is a msg 
hello world! 
100,200,300 
true 
[object Object]
100

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

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


window.onload = function () {
 var c = new Vue({
 el: '#box',
 data: {
 persons: {
 name1: '八戒',
 name2: '沙增',
 name3: '悟空'
 }
 }
 });
 }
<div id="box">
 <ul>
 <li v-for="value in persons">{{value}}</li>
 </ul>
 <ul>
 <li v-for="a in persons">{{a}}</li>
 </ul>
</div>

输出结果:

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

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

v-for也可以循环数组


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

<ul id="box">
 <li v-for="value in arr">{{value}}</li>
 </ul>

输出结果:

张三 100 李四 200

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


<ul id="box">
 <li v-for="value in arr">{{value}}----{{$index}}</li>
</ul>

输出结果:

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

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


window.onload = function () {
 var c = new Vue({
 el : '#box',
 data : {
 persons : {
 name1 : "八戒",
 name2 : "悟空",
 name3 : "唐僧"
 }
 }
 });
 }
<ul id="box">
 <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
 <hr/>
 <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
 <hr/>
 <li v-for="(k,v) in persons">{{k}}----{{v}}---{{$index}}---{{$key}}</li>
</ul>

输出结果:


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

总结

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

vue 基本用法 vue指令