vue的基本用法与常见指令


Posted in Javascript onAugust 15, 2017

什么是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的基本用法与常见指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 #Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 #Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 #Javascript
form表单序列化详解(推荐)
Aug 15 #Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 #Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 #Javascript
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
You might like
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
jquery操作select大全
2014/04/25 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
js实现圆盘记速表
2015/08/03 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python制作刷网页流量工具
2017/04/23 Python
深入理解Django中内置的用户认证
2017/10/06 Python
Python中反射和描述器总结
2018/09/23 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
公司2015年终工作总结
2015/05/26 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Python 多线程处理任务实例
2021/11/07 Python
nginx lua 操作 mysql
2022/05/15 Servers