day 50 -vue模板语法

vue模板语法

插值语法

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

指令语法

 功能：用于解析标签（包括：标签属性，标签体内容，绑定事件...）
 举例：v-bind:href="url"或者简写为:href="url"
 备注：vue中有很多的指令，且形式都是v-xxx，只拿v-bind举例

代码

首先准备一个div标签

<div id="root">
     <h1>插值语法</h1>
     <h3>hello {{name}}</h3>
     <hr>
     <h1>指令语法</h1>
     <a v-bind:href="school.url">点我去{{school.name}}1</a>
     <a :href="school.url">点我去{{school.name}}2</a>
 </div>

 

之后在script标签中创建实例

<script type="text/javascript">
     new Vue({
         el:'#root',
         data:{
             name:'jack',
             school:{
                 name: 'csu',
                 url:'http://www.bilibili.com',
             }
         }
     })
 </script>

 

其中在data里也可以有新的子值如school

使用的话是school.name等用法