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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
JavaScript逻辑运算符相关总结
Sep 04 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
理解javascript异步编程
2016/01/27 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Python下载指定页面上图片的方法
2016/05/12 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python中文编码知识点
2019/02/18 Python
python爬取内容存入Excel实例
2019/02/20 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
python音频处理的示例详解
2020/12/23 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
《花木兰》教学反思
2014/04/09 职场文书
2014年保卫工作总结
2014/12/05 职场文书
会议新闻稿
2015/07/17 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Python socket如何解析HTTP请求内容
2022/02/12 Python