<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>
02 Vue模板语法
最新推荐文章于 2024-09-06 22:20:29 发布