03-模板语法

搞钱自律

已于 2023-03-22 11:43:43 修改

阅读量197

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端插值无法指令语法

于 2023-03-14 21:46:48 首次发布

本文链接：https://blog.csdn.net/weixin_43472934/article/details/129540634

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

模板语法分为两点：

插值语法
指令语法

1.插值语法

2.指令语法

2.1 v-bind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板语法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>

    <h1>指令语法</h1>
    <a v-bind:href="url">百度</a>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    new Vue({
      el:'#root',
      data:{
        name:'jack',
        url:'https://www.baidu.com'
      }
    })
  </script>
</body>
</html>

v-bind可以给标签里的任何属性动态绑定值，如下代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板语法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>

    <h1>指令语法</h1>
    <a v-bind:href="url" v-bind:x = "hello">百度</a>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    new Vue({
      el:'#root',
      data:{
        name:'jack',
        url:'https://www.baidu.com'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

会发现会报错，因为在标签里的属性里前面加上了v-bind:，它会将属性值去Vue实例里的data里找对应的属性值，没有找到则会报上面的错误，有就会限制data里对应的属性值。

修改代码如下：
在这里插入图片描述

在这里插入图片描述

2.1.1 v-bind:可以简写:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板语法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>

    <h1>指令语法</h1>
    <a v-bind:href="url" v-bind:x = "hello">百度</a>
    <a :href="url" x = "hello">百度</a>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    new Vue({
      el:'#root',
      data:{
        name:'jack',
        url:'https://www.baidu.com',
        hello:'22'
      }
    })
  </script>
</body>
</html>

可以这么写：

<a :href="Date.now()">js表达式要记牢</a>
<a :href="url.toUpperCase()">js表达式要记牢</a>

3.data里的对象调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板语法</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 
    Vue模板语法有2大类：
    1.插值语法：
         功能：用于解析标签体内容
         写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
    2.指令语法：
         功能：用于解析标签（包括：标签属性、标签体内容、绑定时间.....）。
         举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
              且可以直接读取到data中的所有属性
         备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子
   -->
  
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>

    <h1>指令语法</h1>
    <a v-bind:href="url" v-bind:x = "hello">百度</a>
    <a :href="school.url" x = "hello">{{school.name}}</a>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

    new Vue({
      el:'#root',
      data:{
        name:'jack',
        url:'https://www.baidu.com',
        hello:'22',
        school:{
          name:'百度',
          url:'https://www.baidu.com'
        }
      }
    })
  </script>
</body>
</html>

3.总结

Vue模板语法有2大类：
1.插值语法：
     功能：用于解析标签体内容
     写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2.指令语法：
     功能：用于解析标签（包括：标签属性、标签体内容、绑定时间.....）。
     举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
          且可以直接读取到data中的所有属性
     备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子