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中,一切皆是文件,包括你的终端,硬件设备信息,目录,内核文件等等.所以工作中我们难免会遇到拷贝文件 ...

随机推荐

Java 实例 - 获取本机ip地址及主机名
package guyu.day0824; import java.net.InetAddress; /** * @Author: Fred * @Date: 2020/8/24 09:39 */ p ...
fprintfAndFscanf简单操作
C语言fscanf和fprintf函数的用法详解(格式化读写文件)(代码转载) #include<stdio.h> #define N 2 struct stu{ char name[10 ...
linux字符终端（控制台）的字体更改
查看已安装的终端字体 ls /usr/share/consolefonts/ 设置终端字体 sudo dpkg-reconfigure console-setup 或者 sudo vim /etc/d ...
Spring Boot 如何快速集成 Redis 哨兵？
上一篇:Spring Boot 如何快速集成 Redis? 前面的分享栈长介绍了如何使用 Spring Boot 快速集成 Redis,上一篇是单机版,也有粉丝留言说有没有 Redis Sentine ...
【Android】时间选择器，选择日期DatePicker 简单详解demo及教程
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
WPF实现手势解锁
桌面程序的解锁方式一般是账号密码,互联网的可以使用扫码解锁,甚至人脸识别.但扫码需要网络,人脸识别又较复杂.所以就想把安卓常用的手势解锁移植到桌面程序上. 先来张效果图,有兴趣的往下看,没兴趣的打扰了 ...
Beware of the encrypted VM
A friend of mine Megan told me that she got an error message as below screenshot when trying to open ...
Avtiviti工作流规范 BPM与BPMN
进过长时间的轮转,重拾Activiti,因为最近在智联上看到多家公司的需求上写的,都要熟悉工作流引擎,也就是activiti所以重拾之前看的视屏是activiti5,我觉得版本有点低,所以打算看一下 ...
zt：HttpUrlConnection使用详解
下文转载自:https://www.cnblogs.com/tenWood/p/8563617.html 一,HttpURLconnection的介绍在Android开发中网络请求是最常用的操作之一 ...
微信小程序爬坑记
1.this.setData修改数组里的值1).data: { hide:[true,true] },this.setData({ 'hide[0]': false});2).var str = &q ...

Vue常用指令详解分析

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

随机推荐

热门专题