Vue..1

1.Vue中两种数据绑定的方式：

①.单向绑定（v-bind）：数据只能从data流向页面。

②.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

备注：1.双向绑定一般都是应用在表单类元素(输入类元素)上（如：input、select等）

2.v-model：value 可以简写为 v-model ，因为v-model默认收集的就是value值。

2.el的两种写法

<script>
    const vm = new Vue({
        el:'#app',    //第一种写法
        data:{
            name:'张三',
            age:18
        }
    })
    v.$mount('#app')     //第二种写法
</script>

3.data的两种写法

<script>
    new Vue({
        el:'#app',
        //data的第一种写法：对象式
        data:{
            name:'张三'
        }


        //data的第二种写法：函数式
         data:function(){
            return {
                name:'张三'
            }
        } 
    })
</script>

备注：

①.目前哪种写法都可以，到了学习组件的时候，data必须使用函数式，否则会报错。

②.第二种函数式写法中的this指的是vue实例对象。

③.由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，就变成Window了。

4.事件的基本使用：

1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，@是v-on的简写。
2. 事件的回调需要配置在methods对象中，最终会在vm上。
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了。
4. methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或 组件实例对象。
5. @click='demo' 和 @click="demo($event)" 效果一致，但后者可以传参。

<div id = "app">
    <button v-on:click="getName">点我打印姓名</button>   //绑定鼠标单击事件
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'张三'
        },
        methods:{   //存放事件的（函数）
            getName(){
                console.log(this.name);
            }
        }
})
</script>

5.Vue中的事件修饰符：

1. prevent：阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；