【Vue】Vue数据及事件绑定

1. 数据绑定

1.1 单向绑定

把Model绑定到View后，当用JavaScript代码更新Model时，View会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model操作就可以实现视图的联动更新。

单向绑定的实现过程是：

• 所有数据只保存一份
• 一旦数据变化，就去更新页面(只有data–>DOM，没有DOM–>data)
• 若用户在页面上做了更新，就手动收集(双向绑定式自动收集)，合并到原有的数据中。

1.1.1 插值绑定

• 数据绑定的基本形式，用{ {}}实现，在Vue中被称为Mustache语法
• 插值的形式是：{ {data}}，它使用的是单向绑定首先定义一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上。

<div id="root">{
  {name}}</div>

<script>
    new Vue({
     
        el:'#root',
        data: {
     
            name: '南栀',
        }
    })
</script>

分析上述代码：
Vue实例就是ViewModel的代理对象。
el：指定要把Model绑定到id='root’的DOM节点上。
data：指定Model。data中的num相当于Model。
<div>{ { num }}</div>：相当于View。

1.1.2 v-bind绑定

如果HTML的某些属性可以支持单向绑定，我们只需要在该属性前面加上v-bind指令，这样Vue在解析时会识别出该指令，将属性值跟Vue实例的Model进行绑定。
以后，我们就可以通过Model来动态的操作该属性，从而实现DOM的联动更新。

<div id="root" v-bind:class="yangshi">Hello,{
  {name}}</div>

<script>
    new Vue({
     
        el:'#root',
        data: {
     
            name: '南栀',
            yangshi: 'red'
        }
    })
</script>

<style>
    .red{
     
        background-color: red;
    }
</style>

1.2 双向绑定

• Vue框架的核心功能就是双向数据绑定。

双向绑定： 把Model绑定到View的同时也将View绑定到Model上，这样既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。

在Vue中只有表单元素能够创建双向的绑定，可以用v-model指令

<div id="root">
    <form action="#">
        <p><input type="text" v-model="name"></p>
        <p><input type="text" v-model="age"></p>
    </form>
    <p>姓名: {
  { name }}</p>
    <p>年龄: {
  { age }}</p>
</div>


<script>
    new Vue({
     
        el:'#root',
        data: {
     
            name:'南栀'