vue插值语法

在模板中使用模型中数据

插值语法 ：{{}} 提供一个真正的js环境

插值语法中js表达式为无法复用，想要复用 可以放在计算属性数据中 (多定义监听器，性能)

逻辑复杂：计算属性数据 逻辑简单js表达式

    <!-- 视图 -->
    <div id="app">
        <!-- 指令属性值不允许插值语法 -->
        <input type="text" v-model="msg">
        <h1>{{msg}}</h1>
        <hr>
        <!-- 插值语法是一个真正的js环境 -->
        <h1>{{msg.toUpperCase() + '!!'}}</h1>
        <!-- 如果逻辑复杂建计算属性数据 -->
        <!-- 若逻辑简单建议js表达式 -->

        <!--无法复用 -->
        <h1>{{msg.toUpperCase()}}</h1>

        <!-- 如果希望复用,可以使用计算属性数据 -->
        <h1>{{dealMsg}}</h1>
        <h1>{{dealMsg}}</h1>
        <h1>{{dealMsg}}</h1>
    </div>

// 在es6中基于ES Module规范
import Vue from 'vue';

// 关闭生产提示
Vue.config.productionTip = false;
// 实例化Vue
let vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello msg',
    },
    computed: {
        dealMsg() {
            return this.msg.toUpperCase();
        }
    }
})