1、第一个Vue示例
解析：{{ messeage }}寻找data中和messeage 名称一致的数据，将值转换为data中messeage 绑定的值
注：{{message}}这种写法被称为差值表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue示例</title>
</head>
<body>
<div id="app">
{{ messeage }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
messeage:"hello Vue!"
}
})
</script>
</body>
</html>
2、el挂载点
（1）Vue实例的作用范围
范围是el命中元素的内部。即div（视图）内部。
<div id="app">
{{ messeage }}
</div>
（2）是否可以使用除id选择器外的其他选择器
可以使用其他的选择器，但通常使用id选择器
（3）是否可以设置其他的dom元素
可以支持除div以外的其他标签，比如：<p></p>等，但不能使用HTML和BODY但必须是双标签，不能是单标签。通常使用div标签。
3、data：数据对象
- Vue用到的数据定义在data中
- data中可以写复杂类型的数据（比如对象、数组等）
- 渲染复杂类型数据遵循js语法即可（比如对象的点语法、数组的索引语法）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>el关在</title>
</head>
<body>
<div id="app">
{{ messeage }}
{{school.name}}{{school.address}}
{{arr[0]}}{{arr[2]}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
messeage:"hello sdfsdfsd!",
school:{
name:'清华',
address:'北京'
},
arr:['大连','沈阳','丹东']
}
})
</script>
</body>
</html>
4、Vue指令
(1)v-show指令：显示隐藏
（1）v-show：根据真假切换元素的显示状态
（2）原理：修改元素的display来实现显示和隐藏
（3）指令后面的内容最终解析为布尔值
（4）值为true，显示元素；值为false，隐藏元素
注意：内容频繁的显示和隐藏用此指令
<!-- View视图 -->
<div id="app">
//true显示，false不显示
<span v-show="b">你好</span>
<span v-show="c">张三</span>
<span v-show="age >= 19">张三</span>
</div>
<script>
// Model模型
var model = {b:true, c:false,age:16};
// ViewModel视图模型(一个Vue对象)
var vm = new Vue({
el:'#app',
data:model
});
</script>
v-show的实例
本案例知识点：
（1）v-show的方法事件的写法是this.isShow = !this.isShow;
（2）v-show是修改元素的display来显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>el关在</title>
</head>
<body>
<div id="app">
<input type="button" value="切换状态" @click="changeShow" >
<img src="a.jpg" style="width: 150px;" v-show="isShow">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
},
methods:{
changeShow(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
(2)v-if、v-else：分支（要么单用v-if，要么两个连用）
（1）v-if：根据真假切换元素的显示状态
（2）本质是通过操作dom元素来显示和隐藏（dom元素就是那些标签，p标签、div标签等）
（3）表达式为true，元素存在于dom树中；为false，从dom树中移除
<!-- View视图 -->
<div id="app">
//""里面的内容就相当于if括号里面的内容
//注意：v-if和v-else之间不能加其他标签
//v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
<span v-if="name == '张三'">100</span>
<span v-if="age >= 20">200</span>
<span v-else>300</span>
</div>
<script>
// Model模型
var model = {name:'张三', age:10};
// ViewModel视图模型(一个Vue对象)
var vm = new Vue({
el:'#app',
data:model
});
</script>
v-show和v-if区别
v-show：本质是修改元素的display来显示和隐藏
v-if：本质是通过操作dom元素来显示和隐藏（dom元素就是那些标签，p标签、div标签等）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="切换状态" @click="changeShow" >
<p v-if="isShow">v-if展示</p>
<p v-show="isShow">v-show展示</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
},
methods:{
changeShow(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
如下图所示：
-两个内容都显示的时候，浏览器控制台如下图
- 两个内容都隐藏的时候，浏览器控制台如下图