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=&quot;app&quot;&gt;

  &lt;p&gt;{{msg}}&lt;/p&gt;

&lt;/div&gt;

2.js



var app=new Vue({

    el:'#app',//标签的类名、id，用于获取元素

    //以键值对的形式存放用到的数据成员

    data:{

      msg:'显示的内容'

    },

    //包含要用到的函数方法

    methods:{

    }

  });

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

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

四、实例

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



&lt;!DOCTYPE html&gt;

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;

  &lt;meta charset=&quot;UTF-8&quot;&gt;

  &lt;title&gt;简易留言板&lt;/title&gt;

  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&quot;&gt;

  &lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;

  &lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot;&gt;

  &lt;style&gt;

  &lt;/style&gt;

  &lt;link rel=&quot;stylesheet&quot; href=&quot;../../node_modules/bootstrap/dist/css/bootstrap.min.css&quot; rel=&quot;external nofollow&quot; &gt;

  &lt;script src=&quot;../../node_modules/jquery/dist/jquery.min.js&quot;&gt;&lt;/script&gt;

  &lt;script src=&quot;../../node_modules/bootstrap/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

  &lt;script src=&quot;../../node_modules/vue/dist/vue.js&quot;&gt;&lt;/script&gt;

  &lt;script&gt;

   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);

         }

        }

      }

     });

   };

  &lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class=&quot;container&quot; id=&quot;box&quot;&gt;

  &lt;form role=&quot;form&quot;&gt;

   &lt;div class=&quot;form-group&quot;&gt;

     &lt;label for=&quot;username&quot;&gt;用户名:&lt;/label&gt;

     &lt;input type=&quot;text&quot; id=&quot;username&quot; class=&quot;form-control&quot; placeholder=&quot;输入用户名&quot; v-model=&quot;username&quot;&gt;

   &lt;/div&gt;

   &lt;div class=&quot;form-group&quot;&gt;

     &lt;label for=&quot;age&quot;&gt;年　龄:&lt;/label&gt;

     &lt;input type=&quot;text&quot; id=&quot;age&quot; class=&quot;form-control&quot; placeholder=&quot;输入年龄&quot; v-model=&quot;age&quot;&gt;

   &lt;/div&gt;

   &lt;div class=&quot;form-group&quot;&gt;

     &lt;input type=&quot;button&quot; value=&quot;添加&quot; class=&quot;btn btn-primary&quot; v-on:click=&quot;add()&quot;&gt;

     &lt;input type=&quot;reset&quot; value=&quot;重置&quot; class=&quot;btn btn-danger&quot;&gt;

   &lt;/div&gt;

  &lt;/form&gt;

  &lt;hr&gt;

  &lt;table class=&quot;table table-bordered table-hover&quot;&gt;

   &lt;h3 class=&quot;h3 text-info text-center&quot;&gt;用户信息表&lt;/h3&gt;

   &lt;tr class=&quot;text-danger&quot;&gt;

     &lt;th class=&quot;text-center&quot;&gt;序号&lt;/th&gt;

     &lt;th class=&quot;text-center&quot;&gt;名字&lt;/th&gt;

     &lt;th class=&quot;text-center&quot;&gt;年龄&lt;/th&gt;

     &lt;th class=&quot;text-center&quot;&gt;操作&lt;/th&gt;

   &lt;/tr&gt;

   &lt;tr class=&quot;text-center&quot; v-for=&quot;(item,index) in myData&quot;&gt;

     &lt;td&gt;{{index+1}}&lt;/td&gt;

     &lt;td&gt;{{item.name}}&lt;/td&gt;

     &lt;td&gt;{{item.age}}&lt;/td&gt;

     &lt;td&gt;

      &lt;button class=&quot;btn btn-primary btn-sm&quot; data-toggle=&quot;modal&quot; data-target=&quot;#layer&quot; v-on:click=&quot;nowIndex=$index&quot;&gt;删除&lt;/button&gt;

     &lt;/td&gt;

   &lt;/tr&gt;

   &lt;tr v-show=&quot;myData.length!=0&quot;&gt;

     &lt;td colspan=&quot;4&quot; class=&quot;text-right&quot;&gt;

      &lt;button class=&quot;btn btn-danger btn-sm&quot; v-on:click=&quot;nowIndex=-2&quot; data-toggle=&quot;modal&quot; data-target=&quot;#layer&quot; &gt;删除全部&lt;/button&gt;

     &lt;/td&gt;

   &lt;/tr&gt;

   &lt;tr v-show=&quot;myData.length==0&quot;&gt;

     &lt;td colspan=&quot;4&quot; class=&quot;text-center text-muted&quot;&gt;

      &lt;p&gt;暂无数据....&lt;/p&gt;

     &lt;/td&gt;

   &lt;/tr&gt;

  &lt;/table&gt;

  &lt;!--模态框 弹出框--&gt;

  &lt;div role=&quot;dialog&quot; class=&quot;modal fade bs-example-modal-sm&quot; id=&quot;layer&quot;&gt;

   &lt;div class=&quot;modal-dialog&quot;&gt;

     &lt;div class=&quot;modal-content&quot;&gt;

      &lt;div class=&quot;modal-header&quot;&gt;

        &lt;h4 class=&quot;modal-title&quot;&gt;确认删除么?&lt;/h4&gt;

        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;

         &lt;span&gt;×&lt;/span&gt;

        &lt;/button&gt;

      &lt;/div&gt;

      &lt;div class=&quot;modal-body text-right&quot;&gt;

        &lt;button data-dismiss=&quot;modal&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;取消&lt;/button&gt;

        &lt;button data-dismiss=&quot;modal&quot; class=&quot;btn btn-danger btn-sm&quot; v-on:click=&quot;deleteMsg(nowIndex)&quot;&gt;确认&lt;/button&gt;

      &lt;/div&gt;

     &lt;/div&gt;

   &lt;/div&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

