Vue常用指令的详细分析

Vue简介

Vue是MVVM的一个前端框架(模型/视图/视图模型)。与Angular相比，VUE简单易学，操作快捷。近两年也不流行，发展很快，超过Angular。它更适合移动、轻量级框架、小文件和快速运行速度。最近没事干，就学习一下Vue的流行框架，以备后用。

一、说明

V-model主要用于实现表单元素的双向数据绑定(与ng-model相同)v-用于angular)。V-for格式：v-for='数组中的字段名json '圆形数组或json(与ng相同-以角度重复)。需要注意的是$index v-show display(与ng相同-在angular中显示)V-hide display(与ng相同-hide)v-if angular)V-如果显示和隐藏(dom元素的删除和添加与NG相同-如果在angular中，默认值为false) v-else-if必须与v-if相同即使v-else必须与V-if一起使用，不能单独使用；否则，将报告错误模板编译错误。v-bind动态绑定功能：及时更改页面上的数据。on:click给出了标签绑定功能，可以缩写为@。例如，绑定click函数函数必须用方法编写。v-text解析文本v-html解析html标记v-bind:class三种绑定方法：1。对象类型“{ red : is read }”2。三元类型“isred？”Red':'blue'' 3，数组类型'[{red: '是red'}，{blue3360 '是blue'}]' v-once在进入页面时只呈现一次，不呈现一次。v形斗篷防止闪烁。v-pre就地输出标签内部的元素。二、基本组件属性

New Vue({ el，//待绑定的DOM Element Template，//待解析的模板可以是#id，HTML或者一些DOM元素数据，//待绑定的数据是计算出来的，//数据是根据其他数据计算出来的，Name=firstName lastName watch，//监控方法，监控某个数据变化时要做的相应操作方法，//定义可以在组件或者模板中使用的方法})三。基本用途

1.html

div id='app' p{{msg}}/p/div2.js

Varapp=newvue ({el:' # app '，//标记的类名和id用于获取元素//数据成员data : { msg : ' display content ' }以键值对的形式存储，//包含要使用的函数方法methods : } })；这样，js中msg的内容将显示在p标签中。

四.例子

使用bootstrap vue实现简单留言板功能，可以添加、删除、弹出模式框

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题简易留言板/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-ability ' content=' yes ' meta name=' apple-mobile-web-app-status-bar-style ' content=' black ' style/style link rel='样式表href='././node _ modules/bootstrap/dist/CSS/bootstrap。量滴CSS ' rel='外部无跟随'脚本src='http:/./node _ modules/jquery/dist/jquery。量滴js /脚本脚本src='http:/./node _ modules/bootstrap/dist/js/bootstrap。量滴js '/script脚本src=' http :/./node _ modules/Vue/dist/Vue。js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' # box }，data:{ myData:[]，username: ' '，age: ' '，nowIndex:-100 }，methods : { add : function(){ this。我的数据。推送({ name 3: this。username，age : this . username=this . age=}，delete msg : function(n){ if(n==-2){ this。my data=[]；}else{ this.myData.splice(n，1)；} } } });};/script/headdydiv class=' container ' id=' box '表单角色='form' div class='form-group '标签为='用户名'用户名：/标签输入类型=' text ' id=' username ' class=' form-control ' placeholder='输入用户名v-model=' username '/div class=' form-group '标签为='年龄'年龄：/标签输入类型=' text ' id=' age ' class=' form-control '占位符='输入年龄v-model=' age '/div class=' form-group '输入类型='按钮'值='添加=' BTN BTN-小学' v-:点击='添加()'输入类型=“重置”值='重置BTNBTN危险/div/form HR表类=' table table-带边框的表格-悬停H3=' H3文本信息文本中心'用户信息表/H3 tr='文本-危险' th '文本-中心'序号' th class='文本中心'名字' th class='文本中心'年龄' th class='文本中心'操作/th/tr class=' text-center ' v-for='(item，index)在myDATa ' TD { { index 1 } }/TD { { item。 名称} }/TD { { item。age } }/TD TD TD button class=' BTN BTN-主BTN-sm ' data-toggle=' modal ' data-target=' # layer ' v-: click=' now index=$ index '删除/button/TD/tr tr v-show=' my DATa。长度！=0 ' TD col span=' 4 ' class=' text-right ' button class=' BTN BTN-危险BTN-sm ' v-: click=' now index=-2 ' data-toggle=' modal ' data-target=' # layer '删除全部/button/TD/tr v-show=' mydata。长度==0 ' TD colspan=' 4 ' class=' text-center text-muted ' p暂无数据./p /td /tr /table！-模态框弹出框- div角色=' 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' class='close '数据-消除=' modal ' span /span/button/div class=' modal-正文-右'按钮数据-消除=' modal ' class=' BTN BTN-初级BTN-sm '取消/button button data-dispose=' modal ' class=' BTN BTN-危险BTN-sm ' v-: click=' delete msg(现在是索引)'确认/button/div/div/div/body/html运行效果：