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

随机推荐

better-scroll实现滚动
通过better-scroll这个插件实现微信好友滚动列表安装better-scroll npm i better-scroll 初始化better-scroll //better-scroll ...
smtplib文字邮件的发送
今天跟大家讲解一下接口测试框架的知识准备阶段,首先是发送纯文字的电子邮件,会的同学可以忽略,不会的就多敲几遍,直到自己能敲出来为止~~ # coding: utf-8import smtplibfro ...
ETC1
对纹理进行Alpha通道分离的好处 https://blog.csdn.net/u011926026/article/details/53982180 拆分贴图的Alpha通道 --对抗ETC1的原罪 ...
mac 下配置连接Linux服务器方法，上传下载文件操作
1.先按照文档在本地生成SSHkey 2.mac输入 sudo -i 进入超级管理员#模式下,然后创建用户 #useradd XXXadmin #passwd XXXadmin XXXadmin用户 ...
一文吃透redis持久化，妈妈再也不担心我面试过不了！
持久化介绍 redis 提供了两种方式方式进行数据的持久化(将数据存储到硬盘中):第一种称为快照(snapshotting)RDB,它将某一时刻的所有数据都写入硬盘,所以快照是一次全量备份,并且存储的 ...
[BUUOJ记录] [BJDCTF2020]Easy MD5
各种关于md5的Bypass操作,都是基本操作,考察数组绕过.弱类型比较绕过以及md5($password,true) ByPass 1.利用md5($password,true)实现SQL注入 F1 ...
Ocelot+Consul实现微服务架构
API网关 API 网关一般放到微服务的最前端,并且要让API 网关变成由应用所发起的每个请求的入口.这样就可以明显的简化客户端实现和微服务应用程序之间的沟通方式.以前的话,客户端不得不去请求微服务A ...
mysql排序的问题与获取第几高的分数的信息
1:先截图看效果 2:完整的SQl语句 SELECT * FROM studentscore; -- ------------------ SET @maxscore=(SELECT MAX(scor ...
Q200510-02: 重复的DNA序列程序解法
问题: 重复的DNA序列所有 DNA 都由一系列缩写为 A,C,G 和 T 的核苷酸组成,例如:“ACGAATTCCG”.在研究 DNA 时,识别 DNA 中的重复序列有时会对研究非常有帮助. 编 ...
Python 3.8.1 各版本下载地址
Version Operating System Description MD5 Sum File Size GPG Gzipped source tarball Source release f ...

Vue常用指令详解分析

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

随机推荐

热门专题