·挂载元素可以使用Vue.js的模板语法,模板中可以通过插值表达式为元素进行动态内容设置,

    写法为{{ }}。

    插值表达式 - 图1

    ·注意点:

    ·插值表达式只能书写在标签内容区域,可以与其它内容混合。

    ·内部只能书写 JavaScript 表达式,不能书写语句

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <ul> <li>第一段示例内容:{{ 10 + 20 + 30 }}</li> <li>第二段示例内容:{{ 22 > 3 ? ‘22比3大’ : ‘3比22大’ }}</li> </ul> <com-a @va=“value = $event”></com-a> <com-b :valueb=“valueb”> {{ valueb }} </com-b> </div> <script src=“lib/vue.js”></script> <script> Vue.component(‘ComA’, { template: `
    `, data: function () { return { valuea: ‘helloA’ } }, methods: { fn () { this.$emit(“va”, this.valuea) } } }) Vue.component(‘ComB’, { template: `
    `, data: function () { return { valueb: ‘helloB’ } }, methods: { fn () { this.$emit(“va”, this.valueb) } } }) new Vue({ el: ‘#app’, data: function () { return { valueb: ‘hellobbbbbbbbbbbbbbbbbb’ } } }); </script> </body> </html>