运行效果：

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

Vue常用指令详解分析的更多相关文章

ImageMagick常用指令详解
Imagemagick常用指令 (ImageMagick--蓝天白云) (ImageMagick官网) (其他比较有价值的IM参考) (图片自动旋转的前端实现方案) convert 转换图像格式和大小 ...
基于header的一些常用指令详解
header常用指令 header分为三部分: 第一部分为HTTP协议的版本(HTTP-Version): 第二部分为状态代码(Status): 第三部分为原因短语(Reason-Phrase) ...
Vue入门---常用指令详解
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...
vue指令详解
一.vue简绍 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...
vue 源码详解（一）：原型对象和全局 `API`的设计
vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...
GCC 指令详解及动态库、静态库的使用
GCC 指令详解及动态库.静态库的使用一.GCC 1.1 GCC 介绍 GCC 是 Linux 下的编译工具集,是「GNU Compiler Collection」的缩写,包含 gcc.g++ 等编 ...
find常用参数详解
find常用参数详解作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 在linux系统中,在init 3模式情况下都是命令行模式,这个时候我们想要找到一个文件的就得依赖一个非常好用的 ...
samtools常用命令详解（转）
转自:samtools常用命令详解 samtools的说明文档:http://samtools.sourceforge.net/samtools.shtml samtools是一个用于操作sam和ba ...
rsync常用参数详解
rsync常用参数详解作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 在linux中,一切皆是文件,包括你的终端,硬件设备信息,目录,内核文件等等.所以工作中我们难免会遇到拷贝文件 ...

随机推荐

Vue 开发技巧总结
博客地址:https://ainyi.com/95 本人玩了 Vue 两年多,在此总结一下开发时的一些技巧和方法自定义组件 v-model v-model 是 Vue 提供的一个语法糖,它本质上是 ...
[PKUWC2018]Minimax 题解
根据题意,若一个点有子节点,则给出权值:否则可以从子节点转移得来. 若没有子节点,则直接给出权值: 若只有一个子节点,则概率情况与该子节点完全相同: 若有两个子节点,则需要从两个子节点中进行转移. 如 ...
使用 Python破解大众点评字体加密（SVG反扒）
前言大众点评拥有大量高质量评论信息.种草信息,同时也有非常严格的反扒机制. 今天我们一起使用 Python破解大众点评字体加密,获取极具商业价值的信息. 本文知识点: requests 的使用 xp ...
Tornado + vue.js 前后端分离运行脚本
shell脚本部分: #!/bin/bash 主脚本 (./cem-demo_publish_front) (./cem-demo_publish_backend) #!/bin/bash 后端脚本 ...
RabbitMQ高级之消息限流与延时队列
人生终将是场单人旅途,孤独之前是迷茫,孤独过后是成长. 楔子本篇是消息队列RabbitMQ的第五弹. 上篇本来打算讲述RabbitMQ的一些高级用法: 如何保证消息的可靠性? 消息队列如何进行限流? ...
【Android】Android开发小功能，倒计时的实现。时间计时器倒计时功能。
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
《神经网络的梯度推导与代码验证》之CNN的前向传播和反向梯度推导
在FNN(DNN)的前向传播,反向梯度推导以及代码验证中,我们不仅总结了FNN(DNN)这种神经网络结构的前向传播和反向梯度求导公式,还通过tensorflow的自动求微分工具验证了其准确性.在本篇章 ...
wxWidgets教程
https://www.wxwidgets.org/docs/tutorials/ http://zetcode.com/gui/wxwidgets/ https://docs.wxwidgets.o ...
Python模拟保护和私有成员
保护成员:以一个下划线开头.Python不会做特殊处理私有成员:以两个下划线开头.Python会做mangling
【转】Mac下Eclipse快捷键
http://blog.sina.com.cn/s/blog_677089db01019jgh.html Command + O:显示大纲Command + 1:快速修复Command + D:删除当 ...

Vue常用指令详解分析

Vue常用指令详解分析的更多相关文章

随机推荐

热门专题