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



<div id="app">

  <p>{{msg}}</p>

</div>

2.js



var app=new Vue({

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

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

    data:{

      msg:'显示的内容'

    },

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

    methods:{

    }

  });

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

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

四、实例

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



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>简易留言板</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <style>

  </style>

  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" >

  <script src="../../node_modules/jquery/dist/jquery.min.js"></script>

  <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

  <script src="../../node_modules/vue/dist/vue.js"></script>

  <script>

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

         }

        }

      }

     });

   };

  </script>

</head>

<body>

<div class="container" id="box">

  <form role="form">

   <div class="form-group">

     <label for="username">用户名:</label>

     <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">

   </div>

   <div class="form-group">

     <label for="age">年　龄:</label>

     <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">

   </div>

   <div class="form-group">

     <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">

     <input type="reset" value="重置" class="btn btn-danger">

   </div>

  </form>

  <hr>

  <table class="table table-bordered table-hover">

   <h3 class="h3 text-info text-center">用户信息表</h3>

   <tr class="text-danger">

     <th class="text-center">序号</th>

     <th class="text-center">名字</th>

     <th class="text-center">年龄</th>

     <th class="text-center">操作</th>

   </tr>

   <tr class="text-center" v-for="(item,index) in myData">

     <td>{{index+1}}</td>

     <td>{{item.name}}</td>

     <td>{{item.age}}</td>

     <td>

      <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>

     </td>

   </tr>

   <tr v-show="myData.length!=0">

     <td colspan="4" class="text-right">

      <button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >删除全部</button>

     </td>

   </tr>

   <tr v-show="myData.length==0">

     <td colspan="4" class="text-center text-muted">

      <p>暂无数据....</p>

     </td>

   </tr>

  </table>

  <!--模态框 弹出框-->

  <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">

   <div class="modal-dialog">

     <div class="modal-content">

      <div class="modal-header">

        <h4 class="modal-title">确认删除么?</h4>

        <button type="button" class="close" data-dismiss="modal">

         <span>×</span>

        </button>

      </div>

      <div class="modal-body text-right">

        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>

        <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>

      </div>

     </div>

   </div>

  </div>

</div>

</body>

</html>

运行效果：

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

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

  1. ImageMagick常用指令详解

    Imagemagick常用指令 (ImageMagick--蓝天白云) (ImageMagick官网) (其他比较有价值的IM参考) (图片自动旋转的前端实现方案) convert 转换图像格式和大小 ...

  2. 基于header的一些常用指令详解

     header常用指令 header分为三部分: 第一部分为HTTP协议的版本(HTTP-Version): 第二部分为状态代码(Status): 第三部分为原因短语(Reason-Phrase) ...

  3. Vue入门---常用指令详解

    Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...

  4. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

  5. vue 源码详解（一）：原型对象和全局 `API`的设计

    vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...

  6. GCC 指令详解及动态库、静态库的使用

    GCC 指令详解及动态库.静态库的使用 一.GCC 1.1 GCC 介绍 GCC 是 Linux 下的编译工具集,是「GNU Compiler Collection」的缩写,包含 gcc.g++ 等编 ...

  7. find常用参数详解

    find常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在linux系统中,在init 3模式情况下都是命令行模式,这个时候我们想要找到一个文件的就得依赖一个非常好用的 ...

  8. samtools常用命令详解（转）

    转自:samtools常用命令详解 samtools的说明文档:http://samtools.sourceforge.net/samtools.shtml samtools是一个用于操作sam和ba ...

  9. rsync常用参数详解

    rsync常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在linux中,一切皆是文件,包括你的终端,硬件设备信息,目录,内核文件等等.所以工作中我们难免会遇到拷贝文件 ...

随机推荐

  1. Java中动态规则的实现方式

    背景 业务系统在应用过程中,有时候要处理“经常变化”的部分,这部分需求可能是“业务规则”,也可能是“不同的数据处理逻辑”,这部分动态规则的问题,往往需要可配置,并对性能和实时性有一定要求. Java不 ...

  2. 10分钟搞定 Java 并发队列好吗？好的

    | 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...

  3. Windows servers 2008 环境下，域控DC和DNS，分离搭建过程。

    近来做有关于window服务器方面运维的实验,正好借此记录下来,便于日后回顾. 通常情况下,域控DC服务器和DNS服务器一般不在一起,所以需要将其分开建立.而这个时候两个服务器的建立有先后顺序,本文会 ...

  4. 力扣Leetcode 199. 二叉树的右视图

    199. 二叉树的右视图 给定一棵二叉树,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值. 示例: 输入: [1,2,3,null,5,null,4] 输出: [1, 3, ...

  5. 【免费】windows下如何生成tar.gz,一键生成tar.gz

    废话 一.实验背景 tar.gz 是Linux和Unix下面比较常用的格式,一条命令就可以把文件压缩打包成tar.gz格式,然而这种格式在windows并不多见. Linxu服务器上,tar.gz 包 ...

  6. 【Android】Android开发启动app弹出一张广告图片，Dialog可以查看大图，查看某个图片功能

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  7. Android开发之设置应用设置全屏的两种解决方法 兼容android5.0等两种解决方法

    在开发中我们经常需要把我们的应用设置为全屏,有两种方法,一中是在代码中设置,另一种方法是在配置文件里改! 一.在代码中设置:  代码如下: package com.android.tutor; imp ...

  8. 聊一聊RocketMQ的注册中心NameServer

    前言 上次我们一起了解了RocketMQ的基本架构原理,那简单的回顾一下RocketMQ的架构组成. RocketMQ其实包含了四个核心部分,NameServer.Broker.Producer.Co ...

  9. Apollo（阿波罗）配置中心Java客户端使用指南使用指南

          Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管 ...

  10. nginx模块化结构

    NGINX是一个免费.开源.高性能.轻量级的HTTP和反向代理服务器,也是一个电子邮件(IMAP/POP3)代理服务器 特点: 占有内存少,并发能力强 Nginx的优点: 模块化.事件驱动.异步.非阻 ...