【Vue】两类模板语法

分类

插值语法

https://blog.csdn.net/m0_50939789/article/details/128458565

指令语法

1. v-bind 单向绑定

   引号里包裹的内容遇到 v-bind: 作为表达式处理，可以给任何一个标签里面的引号绑定值

   <a v-bind:href="url">关于我</a>
   

   const nav_Vue = new Vue({
         
         
      el: '#nav_content', 
       data: {
         
         
           url: "./aboutme.html"
       }
   })
   

   v-vbind: 简写 :

   <a :href="url">关于我</a>
   

   注意：

   1. 引号里面的内容为表达式

   2. 数据只能从 data 流向页面，不能从页面流向 data

2. v-model 双向绑定

   使用于表单类的 value 值，数据不只从 data 流向页面，还能从页面流向 data

   v-model: value = "xxx" 简写 v-model = "xxx" 由于其主要应用于表单类的 value 值

两类语法区别

• 插值语法：标签体内容
• 指令语法：标签属性