当前位置： 首页 > 后端技术 > Node.js

vue2.0的基本技巧——使用说明和生命周期钩子（一些心得）

时间：2023-04-03 20:51:33 Node.js

前言接触vue一年多了，一直没有做任何记录。作为一名前端开发者，对我来说，vue是正确的选择。Vue的易用性、渲染能力、开发文档等都非常友好。最近也在做react。个人意见：至于框架，你想怎么弄就怎么弄。要使用框架，就必须充分发挥框架的全部能量。必须把html、JavaScript、css的基本功练好，这样任何js框架都会让你轻松上手。写这篇文章主要是巩固一些知识，记录一些开发中的经验，对初学者也有帮助。这篇文章是基础文章。如果这些内容都掌握了，那么基本的开发就没有问题了。但这还不够，如果你对组件、路由、状态管理有深刻的理解，那么你将成为一名优秀的前端开发人员。后面我也会把自己的理解记录下来，分享给大家。本文内容分为指令的基本使用和注意事项两部分。cyclehook的解释和注意事项1.简介第一部分当然是介绍。有两种引入标签的方法。引入importVuefrom'vue'withnpmmodularizationII。实例化varapp=newVue({el:'#app',//.app||document.getElementById('app')data:{message:'HelloVue!'}})表示在页面上提供一个现有的现有的DOM元素作为Vue实例的挂载目标。el：参数可以是css选择器，也可以是HTMLElement，但最好是id选择器。使用类选择器vue会自动将class转换为id。你可能见过这种写法，效果是一样的。newVue({data:{message:'HelloVue!'}}).$mount('#app')3.说明v-text和v-htmlv-text编译成不同的文本，v-html不编译，直接输出标签{{msg}}testHtml:testHtml输出：testHtml输出testHtmlv-show和v-if可以说是条件判断v-showdom元素存在，display的CSS属性元素根据表达式的真假值进行切换。v-如果真元素存在，假元素不存在，根据表达式值的真假条件渲染元素。v-else和v-else-if条件渲染A

B
C
不是A/B/C
v-for列表呈现为要给Vue一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要为每个项目提供一个唯一的键属性。理想的键值是每个项目的唯一ID。建议在使用v-for时尽可能提供一个key，除非非常简单地遍历输出的DOM内容，或者故意依赖默认行为来提高性能。开发中会遇到的事情：绑定事件，获取index{{item.text}}newVue({el:'#app',data:function(){return{items:[{id:1,content:'1item',},{id:2,content:'2item',},{id:3,content:'3item',}]}},方法：{toggle:function(index){alert(this.items[index].content)}}})v-fornewVue({el:'#v-for-object',data:{object:{firstName:'John',lastName:'Doe',age:30}}}){{索引}}。{{key}}：{{value}}0。名字：John1。姓氏：Doe2。age:30v-on事件指令@partial修饰符的缩写，这两个在开发中基本够用了。停止-调用event.stopPropagation()。.prevent-调用event.preventDefault()。/button>v-bind属性绑定缩写：div:style="{fontSize:size+'px'}">divv-bind="{id:someProp,'other-attr':otherProp}">v-model表单控件双向绑定限制