Vue常用指令详解分析


Posted in Javascript onAugust 19, 2018

Vue入门

Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单、易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了。比较适用于移动端,轻量级的框架,文件小,运行速度快。最近,闲来无事,所以学习一下Vue这个流行的框架,以备后用。

一、指令

  1. v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)
  2. v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
  3. v-show 显示内容 (同angular中的ng-show)
  4. v-hide 隐藏内容(同angular中的ng-hide)
  5. v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)
  6. v-else-if 必须和v-if连用
  7. v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
  8. v-bind 动态绑定 作用: 及时对页面的数据进行更改
  9. v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
  10. v-text 解析文本
  11. v-html 解析html标签
  12. v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
  13. v-once 进入页面时 只渲染一次 不在进行渲染
  14. v-cloak 防止闪烁
  15. v-pre 把标签内部的元素原位输出

二、基本组件属性

new Vue({
 el,     // 要绑定的 DOM element
 template,  // 要解析的模板,可以是 #id, HTML 或某?? DOM element
 data,    // 要绑定的数据
 computed,  // 依赖于别的数据计算出来的数据, name = firstName + lastName
 watch,   // 监听方法, 监听到某一数据变化时, 需要做的对应操作
 methods,  // 定义可以在元件或模板?仁褂玫姆椒
})

三、基础使用

1.html

<div id="app">
  <p>{{msg}}</p>
</div>

2.js

var app=new Vue({
    el:'#app',//标签的类名、id,用于获取元素
    //以键值对的形式存放用到的数据成员
    data:{
      msg:'显示的内容'    
    },
    //包含要用到的函数方法
    methods:{      
    }
  });

这样js中msg的内容就会在p标签内显示出来。

四、实例

利用bootstrap+vue实现简易留言板的功能,可以增加、删除,弹出模态框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简易留言板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <style>

  </style>
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" >
  <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

  <script src="../../node_modules/vue/dist/vue.js"></script>
  <script>
   window.onload=function(){
     new Vue({
      el:'#box',
      data:{
        myData:[],
        username:'',
        age:'',
        nowIndex:-100
      },
      methods:{
        add:function(){
         this.myData.push({
           name:this.username,
           age:this.age
         });

         this.username='';
         this.age='';
        },
        deleteMsg:function(n){
         if(n==-2){
           this.myData=[];
         }else{
           this.myData.splice(n,1);
         }
        }
      }
     });
   };
  </script>
</head>
<body>
<div class="container" id="box">
  <form role="form">
   <div class="form-group">
     <label for="username">用户名:</label>
     <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
   </div>
   <div class="form-group">
     <label for="age">年 龄:</label>
     <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">
   </div>
   <div class="form-group">
     <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
     <input type="reset" value="重置" class="btn btn-danger">
   </div>
  </form>
  <hr>
  <table class="table table-bordered table-hover">
   <h3 class="h3 text-info text-center">用户信息表</h3>
   <tr class="text-danger">
     <th class="text-center">序号</th>
     <th class="text-center">名字</th>
     <th class="text-center">年龄</th>
     <th class="text-center">操作</th>
   </tr>
   <tr class="text-center" v-for="(item,index) in myData">
     <td>{{index+1}}</td>
     <td>{{item.name}}</td>
     <td>{{item.age}}</td>
     <td>
      <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
     </td>
   </tr>
   <tr v-show="myData.length!=0">
     <td colspan="4" class="text-right">
      <button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >删除全部</button>
     </td>
   </tr>
   <tr v-show="myData.length==0">
     <td colspan="4" class="text-center text-muted">
      <p>暂无数据....</p>
     </td>
   </tr>
  </table>

  <!--模态框 弹出框-->
  <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
   <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">确认删除么?</h4>
        <button type="button" class="close" data-dismiss="modal">
         <span>×</span>
        </button>

      </div>
      <div class="modal-body text-right">
        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
        <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
      </div>
     </div>
   </div>
  </div>
</div>
</body>
</html>

运行效果:

Vue常用指令详解分析

Javascript 相关文章推荐
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 #Javascript
layui获取选中行数据的实例讲解
Aug 19 #Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 #Javascript
菊花转动的jquery加载动画效果
Aug 19 #jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
jQuery UI实现动画效果代码分享
Aug 19 #jQuery
基于layui数据表格以及传数据的方式
Aug 19 #Javascript
You might like
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
Python装饰器原理与简单用法实例分析
2018/04/29 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python连接mysql方法及常用参数
2020/09/01 Python
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
二年级语文教学反思
2014/02/02 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
总经理任命书
2014/03/29 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
2014年师德承诺书
2014/05/23 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
学生保证书
2015/01/16 职场文书
原告代理词范文
2015/05/25 职场文书