美文网首页
插值语法和指令语法

插值语法和指令语法

作者: 冰点雨 | 来源:发表于2021-12-19 16:53 被阅读0次

总结:

 vue语法模板有两大类
            1.插值语法
               功能:用于解析标签体内容
               写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
            2.指令语法
              功能:用于解析标签(包括:标签属性 标签体内容 绑定事件...)
              举例:v-bind:href="xxx"   :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性
              备注:Vue多很多指令,形式都是v-???

插值语法

  <h3> {{name}}</h3>

指令语法

<a v-bind:href="school.url.toUpperCase()">去{{school.name}}旅游</a>

使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>day1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>插值语法</h1>
            <h3>hello {{name}}</h3>
            <hr/>
            <h1>指令语法</h1>
            <a v-bind:href="school.url.toUpperCase()">去{{school.name}}旅游</a>
            <a :href="school.url">去旅游2</a>
        </div>
        <script type="text/javascript">
             Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
             new Vue({
                 el:"#root",
                 data:{
                     name:"世界",
                     school:{
                         name:'北京大学',
                         url:'https://www.baidu.com/'
                     }
                 }
             })
        </script>
    </body>
</html>

相关文章

  • 插值语法和指令语法

    总结: 插值语法 指令语法 使用

  • Vue作品考核回顾

    基本指令 插值语法 Mustache 语法 {{ }} v-on v-on 监听指令, 语法糖为@ 在调用方法时,...

  • # vue模板语法 ( v-text 和 {{}} 区别)

    vue模板语法 插值 文本 1.“Mustache”语法插值: html: js: 2.v-text指令html ...

  • vue学习目录

    插值语法和指令语法[https://www.jianshu.com/p/7ee51dd78987]数据绑定[htt...

  • 温故而知新之VUE(二)

    模板语法 插值 #文本Mustache语法(双大括号)v-once指令——只执行一次性的插值,数据改变,内容不会进...

  • Vue常用指令(完结版)

    模板语法(插值表达式) 数据绑定的最常见的形式是文本插值 {{ }} 指令 指令的作用:当表达式的值改变时,将其产...

  • Comparison Between Vue 1 and Vue

    模板语法 插值 Vue 2 提供了 v-once 指令进行一次插值,替代了 Vue 1 的 {{ * msg }}...

  • vue

    vue基础语法 标签(空格分隔): vue 插值 文本指令v-text和{{}}效果几乎相同。 双大括号({{}}...

  • (32)Vue模板语法

    模板语法 文本: v-once一次性地插值,当数据改变时,插值处的内容不会更新 v-html 指令 v-if 指令...

  • 计算属性

    1.姓名案例_插值语法实现 姓名案例_插值语法实现