第一章 Vue核心 第二节 模板语法
Vue模板有两大类：
1.插值语法：
功能：用于解析标签题内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性
备注：Vue中有很多属性，且形式都是v-????，此处我们只是那v-bind举个例子。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue模板语法</title> <!--引入Vue--> <script src="../lib/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr/> <h1>指令语法</h1> <a v-bind:href="found.url">点我去{{found.name}}搜索1</a> <a :href="found.url">点我去{{found.name}}搜索2</a> </div> <script type="text/javascript"> Vue.config.productionTip = false ; //阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el:'#root', data:{ name:'retrace', found:{ name:'baidu', url:'https://www.baidu.com' } } }); </script> </body> </html>
本文作者：何以之
本文链接：https://www.cnblogs.com/serendipity-echo/articles/15407667.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步