Vue系列之Vue实例化

---

一、Vue.js之HelloWorld基本步骤

1、需要提供标签用于填充数据

<div id="app">
    <div>{{msg}}div>
    <div>{{1 + 2}}div>
    <div>{{msg + '----' + 123}}div>
div>
1
2
3
4
5

2、引入vue.js库文件

<script type="text/javascript" src="js/vue.js">script>
1

3、使用vue语法做功能，把vue提供的数据填充到标签里面

<script type="text/javascript">
	/*
      Vue的基本使用步骤
      1、需要提供标签用于填充数据
      2、引入vue.js库文件
      3、可以使用vue的语法做功能了
      4、把vue提供的数据填充到标签里面
    */
	var vm = new Vue({
		el: "#app", // 获取元素，如果是id传入#，如果是类则传入.
		data: {
			// data中存放要渲染到页面上的数据
			msg: "Hello Vue" // msg中存储的值 Hello Vue, 会将HTML中插值语法中的msg替换掉
		}
	});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

二、Vue.js之HelloWorld细节分析

1、实例参数分析

• el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
• data：模型数据（值是一个对象）

2、插值表达式用法

• 将数据填充到HTML标签中（“Mustache”语法 (双大括号) 的文本插值）
  • Mustache 标签将会被替代为对应数据对象上 msg property 的值。
• 插值表达式支持基本的计算操作（只能包含单个表达式）

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！