02 Vue模板语法

最新推荐文章于 2024-06-20 23:05:39 发布

qq_26326471

最新推荐文章于 2024-06-20 23:05:39 发布

阅读量158

点赞数

分类专栏：学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_26326471/article/details/127353638

版权

学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<template>
    <div>
      <h1>模板语法</h1>
    </div>
    <div>
      <h2>插值语法</h2>
      <h3>你好,{{ http.name }}</h3>
      <hr/>
      <h1>指令语法</h1>
      <a v-bind:href="http.url" v-bind:x="hello">点我去百度</a>
    </div>
   Vue模板语法有2大类
    1.插值语法：
        功能： 用于解析标签体内容
        写法： {{xxx}}, xxx是js表达式,且可以直接读取到data中的所有属性
    2.指令语法：
        功能： 用于解析标签（包括：标签属性、标签体内容、绑定事件等等）
        举例： v-bind:href="xxx" 或 简写为:href="xxx", <strong>xxx同样要写js表达式</strong>
              且可以直接读取到data中的所有属性
        备注: Vue中有很多的指令,且形式都是:v-????, 此处只是那v-bind举个例子
    
  </template>
  <script>
  export default {
    data() { 
      return { 
        name: 'qinling',
        http: {
          url: 'http://www.baidu.com',
        hello:'nihao'
        }
        
      }
    }
    
  }
  </script>