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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 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
一个域名查询的程序
2006/10/09 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
python进阶教程之循环对象
2014/08/30 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
小学班主任事迹材料
2014/12/17 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
毕业感言怎么写
2015/07/31 职场文书