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语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
js利用拖放实现添加删除
Aug 27 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
1.PHP简介
2006/10/09 PHP
PHP+javascript模拟Matrix画面
2006/10/09 PHP
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP Cookie学习笔记
2016/08/23 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
高一政治教学反思
2014/01/28 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
《金子》教学反思
2014/04/13 职场文书
2015年团支书工作总结
2015/04/03 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技