当前位置 : 主页 > 编程语言 > 其它开发 >

vue-模板语法

来源：互联网 收集：自由互联 发布时间：2022-06-15
!DOCTYPE htmlhtml head meta charset="utf-8" / script type="text/javascript" src="../js/vue.js"/script /head body !-- Vue模板语法有2大类: 1.插值语法: 功能:用于解析标签体内容。写法: xXX是js表达式,且可以直接读取
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <script type="text/javascript" src="../js/vue.js"></script>     </head>     <body>         <!-- Vue模板语法有2大类:         1.插值语法:         功能:用于解析标签体内容。写法:         xXX是js表达式,且可以直接读取到data中的所有属性。         2.指令语法:         功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....) .         举例:v-bind:href="xxx”或―简写为 :href=""xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。         备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子 -->         <div id="root">             <h1>插值语法</h1>             <h3>你好,{{name}}</h3>             <hr/>             <h1>指令语法</h1>             <a v-bind:href="url.toUpperCase()" x="hello">点我去学习</a>               <!-- v-bind:绑定监听 -->             <a :href="url" :x="hello">点我去学习2</a>               <!-- v-bind:可以简写 ： -->             <a :href="url.toUpperCase()" :x="hello">点我去学习3</a>             <!-- toUpperCase() 方法用于把字符串转换为大写。                  toLowerCase()  把字符串转换为小写。  -->         </div>         <script type="text/javascript">             Vue.config.productionTip = false//阻止vue在启动生成生产提示             new Vue({                 el:'#root',                 data:{                     name:'jack',                     school:{                         url:'http://www.atguigu.com',                         hello:'你好'                     }                  }             })         </script>     </body> </html>
上一篇：高斯消元
下一篇：没有了
网友评论
相关栏目
最近更新
热门文章