Vue详细基础全教程（二）

上传人：依*** IP属地：重庆上传时间：2024-04-26 格式：DOCX 页数：39 大小：45.47KB 积分：1.2 举报 版权申诉

已阅读5页，还剩34页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Vue详细基础全教程（二）一、品牌管理案例如下图，1、实现输入id和name后，点击add按钮，添加到table中；2、点击数据的del，可以删除这条数据。代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./lib/vue-2.4.0.js"></script><style>*{padding:0;margin:0;position:relative;} /*实现任意无宽高盒子居中显示*/#app{position:absolute;left:50%;top:100px;transform:translateX(-50%);}.box{width:500px;height:40px;background-color:#ccc;display:inline-block;text-align:center;line-height:40px;border:1pxsolid#aaa;box-sizing:border-box;border-bottom:none;}.tb{width:500px;text-align:center;border-collapse:collapse;border-color:#ccc;}</style></head><body><divid="app"><divclass="box"><labelfor="id">ID:<inputtype="text"id="id"v-model="id"></label><labelfor="name">name:<inputtype="text"id="name"v-model="name"></label><inputtype="button"value="add"@click="addClick"></div><tableborder="1"cellspacing="0"class="tb"><trv-for="iteminlist"><td>{{item.id}}</td><td>{{}}</td><td>{{item.ctime}}</td><td><ahref="javascript:;"@click.prevent="delClick(item.id)">del</a></td></tr></table></div><script>varvm=newVue({el:"#app",data:{id:"",name:"",list:[{id:1,name:'tony',ctime:newDate()},{id:2,name:'stark',ctime:newDate()}]},methods:{addClick(){//1.获取表单数据//2.组织出一个对象//3.将对象添加到data中（不需要重新渲染页面）letitem={id:this.id,name:,ctime:newDate()};if((this.id!="")&&(!="")){this.list.push(item);}//4.最后将表单清空this.id=="";},delClick(id){//1.根据id找到索引（循环查找）//2.调用数组的splice方法删除this.list.filter((item,index)=>{if(item.id==id){this.list.splice(index,1);returntrue;}});}}});</script></body></html>注意：1、事件名后面可以加括号（@click="addClick"

等价于

@click="addClick()

，这样写的话，就可以传参。）1、增加搜索需求在Query中输入字符串，如果name项中包括Query中的字符串，则显示。分析：如果要满足条件才显示相关行，那么

<trv-for="iteminlist">

