Vue的模板语法

Vue的模板语法

Vue的模板语法主要分为两大类

1. 插值语法
2. 指令语法

插值语法

什么是插值语法呢，顾名思义就是插入，穿插的意思。
在vue项目中通常只有一个vue实例对象，那么如果把数据都写死在上面，或者直接使用js语句把内容往里面填
这样如果有数据需要变动修改，就很麻烦。
而vue提供了一个插值语法，把需要的数据放在vue实例的data中
容器里的 {{xxx}} 可以读取到vue实例里面对应的内容
看示例：

<div id="warp">
    <h1>hello! <a href="hello">{{name}}</a> , {{speak}}</h1>
    <h1 ></h1>
  </div>
  
  <script type="text/javascript">

    new Vue({ 
      el:'#warp',
      data:{
        name:'蔡徐坤',
        speak:'我是练习时长两年半的偶像练习生，坤坤',
        hello:'https://baike.baidu.com/item/%E8%94%A1%E5%BE%90%E5%9D%A4/8511458?fr=aladdin'
      }
    })

会发现此处 {{name}} {{speak}} 自动变成了vue实例中data对应的内容

指令语法

指令语法是什么
指令语法是是用于解析标签的，（标签属性；标签体内容；绑定事件。。。）
举例
v-bind——单向绑定

<div id="warp">
    <h1> <a v-bind:href="Url">{{name}}</a></h1>
  </div>
  
  <script type="text/javascript">

    new Vue({ 
      el:'#warp',
      data:{
        name:'蔡徐坤',
        speak:'我是练习时长两年半的偶像练习生，坤坤',
        Url:'https://baike.baidu.com/item/%E8%94%A1%E5%BE%90%E5%9D%A4/8511458?fr=aladdin'
      }
    })

假如直接填写 Url 在 href 里面，会被解析成一个字符串，直接就是Url
但是加上了v-bind，就会被当做是一个 js 语句去执行。

除了 v-bind 之外，vue还有很多个指令

• v-model 双向绑定
• v-if 条件判断
• v-for 循环
• v-solt
  。。。。。。等等