初识Vue

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>