中的list就是一个可变的。这里我们使用一个函数，函数里面进行判断是否包含Query中的字符串，然后将包含的拷贝到新数组中，填充到list的位置：<trv-for="iteminsearch(keywords)">methods:{addClick(){//...},delClick(id){//...},//添加的用于判断的函数search(keywords){//定义新数组保存符合条件的项letnewList=[];this.list.forEach((item,index)=>{//包含则返回trueif(.includes(keywords)){newList.push(item);}});returnnewList;}}二、过滤器vue允许自定义过滤器，可被用作一些常见的文本格式化。过滤器只能用在两个地方：插值表达式和

v-bind表达式

。1、全局过滤器基本用法：（必须在newVue之前定义）<body><divid="box"><p>{{msg|msgFormat}}</p></div><script>//使用Vue.filter来定义一个过滤器：//第一个参数：过滤器函数名称//第二个参数：过滤器函数体//过滤器的参数就是管道符的前面待处理的字符串。Vue.filter('msgFormat',(data)=>{returndata.replace("vue","Daotin");});varvm=newVue({el:"#box",data:{msg:"hellovue"}});</script></body>1、使用

Vue.filter

来定义一个过滤器。2、必须在newVue之前定义。2、第一个参数：过滤器函数名称；第二个参数：过滤器函数体3、过滤器的第一个参数就是管道符的前面待处理的字符串。插值表达式里的过滤器函数可以带参数：相应的，在

Vue.filter('msgFormat',(data,arg1,arg2,...)

中msgFormat的参数从第二位开始放置。可以带多个参数。<body><divid="box"><p>{{msg|msgFormat('isaboy','andgood')}}</p></div><script>//使用Vue.filter来定义一个过滤器：//第一个参数：过滤器函数名称//第二个参数：过滤器函数体//过滤器的参数就是管道符的前面待处理的字符串。Vue.filter('msgFormat',(data,arg1,arg2='andbad')=>{returndata.replace("vue","Daotin"+arg1+arg2);});varvm=newVue({el:"#box",data:{msg:"hellovue"},methods:{}});</script></body>使用全局过滤器格式化品牌管理案例的ctime：<td>{{item.ctime|ctimeFormat}}</td>...//ctime过滤器Vue.filter('ctimeFormat',(data)=>{lettime=newDate(data);letyear=time.getFullYear();letmonth=time.getMonth()+1;letday=time.getDate();lethour=time.getHours();letminute=time.getMinutes();return`${year}-${month}-${day}${hour}:${minute}`;});2、局部过滤器局部过滤器只能在当前组件使用。注意：过滤器的调用原则是就近原则，即先调用局部过滤器再调用全局过滤器。padStart和padEnd//ctime过滤器Vue.filter('ctimeFormat',(data)=>{lettime=newDate(data);letyear=time.getFullYear();letmonth=(time.getMonth()+1).toString().padStart(2,'0');letday=(time.getDate()).toString().padStart(2,'0');lethour=(time.getHours()).toString().padStart(2,'0');letminute=(time.getMinutes()).toString().padStart(2,'0');letsecond=(time.getSeconds()).toString().padStart(2,'0');return`${year}-${month}-${day}${hour}:${minute}:${second}`;});使用ES6中的字符串新方法

Stotype.padStart(maxLength,fillString='')

或

Stotype.padEnd(maxLength,fillString='')来填充字符串；padStart：从开头填充padEnd：从结尾填充maxLength：填充后最大的长度fillString：需要填充的字符串（fillString=''，不填则以空字符填充）三、按键修饰符我们现在有个需求就是输入ID和name后不点击add按钮，而是按下回车键也需要添加到列表中。我们可以在name输入框中加入按键抬起事件，并且指定是enter键抬起时才触发。<labelfor="name">name:<inputtype="text"id="name"v-model="name"@keyup.enter="addClick">.enter

：就是按键修饰符。系统提供的按键修饰符有：.enter.tab.delete

(捕获“删除”和“退格”键).esc.space.up.down.left.right如果我们想自定义其他的按键怎么办呢？通过Vue.config.keyCodes.f2=113;

；可以将f2作为按键修饰符添加到系统按键修饰符中。具体每个按键的值是多少？下面是常见的按键的码。keyCode8=BackSpaceBackSpacekeyCode9=TabTabkeyCode12=ClearkeyCode13=EnterkeyCode16=Shift_LkeyCode17=Control_LkeyCode18=Alt_LkeyCode19=PausekeyCode20=Caps_LockkeyCode27=EscapeEscapekeyCode32=spacekeyCode33=PriorkeyCode34=NextkeyCode35=EndkeyCode36=HomekeyCode37=LeftkeyCode38=UpkeyCode39=RightkeyCode40=DownkeyCode41=SelectkeyCode42=PrintkeyCode43=ExecutekeyCode45=InsertkeyCode46=DeletekeyCode47=HelpkeyCode48=0equalbracerightkeyCode49=1exclamonesuperiorkeyCode50=2quotedbltwosuperiorkeyCode51=3sectionthreesuperiorkeyCode52=4dollarkeyCode53=5percentkeyCode54=6ampersandkeyCode55=7slashbraceleftkeyCode56=8parenleftbracketleftkeyCode57=9parenrightbracketrightkeyCode65=aAkeyCode66=bBkeyCode67=cCkeyCode68=dDkeyCode69=eEEuroSignkeyCode70=fFkeyCode71=gGkeyCode72=hHkeyCode73=iIkeyCode74=jJkeyCode75=kKkeyCode76=lLkeyCode77=mMmukeyCode78=nNkeyCode79=oOkeyCode80=pPkeyCode81=qQatkeyCode82=rRkeyCode83=sSkeyCode84=tTkeyCode85=uUkeyCode86=vVkeyCode87=wWkeyCode88=xXkeyCode89=yYkeyCode90=zZkeyCode96=KP_0KP_0keyCode97=KP_1KP_1keyCode98=KP_2KP_2keyCode99=KP_3KP_3keyCode100=KP_4KP_4keyCode101=KP_5KP_5keyCode102=KP_6KP_6keyCode103=KP_7KP_7keyCode104=KP_8KP_8keyCode105=KP_9KP_9keyCode106=KP_MultiplyKP_MultiplykeyCode107=KP_AddKP_AddkeyCode108=KP_SeparatorKP_SeparatorkeyCode109=KP_SubtractKP_SubtractkeyCode110=KP_DecimalKP_DecimalkeyCode111=KP_DivideKP_DividekeyCode112=F1keyCode113=F2keyCode114=F3keyCode115=F4keyCode116=F5keyCode117=F6keyCode118=F7keyCode119=F8keyCode120=F9keyCode121=F10keyCode122=F11keyCode123=F12keyCode124=F13keyCode125=F14keyCode126=F15keyCode127=F16keyCode128=F17keyCode129=F18keyCode130=F19keyCode131=F20keyCode132=F21keyCode133=F22keyCode134=F23keyCode135=F24示例：<inputtype="text"id="name"v-model="name"@keyup.f2="addClick">//...<script>Vue.config.keyCodes.f2=113;</script>四、自定义指令除了核心功能默认内置的指令(v-model

等)，Vue也允许注册自定义指令。自定义指令是以

v-开头的指令。比如我们想让品牌管理案例中，在刚进入页面的时候，就获取Query输入框的焦点，但是vue并没有提供这样的指令。之前我们可以通过获取DOM元素，然后使用

DOM元素.focus();

方法来获取焦点。但是在vue里面不推荐获取DOM元素的方式。这时我们可以使用自定义指令的方式来达到获取焦点。比如：我们想定义一个v-focus

的指令来获取焦点。<labelfor="sel">Query:<inputtype="text"id="sel"v-model="keywords"v-focus></label><script> //自定义全局指令v-focus，为绑定的元素自动获取焦点：Vue.directive('focus',{inserted:function(el){//inserted表示被绑定元素插入父节点时调用el.focus();}});</script>1、定义自定义指令的时候，不需要加v-

，使用的时候需要加。2、注意：在每个函数中，第一个参数，永远是

，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象。3、和JS行为有关的操作，最好在

inserted

中去执行如果想注册局部指令，组件中也接受一个

directives

的选项：directives:{focus:{//指令的定义inserted:function(el){el.focus()}}}1、钩子函数inserted是钩子函数，类似的钩子函数还有几个，但是应用场景不同：inserted

：被绑定元素插入DOM元素时调用一次（从内存渲染到页面时如果绑定了inserted就执行）。bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置（在代码加载到内存中的时候，如果绑定了bind就执行，比如样式style的设定，使用bind绑定）。update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。componentUpdated：指令所在组件的VNode

及其子VNode

全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。bind和inserted区别：共同点：dom插入都会调用不同点：bind在inserted之前调用，bind时元素的父节点为null，inserted时元素的父节点存在。bind:function(el){console.log(el.parentNode)//null},inserted:function(el){console.log(el.parentNode)//<divid="app">...</div>}update和componentUpdated区别:

update和componentUpdated区别：共同点：组件更新都会调用不同点：update在组件更新前调用，componentUpdated在组件更新后调用。update:function(el){console.log(el.innerHTML)//Hello,beforeupdated},componentUpdated:function(el){console.log(el.innerHTML)//Hi,afterupdated}2、钩子函数参数指令钩子函数会被传入以下参数：el：指令所绑定的元素，可以用来直接操作DOM。binding：一个对象，包含以下属性：name：指令名，不包括

前缀。value：指令的绑定值，例如：v-my-directive="10"

中，绑定值为

10。expression：字符串形式的指令表达式。例如

v-my-directive="1+1"

中，表达式为

"1+1"。arg：传给指令的参数，可选。例如

v-my-directive:foo

中，参数为

"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar

中，修饰符对象为

{foo:true,bar:true}。vnode：Vue编译生成的虚拟节点。oldVnode：上一个虚拟节点，仅在

update

和

componentUpdated

钩子中可用。注意：除了

之外，其它参数都应该是只读的，切勿进行修改。我们可以为自定义指令赋值，比如我们想给Query文本框的字体颜色赋值：<labelfor="sel">Query:<inputtype="text"id="sel"v-model="keywords"v-focusv-color="'red'"></label>之所以使用v-color="'red'"，而不是v-color="red"，是因为如果是red字符串的话，就当做变量在vue的data中查找，而这里要表达的是字符串red。自定义v-color指令：Vue.directive("color",{bind(el,binding){el.style.color=binding.value;}});案例补充：

点击元素之外的地方执行相应的方法。一般我们在开发项目的时候都会遇到这样的场景，当点击一个按钮的时候，弹出下拉菜单，再次点击的时候，下拉菜单收起。但是我们有时候不想再次点击这个按钮，而是点击屏幕其他地方，也需要这个下拉菜单收起。常用的做法就是给整个页面绑定一个click事件，当点击页面的时候收起下拉菜单。但是如果有很多页面都需要这样做的话，就比较麻烦，今天我们做一个vue指令，绑定到该下拉菜单上，实现点击屏幕其他地方，收起下拉菜单。<divv-if="showproducts"v-clickoutside="closeProducts"></div>//执行方法closeProducts(){this.showproducts=false;}假设有这样一个div，点击屏幕其他位置的时候，showproducts=false，关闭弹框。Vue指令如何编写呢？在点击的时候，给document绑定一个click事件，事件的处理函数可以获取鼠标点击的元素e.target，判断鼠标点击的位置是否在绑定的元素中，是的话retuenfalse；否则的话执行传入的函数。这里的：binding.expression：表示v-clickoutside

后面是否传入了表达式，我们传入了closeProducts字符串。binding.value：表示v-clickoutside绑定的具体的值。binding.value();

就相当于执行closeProducts()

；由于给document绑定了click事件，在showproducts==false，也就是指令解绑的时候，解绑click事件，el._vueClickOutside_

用来传递同一个click事件对应的函数。//点击绑定了元素之外的地方，执行相应的方法Vue.directive('clickoutside',{bind:function(el,binding){functiondomHandler(e){if(el.contains(e.target)){returnfalse;}if(binding.expression){binding.value();//执行函数}}el._vueClickOutside_=domHandler;document.addEventListener('click',domHandler);},unbind:function(el){document.removeEventListener('click',el._vueClickOutside_);deleteel._vueClickOutside_;}});3、动态指令参数指令的参数可以是动态的。例如，在

v-mydirective:[argument]="value"

中，argument

参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：<divid="baseexample"><p>Scrolldownthepage</p><pv-pin="200">Stickme200pxfromthetopofthepage</p></div><script>Vue.directive('pin',{bind:function(el,binding,vnode){el.style.position='fixed'el.style.top=binding.value+'px'}})newVue({el:'#baseexample'});</script>这会把该元素固定在距离页面顶部200像素的位置。但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。<divid="dynamicexample"><h3>Scrolldowninsidethissection↓</h3><pv-pin:[direction]="200">Iampinnedontothepageat200pxtotheleft.</p></div><script>Vue.directive('pin',{bind:function(el,binding,vnode){el.style.position='fixed'vars=(binding.arg=='left'?'left':'top')el.style[s]=binding.value+'px'}})newVue({el:'#dynamicexample',data:function(){return{direction:'left'}}})</script>4、函数简写我们之前都是在自定义指令名称的后面跟上一个对象，里面写上bind，inserted，update的钩子函数列表。现在简写的话，就不需要跟上一个对象了：directives:{"color":(el,binding)=>{el.style.color=binding.value;}}自定义名称后可以直接跟上一个匿名函数，这个匿名函数就相当于bind和update的钩子函数集合。所以，如果你只需要在bind或者update中进行元素的设置的话，就可以用这种简写的方式。当然如果是inserted的话，还是要写回对象的方式。5、对象字面量如果指令需要多个值，可以传入一个JavaScript对象字面量。记住，指令函数能够接受所有合法的JavaScript表达式。<divv-demo="{color:'white',text:'hello!'}"></div><script>Vue.directive('demo',function(el,binding){console.log(binding.value.color)//=>"white"console.log(binding.value.text)//=>"hello!"})</script>五、vue实例的生命周期vue实例的生命周期指的是：从Vue实例创建，运行，到销毁期间，会伴随着各种各样的事件，这些事件统称为生命周期。生命周期事件，也称生命周期函数，也称生命周期钩子。六、生命周期函数三个阶段1、实例化期和加载期创建期间的生命周期函数：beforeCreate

和

created，beforeMount

和

mounted。2、更新

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

Vue详细基础全教程（二）

文档简介

温馨提示

最新文档

评论

Vue详细基础全教程（二）

文档简介

温馨提示

最新文档

评论

相关文档