Vue常用指令有哪些

这篇文章将为大家详细讲解有关Vue常用指令有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

10年积累的网站制作、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有东营免费网站建设让你可以放心的选择与我们合作。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

插入文本：

v-text

相当于元素的innerText属性，必须是双标签

插入HTML：

相当于元素的innerHTML属性

循环遍历

v-for的使用，除了item属性，还有一些其他辅助属性

 在html中使用v-for指令进行渲染
/*
 普通数组
  data:{
      list:[1,2,3,4,5,6]
   }
  <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>
*/


/*
 对象数组
 data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ]
}
   <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>
*/

/*
  对象
  data:{
      user:{
        id:1,
        name:'托尼.贾',
        gender:'男'
      }
 }
 <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>
*/

/*
 数字
 <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>
*/

条件渲染

v-if：是否插入元素

v-show是否隐藏元素，根据CSS进行元素的渲染

属性绑定

v-bind：属性名=“常量 || 变量名”

简写形式：属性名=“常量 || 变量名”

<p v-bind:属性名="变量"></p>
//可以简写成
<p :属性名="变量"></p>

//如果要赋值常量，需要给常量用单引号包起来，如
<p :属性名=" '常量' "></p>

双向绑定:v-model

所谓的双向绑定，就是你在视图层里面改变了值，vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。

绑定事件:v-on

v-on:click = “方法名 || 直接改变 vue 内部变量”，

简写形式：@click = “方法名 || 直接改变 vue 内部变量”

<p v-on:click=" num = 1 "></p>
//可以简写成
<p @click=" num = 1 "></p>

跳过元素节点

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

只渲染一次

v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

关于“Vue常用指令有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

分享名称：Vue常用指令有哪些
文章出自：https://www.cdcxhl.com/article22/peoocc.html

成都网站建设公司_创新互联，为您提供网站维护、建站公司、品牌网站制作、营销型网站建设、网站营销、域名注册

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联