Vue之模板语法

模板语法有两大类:
1.插值语法
2.指令语法

让我为大家介绍一下吧!

一、插值语法

功能:用于解析标签体内容。
写法: {{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。

举个例子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root">
        <!-- 我们发现name已经被解析为了张三 -->
        <div>我的名字叫{{name}}</div>
        <!-- 我有一个叫做李四的同学 -->
        <div>我的名字叫{{name}}</div>
    </div>
</body>
<script src="../JS/vue.min.js"></script>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            name:"张三",
            name:"李四"
        }
    })
</script>
</html>


我们发现全是李四,我想保留张三怎么做?
我教大家一个方法,我们可以使用对象的形式去做,来看代码

html 复制代码
<body>
    <div id="root">
        <!-- 我们发现name已经被解析为了张三 -->
        <div>我的名字叫{{name}}</div>
        <!-- 我有一个叫做李四的同学 -->
        <div>我的名字叫{{school.name}}</div>
    </div>
</body>
<script src="../JS/vue.min.js"></script>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            name:"张三",
            school:{
                name:"李四"
            }
        }
    })
</script>

二、指令语法

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)
举例:v-bind;href="xxx"或 简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令,且形式都是: v-???,此处我们只是拿v-bind举个例子。

我们上个例子,我们想用Vue的形式给a标签添加href转跳到某度

上代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root">
        <!-- 我们使用 v-bind: -->
        <a v-bind:href="url">点击转跳</a>
        <!-- 我们可以使用简写形式直接就是 : -->
        <a :href="url">我是简写形式点击转跳</a>
    </div>
</body>
<script src="../JS/vue.min.js"></script>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            url:"https://www.baidu.com/"
        }
    })
</script>
</html>


由此可见,我们可以使用插值语法给标签属性添加属性值

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关推荐
rising start几秒前
前端基础一、HTML5
前端·html·html5
Never_Satisfied9 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖10 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A14 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER16 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父20 分钟前
前端速通—CSS篇
前端·css
pixle023 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf198729 分钟前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH29 分钟前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童34 分钟前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源