03-Vue核心-模板语法
Vue模板语法有2大类
1)插值语法
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,并且可以直接读取到data中的所有属性
2)指令语法
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)
举例:v-bind:href="xxx" 或 :href="xxx",xxx同样要写js表达式
备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <!--引入Vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- Vue模板语法有2大类: 1.插值语法 功能:用于解析标签体内容 写法:{{xxx}},xxx是js表达式,并且可以直接读取到data中的所有属性 2.指令语法 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...) 举例:v-bind:href="xxx" 或 :href="xxx",xxx同样要写js表达式 备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子 --> <!--准备好一个容器--> <div id="root"> <h1>插值语法</h1> <h3>你好,{{name}}</h3> <hr/> <h1>指令语法</h1> <!--<a href="http://www.baidu.com">百度首页</a>--> <!--v-bind指令,可以将属性值动态的绑定到 Vue data数据中--> <a v-bind:href="url">百度首页</a> <!--v-bind指令,也可以缩写为:--> <a :href="url2">博客园</a> <a :href="school.url">{{school.name}}</a> </div> </body> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false; new Vue({ el:"#root", data:{ name:"马铃薯", url:"http://www.baidu.com", url2:"https://www.cnblogs.com/REN-Murphy/category/2342442.html", school:{ url:"https://www.cnblogs.com/REN-Murphy/category/2342442.html", name:"马铃薯" } } }) </script> </html>