Vue2基础篇-03-模板语法

Alan0517

已于 2023-05-31 13:00:30 修改

阅读量190

点赞数

文章标签： vue.js javascript 前端

于 2022-12-07 13:03:36 首次发布

本文链接：https://blog.csdn.net/Hmj050117/article/details/128218449

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

文章目录

1. demo
2. 小总结

1. demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> 模板语法</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
            <h3>插值语法</h3>
            <h1> hello,{{name}}</h1>
            <br>
            <h3>指令语法</h3>
            <a v-bind:href="url"> 点我去百度页面</a>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                name: 'wangqinglong',
                url: 'http://www.baidu.com',
            }
        })
    </script>
</body>

2. 小总结

Vue 模板语法有2大类：
   1. 插值语法：
      功能：用于解析标签体内容。
      写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性；

   2. 指令语法：
      功能：用于解析标签(包括：标签属性，标签体内容，绑定事件...)
      举例：V-bind:href='xxx' 或简写为 :href='xxx',xxx同时要写js表达式，且可以直接读取到data中的所有属性；
      备注：Vue中有很多指令，且形式是：v-???? 此处外面只是拿v-bind举个列子；

   3. v-bind 可以简写成 ： 符号```

Alan0517

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2基础篇-03-模板语法

Vue 模板语法有2大类：1. 插值语法：功能：用于解析标签体内容。写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性；2. 指令语法：功能：用于解析标签(包括：标签属性，标签体内容，绑定事件...)举例：V-bind:href='xxx' 或简写为 :href='xxx',xxx同时要写js表达式，且可以直接读取到data中的所有属性；备注：Vue中有很多指令，且形式是：v-????此处外面只是拿v-bind举个列子；
复制链接

扫一扫