什么是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的基本结构如下:
1,使用vue,先要实例化一个vue
2,构造函数中,传入字面量对象, data后面也是一个字面量对象,里面的数据可以自定义,按照json的格式
3,el: 表示要把data中的数据显示在 el 后面跟的元素下面, 比如上面的例子, 就是把data中,content,msg,msg2的数据显示在id 为 Box的元素下面
具体怎么读取呢?
{{msg}}
{{msg2}}
{{data中定义的键}}, 如{{content}} 读取的就是vue实例 data里面的 content定义的值,所以{{content}}输出 ghostwu tell you how to learn vue, 同理{{msg}}输出vue中的数据1,
{{msg2}}输出 vue中的数据2
如果我们需要让数据显示在不同的元素下面,可以定义多个vue实例
Box2">{{msg}}
{{msg}}
{{msg2}}
指令:v-model 作用:实现数据的双向驱动
上例,如果修改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中可以定义哪些数据?
常见的字符串,整形数字,数组,布尔,对象类型都可以
{{msg2}}
{{arr}}
{{flag}}
{{json}}
{{num}}
输出结果:
对于json数据,默认情况输出的是object Object,实际使用中,我们肯定是不希望输出这玩意, 所以,vue中提供了一个指令v-for
指令:v-for. 作用:循环数组与对象
输出结果:
八戒 沙增 悟空 八戒 沙增 悟空
v-for指令中, in前面的变量,就是当前需要输出persons的每一项的值,他的名称可以自定义.
v-for也可以循环数组
<ul id="Box">
<li v-for="value in arr">{{value}}
输出结果:
张三 100 李四 200
如果需要获取当前数组项的索引,可以用{{$index}}
- Box">
输出结果:
张三----0 100----1 李四----2 200----3
v-for还有另外几种形式,输出数组:
- Box">
-
-
输出结果:
总结
以上所述是小编给大家介绍的vue的基本用法与常见指令。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文地址:https://www.jb51.cc/vue/37140.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。