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的基本用法与常见指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JDK容器学习之Queue: ArrayBlockingQueue
- 手机APP安装包缩减方案
- react-native添加redux支持
- Java并发学习之ReentrantLock的工作原理及使用姿势
- Linux基础(day63)
- IOS WebView控件详解
- Java并发学习之synchronized使用小结
- 18.3/18.4/18.5 用keepalived配置高可用集群
- JDK容器学习之Queue:DelayQueue
- React-Native组件之 Navigator和NavigatorIOS
- JDK容器学习之Queue:ConcurrentLinkedQueue
- JDK容器学习之Queue: PriorityQueue
- React Native导航器之react-navigation使用
- Nginx 路由转发配置笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法