vue中的配置说明

1、vue实例中的配置

<div id="app">
{{demo}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            massage:"你好世界",
            demo:"我的世界",
        }
    })
</script>

1、el用于指定实例和元素来建立联系

2、data里面存入的是数据

3、{{}}是vue中的插值语法，里面的数据供el指定的容器使用

4、注vue实例和model只能是一对一的关系，不能是一对多、多对一的关系

注：vue中分为插值语法和指令语法

1、插值语法就是{{}}

2、指令语法指的是v-model、v-bind

3、插值语法用于标签体中，指令语法用于标签属性中

<div class="app">
    <a :href="url.sum1">点击进入{{massage.name1}}</a>
    <a :href="url.sum2">点击进入{{massage.name2}}</a>
</div>
<script>
      new Vue({
        el:'.app',
        data:{
            massage: {
                name1:'百度',
                name2:'尚硅谷'
            },
            url: {
                sum1:'https://www.baidu.com/',
                sum2:'http://www.atguigu.com/'}
        }
    })
</script>

2、el和data的两种写法

1、el和data的第一种写法

new Vue({
        el:'.app',//el直接写在vue实例对象中
        data:{}//data在这里是一个对象
})

2、el和data的第二种写法

<div id="app">
    <p>{{massage}}</p>
</div>
<script>
    const v = new Vue({
        data(){//data的第二种写法是函数式写法，必须要用return放回一个对象，并且前面必须要定义一个参数来接受这个实例,并且data函数里面的this就是vue实例对象
            return{
                massage:'你好，世界'
            }

        }
    })
    v.$mount('#app')//el的第二种写法，写在实例外，用的是vue里面的原型对象的mount

注：

由vue管理的函数一i的那个不要写箭头函数，因为箭头函数里面没有自己的this所以会去外面找this这时的this就是指向的window，而不会指向vue实例对象