Vue异步

vue

Vue.js是一个MVVM框架，即双向数据绑定。当数据发生变化的时候，视图也会发生变化；当视图发生变化的时候，数据也会同步变化。

实现数据双向绑定

v-model的本质就是语法糖(Syntactic sugar:指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。)
负责监听用户输入事件以实时更新数据，并对一些极端场景进行特殊处理。**v-model会忽略所有表单元素中的value,checked,selected特性的初始值，而是将vue的实例数据作为数据来源。**可通过在data中声明初始值。

<div id="a">
  input: <textarea type="text" v-model="message"/>{
  {message}}
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#a",
    data: {
      message: ""
    }
  });
</script>

单选框

<div id="a">
  性别：
  <input type="radio" name="sex" value="男" v-model="cyl">男
  <input type="radio" name="sex" value="女">女
  <p>
    选中的是：{
  {cyl}}
  </p>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#a",
    data: {
      cyl: ''
    }
  });
</script>

下拉菜单

<div id="a">
下拉菜单：
  <select v-model="selected">
    <option value="" disabled>请选择</option>
    <option>A</option>
    <option value="">B</option>
    <option value="">C</option>
    <option value="">D</option>
  </select>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#a",
    data: {
      selected: ''
    }
  });
</script>

vue组件(自定义标签)

组件是可复用的Vue实例，即一组可复用的模板，类似于JSTL标签。

定义一个Vue组件

<div id="a"