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

随机推荐

区块链入门到实战（23）之以太坊(Ethereum) – 虚拟机架构
以太坊(Ethereum)网络中,定义了一组通用协议用于支持智能合约的运行,其核心便是以太坊(Ethereum)虚拟机. 下图解释了该架构: 开发人员使用Solidity等开发语言开发智能合约源程序 ...
Java面试题（Java基础篇）
Java 基础 1.JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
新手oracle重启、监听
有一次遇到了记录下. #su到oracle用户下 [root@localhost ~]# su - oracle #重启数据库:[oracle@localhost ~]$ sqlplus /nolo ...
Codeforces1348 题解
AC代码连接 A Phoenix and Balance 显而易见,将前$\frac{n}{2}-1$个和最后1个分为1组,剩下的1组即为最优方案. B Phoenix and Science 这 ...
IDEA Activiti 画图中文乱码
画流程图时,如果节点的name填写的是中文,再次打开流程图时中文会显示乱码,如下图: 修改idea64.exe.vmoptions文件,在文件中加上如下代码: -Dfile.encoding=utf- ...
Mysql业务设计（逻辑设计）
逻辑设计数据库设计三大范式数据库设计第一大范式数据库表中所有的字段都只具有单一属性单一属性的列是由基本数据类型所构成设计出来的表都是简单的二维表数据库设计的第二大范式要求表中只有一个业务 ...
Oracle Sqlplus 三项设置
显示sql执行时间:set timing on 显示sql execute plan:set autotrace trace exp 关闭 set autotrace off 设置行宽:set li ...
交换机&&路由器
交换机交换机就是一种信号转发设备,它帮助两个网络节点进行信号的传输路由器路由器路由器,要了解什么是路由器,首先我们要先明白何为'路由'? 路由:是指把数据从一个地方传送到另一个地方的行为和动作 ...
关于跨域策略文件crossdomain.xml文件
下载flexpaper源码修改后做成swf阅读器,要加入待阅读的swf文件,可以在flex里调用js的方法来获取swf文件的路径的方法,在js只专注获取路径就行,等着flex来调用:但这里会遇到一个问 ...
LongAccumulator类的BUG——reset方法并不能保证初始值正确赋值
LongAccumulator.reset方法并不能重置重置LongAccumulator的identity:初始值正确,使其恢复原来的初始值.当初始值为0是不会发生这个问题,而当我们设置初始值如1时 ...

Vue常用指令详解分析

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

随机推荐

热门专题