vue的双向绑定

<div id="app">
    <%--vue需要一个根目录标签--%>
    <%--讲解一个概念 双向绑定 数据和页面的展示的数据效果 是一起的 保持一致的--%>
    <%--当vue中data的数据发生了改变 呢么展示的效果也发生改变--%>
    姓名（以前这样写) <input type="text" value="妖刀"><br>
    <%--vue核心是 把数据 渲染到html中，分为标签和文本--%>
    <%--呢么文本，是用插值表达式--%>
    姓名:{{name}}<br>

    <%--下面就是渲染到标签中--%>
    <%--v-bind是绑定标签的属性的 一经过绑定 数据就是动态的 就要写data的key--%>
    vue：<input type="text" v-bind:value="name"><br>
    <input type="text" :value="name"><br>
    <%--以上是数据的单项绑定 数据绑定到了显示效果--%>
    vue 双向绑定：<input type="text" v-model="name"><br>
    <%---v-model双向绑定.作用在.4个.范围上 input标签，select标签 textarea标签components组件---%>
    <%--v-model 是v-bind 的升级版，其本质是一个语法糖。什么是.语法糖，--%>
    <%--java中for循环就是一个语法糖，for循环的本质就是while循环.语法糖 就是简化了代码的书写--%>
    <%--只渲染一次的指令，v-once--%>
    姓名：
    <span v-once>{{name}}</span>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:'妖刀~'
        }
    });

</script>