vue指令---插值表达式

 1.在我们配置好vue脚手架后会有一个app.vue的文件,我们的html写在这个页面里面即可.

2.代码如下:

 <div>
    <h1>{{ msg }}</h1>
  </div>

首先看到这个{{}}肯定不陌生,这是我们模板引擎的语法,胡子语法.vue的插值表达式也是这种写法.

然后需要一个div盒子,用来装内容,接下来就开始写vue了.

<script>
new Vue({
    el:'div',
    data:{
        msg:'这是vue的插值表达式'
        }
    }
</script>

根据字面量看得出来vue是一个对象,里面的el属性用来连接盒子的,如果是标签直接写标签名即可,如果是类名则需要加一个 .  ,id就需要加#.和css一样.

另一个属性data,译为数据,很明显是用来填写数据的,msg就是我们胡子语法里面的字符串,可以看做一个变量,我们在data对象里面给msg赋值.

小结:

1.什么是插值表达式?

        插入值的表达式,在html结构中使用胡子语法,把vue数据直接显示在标签内.

2.vue的变量声明在哪里?

        声明在vue对象的data函数里面.