Vue第一篇:组件模板总结

媒介

    本文希望读者有一定的Vue开辟经验，样例采用vue中的单文件组件，也是我的个人条记，接待一起进步

必须有根元素

    这是一个最简朴的vue单文件组件，<template></template>被称为模板，模板中必须有一个根元素
   <template>
      <div>
      </div>
  </template>
  <script>
  </script>
   
模板中可以写什么？

1、静态内容（不变的内容称为静态内容）
html元素、vue组件
   <template>
      <div>
          <hello-world></hello-world>
      </div>
  </template>
  备注：组件名使用<hello-world></hello-world>大概<HelloWorld></HelloWorld>均可以
2、插值，也称mustcache语法

{{}}中写的是JS表达式，假如对JS表达式不明白的话，只须要记住能写在return语句背面的，带有返回值的语句，就是JS表达式
留意：{{}}语法不能用在元素属性上，只能用在元素内容上
模板的当前情况为组件对象（大概Vue对象）所以不用写this了,Vue框架已经帮你处置惩罚
   <template>
      <div>
          <hello-world>
              {{ baby }}
          </hello-world>
      </div>
  </template>
  3、指令

html元素大概组件上，能写一种v-开头的属性，这些属性称为指令，指令中的值也是JS表达式，当前情况也为组件对象大概Vue对象
再次夸大，指令中写的也是JS表达式，假如对JS表达式不明白的话，只须要记住能写在return语句背面的，带有返回值的语句，就是JS表达式
指令只能作用在元素的属性、大概组件的属性上，这点要与{{}}区分开！
   <template>
      <div>
          <hello-world @click="fk">
          </hello-world>
      </div>
  </template>
   
4、特别属性（Vue框架自己添加的属性）
如key、ref等属性，这些属性都是Vue框架规定好的属性。
   <template>
      <div>
          <hello-world @click="fk" ref="first">
              {{ baby }}
          </hello-world>
      </div>
  </template>
   
总结一下

1、元素（组件）内容用插值语法{{}}
2、元素（组件）属性用指令，v-xxx
3、插值和指令中的值都是JS表达式
4、只须要记住能写在return语句背面的，带有返回值的语句，就是JS表达式
5、本文只先容单文件组件中的模板底子知识

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。