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 相关文章推荐
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
使用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/12/30 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
EsLint入门学习教程
2017/02/17 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
JS实现多功能计算器
2020/10/28 Javascript
python列表的常用操作方法小结
2016/05/21 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
大学生实习思想汇报
2014/01/12 职场文书
爱心捐款倡议书
2014/04/14 职场文书
开学典礼演讲稿
2014/05/23 职场文书
护士实习求职信
2014/06/22 职场文书
应聘护士求职信
2014/07/21 职场文书
三问三解心得体会
2014/09/05 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
党员个人年度总结
2015/02/14 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
学风建设主题班会
2015/08/17 职场文书
golang 实现并发求和
2021/05/08 Golang
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python