vue2 --- vue模板语法中的语法和指令语法，v-bind指令、v-model双向数据绑定、v-on事件绑定

一、vue模板语法

1.插值语法

• { {xxx}}：xxx为js表达式，可以直接读取到data中的所有属性。

• 读取methods中的方法时，需要写为{ {xxx()}}才能读取函数的返回值。

前引知识：
js表达式：可以被求值的代码，写在赋值语句的右侧。
js语句：可以执行的代码，不一定有值。

2.指令语法

指令：v-开头都是vue里的指令

2.1 v-bind：单向数据绑定。

 <div id="root">
   // 普通的href标签属性，值为字符串url 
   <a href="url">百度</a>
   // 绑定之后将url作为表达式去执行 
   // 相当于<a href="https://www.baidu.com">百度</a>
   <a v-bind:href="url">百度</a>
   // v-bind:简写为: 
   <a :href="url">百度</a>
  </div>
  <script>
    new Vue({
   
      el:'#root',
      data:{
   
        url:'https://www.baidu.com'
      }
    })
  </script>

2.2 v-model：双向数据绑定，

v-model：只能应用在表单类元素上，元素要有value值，v-model依赖value进行数据绑定。v-model:value=““简写为v-model=””，因为value默认收集value值。

v-model中的3个修饰符：

1）v-model.number：将输入字符串转为有效的数字，一般和type="number"配合使用。

2）v-model.lazy：将输入的value失去焦点时再收集数据。

3）v-model.trim：将输入的value去掉前后的空格，中间的空格不能去掉，只能去掉前后的空格。

 收集表单数据：
	若：<input type="tex