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 相关文章推荐
js动态生成指定行数的表格
Jul 11 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
vue 实现购物车总价计算
Nov 06 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
Admin generator, filters and I18n
2011/10/06 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
设定php简写功能的方法
2019/11/28 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
json数据的列循环示例
2013/09/06 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
简单学习vue指令directive
2016/11/03 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python线程的几种创建方式详解
2019/08/29 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
python的setattr函数实例用法
2020/12/16 Python
环保口号大全
2014/06/12 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书