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 相关文章推荐
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
微信小程序云开发之使用云数据库
May 17 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
ADODB的数据库封包程序库
2006/12/31 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php语法检查的方法总结
2019/01/21 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
JavaScript入门基础
2015/08/12 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
JavaScript如何操作css
2020/10/24 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python中的并发编程实例
2014/07/07 Python
python修改注册表终止360进程实例
2014/10/13 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python opencv实现证件照换底功能
2019/08/19 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
日语求职信范文
2013/12/17 职场文书
班干部演讲稿
2014/04/24 职场文书
美术学专业求职信
2014/07/23 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
退休教师追悼词
2015/06/23 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS