Vue常用指令详解分析

Vue入门

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

一、指令

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

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

二、基本组件属性


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

三、基础使用 1.html


lt;div id=;app;gt;
  lt;pgt;{{msg}}lt;/pgt;
lt;/divgt;

2.js


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

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

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

四、实例

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


lt;!DOCTYPE htmlgt;
lt;html lang=;en;gt;
lt;headgt;
  lt;meta charset=;UTF-8;gt;
  lt;titlegt;简易留言板lt;/titlegt;
  lt;meta name=;viewport; content=;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;gt;
  lt;meta name=;apple-mobile-web-app-capable; content=;yes;gt;
  lt;meta name=;apple-mobile-web-app-status-bar-style; content=;black;gt;
  lt;stylegt;
 
  lt;/stylegt;
  lt;link rel=;stylesheet; href=;../../node_modules/bootstrap/dist/css/bootstrap.min.css; rel=;external nofollow; gt;
  lt;script src=;../../node_modules/jquery/dist/jquery.min.js;gt;lt;/scriptgt;
  lt;script src=;../../node_modules/bootstrap/dist/js/bootstrap.min.js;gt;lt;/scriptgt;
 
  lt;script src=;../../node_modules/vue/dist/vue.js;gt;lt;/scriptgt;
  lt;scriptgt;
   window.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);
         }
        }
      }
     });
   };
  lt;/scriptgt;
lt;/headgt;
lt;bodygt;
lt;div class=;container; id=;box;gt;
  lt;form role=;form;gt;
   lt;div class=;form-group;gt;
     lt;label for=;username;gt;用户名:lt;/labelgt;
     lt;input type=;text; id=;username; class=;form-control; placeholder=;输入用户名; v-model=;username;gt;
   lt;/divgt;
   lt;div class=;form-group;gt;
     lt;label for=;age;gt;年 龄:lt;/labelgt;
     lt;input type=;text; id=;age; class=;form-control; placeholder=;输入年龄; v-model=;age;gt;
   lt;/divgt;
   lt;div class=;form-group;gt;
     lt;input type=;button; value=;添加; class=;btn btn-primary; v-on:click=;add();gt;
     lt;input type=;reset; value=;重置; class=;btn btn-danger;gt;
   lt;/divgt;
  lt;/formgt;
  lt;hrgt;
  lt;table class=;table table-bordered table-hover;gt;
   lt;h3 class=;h3 text-info text-center;gt;用户信息表lt;/h3gt;
   lt;tr class=;text-danger;gt;
     lt;th class=;text-center;gt;序号lt;/thgt;
     lt;th class=;text-center;gt;名字lt;/thgt;
     lt;th class=;text-center;gt;年龄lt;/thgt;
     lt;th class=;text-center;gt;操作lt;/thgt;
   lt;/trgt;
   lt;tr class=;text-center; v-for=;(item,index) in myData;gt;
     lt;tdgt;{{index+1}}lt;/tdgt;
     lt;tdgt;{{item.name}}lt;/tdgt;
     lt;tdgt;{{item.age}}lt;/tdgt;
     lt;tdgt;
      lt;button class=;btn btn-primary btn-sm; data-toggle=;modal; data-target=;#layer; v-on:click=;nowIndex=$index;gt;删除lt;/buttongt;
     lt;/tdgt;
   lt;/trgt;
   lt;tr v-show=;myData.length!=0;gt;
     lt;td colspan=;4; class=;text-right;gt;
      lt;button class=;btn btn-danger btn-sm; v-on:click=;nowIndex=-2; data-toggle=;modal; data-target=;#layer; gt;删除全部lt;/buttongt;
     lt;/tdgt;
   lt;/trgt;
   lt;tr v-show=;myData.length==0;gt;
     lt;td colspan=;4; class=;text-center text-muted;gt;
      lt;pgt;暂无数据....lt;/pgt;
     lt;/tdgt;
   lt;/trgt;
  lt;/tablegt;
 
  lt;!--模态框 弹出框--gt;
  lt;div role=;dialog; class=;modal fade bs-example-modal-sm; id=;layer;gt;
   lt;div class=;modal-dialog;gt;
     lt;div class=;modal-content;gt;
      lt;div class=;modal-header;gt;
        lt;h4 class=;modal-title;gt;确认删除么?lt;/h4gt;
        lt;button type=;button; class=;close; data-dismiss=;modal;gt;
         lt;spangt;×lt;/spangt;
        lt;/buttongt;
 
      lt;/divgt;
      lt;div class=;modal-body text-right;gt;
        lt;button data-dismiss=;modal; class=;btn btn-primary btn-sm;gt;取消lt;/buttongt;
        lt;button data-dismiss=;modal; class=;btn btn-danger btn-sm; v-on:click=;deleteMsg(nowIndex);gt;确认lt;/buttongt;
      lt;/divgt;
     lt;/divgt;
   lt;/divgt;
  lt;/divgt;
lt;/divgt;
lt;/bodygt;
lt;/htmlgt;

运行效果:

原文链接:https://my.oschina.net/u/3970421/blog/2987694

最新回复(0)
/jishu0QJzmHDy87HN3lpxVGPSJeo_2BnNSsqIPlsiw1Uw_3D_3D4488391
8