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 相关文章推荐
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
js实现网页随机验证码
Oct 19 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
FleaPHP的安全设置方法
2008/09/15 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python自动zip压缩目录的方法
2015/06/28 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
惠普香港官方商店:HP香港
2019/04/30 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
社区敬老月活动实施方案
2014/02/17 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
单位工作证明书格式
2014/10/04 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
公司员工手册范本
2015/05/14 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers