Vue.js优势

简介：HTML模板+Vue实例+JSON数据

轻量：17kb,性能好

设计思想：视图与数据分离，无需操作DOM

社区：大量的中文资料和开源案例

MVC框架

MVC-表示软件可以分成三部分

1、模型（Model），2、视图（View），3、控制器（Controller）

<div id="box">
	<h1>{{msg}}</h1>
	<!-- 借助表达式{{变量名}} -->
</div>
	//创建controller
	//在Vue中controller就是Vue实例
	var vm=new Vu
	//通常管这个实例叫VM，但不是固定写法
	el:'#box',//el是用来与页面关联的选择器
	data:{//数据（model）
			msg:'hello yunjianwu'
		},//实例中可以设置很多配置项
	});

表达式概述

使用双大括号包裹JS代码构成表达式

表达式用来做什么

将双大括号中的数据替换成对应属性值进行展示

双大括号语法

也叫模板语法，Mustache语法

<div id="app">
	<span>Massage:{{msg}}</span>
</div>
 <script>
	 new Vue({
			el:"#app",
			data:{
					msg:'hello!'//改变msg的值，花括号里的msg也会改变
				}
			})
</script>

表达式中可以写哪些内容

1、JSON数据、数字、字符串

<div id="box1">
    <!-- 变量 -->
	<h1>{{msg}}</h1>
	<!-- 数字 -->
	<p>{{10}}</p>
	<!-- 字符串 -->
	<h1>{{'string'}}</h1>
	<!-- 注意区分变量和字符串 -->
	<!-- 放入表达式 -->
    <h1>{{1+1}}</h1>
	<h1>{{'hello'+name}}</h1>
	<!-- 不推荐写复杂代码，常用最多写三目运算符,原因是使用MVC设计思想，是为了是页面与数据进行很好的分离，不能写if else -->
	<h1>{{2>3?'true':'false'}}</h1>
</div>
<script>
	var vm=new Vue({
		el:'#box1',
			data:{
			msg:'hello',
			name:'二狗'
				}
				})
</script>

长风破浪会有时，直挂云帆济沧海。