【Vue】HelloWorld_vue输出helloworld

html代码

<div id="app">
        <div>{{msg}}</div>  //输出结果为Hello World!
        <div>{{1+2}}</div>  //输出结果为3
        <div>{{msg+'-------'+123}}</div>  //输出结果为Hello World!-------123
 </div>
1
2
3
4
5

js代码

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello World!'
    }
});
1
2
3
4
5
6

1、参数分析：
el:元素的挂载位置，即告诉Vue把数据填充到哪个位置（值可以是css选择器或者DOM元素）
data:模型数据（值是一个对象）
2、插值表达式{{}}用法：
将数据填充到HTML标签中
插值表达式支持基本的计算操作
3、Vue代码运行原理分析：
概述编译过程的概念（Vue语法—>原生语法）