往期内容

《Vue零基础入门教程》第一课：Vue简介

《Vue零基础入门教程》第二课：搭建开发环境

《Vue零基础入门教程》第三课：起步案例

《Vue零基础入门教程》第四课：应用实例

《Vue零基础入门教程》第五课：挂载

《Vue零基础入门教程》第六课：基本选项

《Vue零基础入门教程》第八课：模板语法

《Vue零基础入门教程》第九课：插值语法细节

如果要将某一个属性的值和data中的状态绑定, 需要使用绑定指令

属性绑定

将 一个元素 的一个属性值和data中的一个变量绑定

<!-- 完整的写法 -->
<a v-bind:href="url">百度</a>
<!-- 简写(推荐) -->
<a :href="xzd">新中地</a>

vue官方更推荐简写的方式

《Vue零基础入门教程》第九课：插值语法细节

​

js部分

const vm = createApp({
  data() {
    return {
      url: 'http://www.baidu.com',
    }
  },
}).mount('#app')

• 将a标签href属性和data中的url变量绑定
• 相当于<a href="http://baidu.com"></a>

💡 特别说明

在指令后面的引号中, 可以使用类似于{{}}中一样的语法.

• 可以使用 js表达式
• 直接访问vm实例上的属性和方法
• 不能是js语句

​

无偿视频版教程