vue插值语法

在模板中使用模型中数据

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

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

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

    
    <div id="app">
        
        <input type="text" v-model="msg">
        <h1>{{msg}}h1>
        <hr>
        
        <h1>{{msg.toUpperCase() + '!!'}}h1>
        
        

        
        <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();
        }
    }
})