v-bind指令，v-model指令，el与data的两种写法

一、v-bind指令

基本语法：v-bind:属性名 = "JS表达式"，表示将 JS 表达式的值赋值给此属性（单向绑定）

简写：:属性名 = "JS表达式"

代码示例：

注意：

1. 如果 data 中的属性值发生变化，单向绑定的数据也会自动的随之变化

2. 插值表达式一般写在标签体中，单向绑定一般用于给标签的属性绑定值

二、v-model指令

基本语法：v-model:value = "JS表达式"，表示双向绑定，也就是 data 中的值被修改，页面的值也会被修改；页面的值被修改，对应的 data 属性值也会随之修改

简写：v-model = "JS表达式"，即双向绑定默认操作的属性就是 value

代码示例：

注意：

1. 双向绑定只能使用在表单类元素上，也就是标签必须有 value 属性，比如输入框、单选框、多选框等
2. 插值表达式和单向绑定数据只能从 data 流向页面，而双向绑定还可以使数据从页面流向 data

三、el与data的两种写法

3.1 el的两种写法

3.1.1 第一种写法

<script type="text/javascript">
    new Vue({
        el: '#root', //绑定id为root的容器
        data: {
       		//定义数据 
    	}
    })
</script>

3.1.2 第二种写法 

<script type="text/javascript">
    const vm = new Vue({
        data: {
       		//定义数据 
    	}
    })
    vm.$mount('#root') //绑定id为root的容器
</script>

两种方式的区别：

第一种创建Vue对象的时候就要绑定容器；第二种先创建Vue对象，可以做一些其他操作后再绑定容器。

3.2 data的两种写法

3.2.1 对象式

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data对象，然后在其中定义属性
        data: {
       		name:'Nicki Minaj' 
    	}
    })
</script>

3.2.2 函数式

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data函数，然后在返回值中定义属性
        data(){
            return{
                //返回值是定义的数据
                name:'Nicki Minaj' 
            }
        }
    })
</script>

 注意：

1. 使用组件时，必须使用函数式定义数据
2. 由 Vue 管理的函数不能写成箭头函数，如果使用箭头函数，则函数中的 this 表示的是 window，如果使用普通函数格式，则 this 表示 Vue对象