作用：给元素设置文字

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>vue的起步和插值</title>
    9. </head>
    11. <body>
    12.     <div id="app">
    13.         <h2>{{ msg }}</h2>
    14.         <h3>{{ 2 }}</h3>
    15.         <h3>{{ "hello" }}</h3>
    16.         <h3>{{ {id:1} }}</h3>
    17.         <h3>{{ 1>2 ? '真的':'假的'}}</h3>
    18.         <h3>{{ txt.split('').reverse().join('') }}</h3>
    19.         <h1>{{ getContent() }}</h1>
    20.         <h1>{{ msg3 }}</h1>
    21.     </div>
    22.     <!-- 1.引包 -->
    23.     <script src="./vue.js"></script>
    24.     <script>
    25.         // console.log(Vue);
    27.         // 2.初始化
    28.         const vm = new Vue({
    29.             el: '#app',
    30.             // 数据属性
    31.             data: {
    32.                 msg: 'hello vue',
    33.                 txt: 'hello',
    34.                 msg2: 'content',
    35.                 msg3:'<p>插值语法</p>'
    36.             },
    37.             // 存放的是方法
    38.             methods: {
    39.                 getContent() {
    40.                     return this.msg + ' ' + this.msg2;
    41.                 }
    42.             }
    43.         });
    44.         console.log(vm.msg);
    46.     </script>
    48. </body>
    50. </html>