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数据结构——二叉搜索树
定义二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若 ...
迷上我成真恋爱学心理学挽回她PDF文档资料完整版情感技巧脱单教程
迷上我成真恋爱学心理学挽回她PDF文档资料完整版情感技巧脱单教程成真迷上我偷听女人心挽回她课程百度网盘迷上我教程pdf地址百度网盘挽回她教程pdf+视频的地址备用地址淘宝百度网盘发货地址百度 ...
四维dp,传纸条，方格取数
四维dp例题四维dp便是维护4个状态的dp方式拿题来说吧. 1. 洛谷P1004 方格取数 #include<iostream> #include<cstdio> usin ...
JavaSE基础--part1
Java特性和优势简单.面向对象.可移植性.高性能.分布式.动态性.多线程.安全性.健壮性 Java的三大版本 JavaSE 标准版(应用于桌面程序,控制台开发) JavaME 嵌入式开发(手机,小 ...
Vue + axios + SpringBoot 2实现导出Excel
Vue + axios + SpringBoot 2实现导出Excel 1. 前端js代码-发送Http请求 /** * 文件下载 * @param url 下载地址 * @param fileNam ...
composer安装依赖包时，php内存分配不足
Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes) in pha ...
使用kind快速创建本地集群
简介 kind是另一个Kubernetes SIG项目,但它与minikube有很大区别.它可以将集群迁移到Docker容器中,这与生成虚拟机相比,启动速度大大加快.简而言之,kind是一个使用Do ...
unity webview
uniwebview http://uniwebview.onevcat.com/manual Unity3D研究院之在Android中打开WebView(三十) http://www.xuanyus ...
ARouter使用
1. androidstudio3.0配置 javaCompileOptions { annotationProcessorOptions { arguments = [AROUTER_MODULE_ ...
令人蛋疼的错误提示 0xcdcdcdcd ,0xdddddddd ,0xfeeefeee ,0xcccccccc ,0xabababab
原文地址:http://www.cnblogs.com/pcchinadreamfly/archive/2012/04/26/2471317.html参考地址:http://blog.csdn.net ...

Vue常用指令详解分析

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

随机推荐

热门专题