一、Vue框架
常用地指令学习:
https://cn.vuejs.org/官网地址
概述：前端领域当中有三大框架（都是开发单页面应用的框架）
Angular诞生于2009年，是由谷歌创建出来的框架
React诞生于2013年，是由facebook公司创建出来的框架
vue诞生于2014年，是由中国在校大学生尤玉溪创建出来的。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式（JavaScript）框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
1.1Vue框架基本使用
注意：vue它是属于前端当中的一个JavaScript框架。源码都封装到了一个尾缀为JS这样的文件里面。
因此我们需要获取源码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入Vue源码（引包）-->
<script src="./js/vue.min.js"></script>
</head>
<body>
<!--进行页面布局-->
<div id="app">
<h1>我是小明呀，今年{
{
age}}啦！</h1>
</div>
</body>
</html>
<script>
//当程序中引入vue框架的时候，这个框架对外暴露了一个vue构造函数
//通过vue构造函数创建vue类实例
console.log(Vue);
var vm = new Vue({
//挂载点（将vue实例）和结构层中标签进行联系
el:"#app",
//vue实例数据来源
data:{
age:18
}
});
console.log(vm);
//修改实例age属性值
vm.age=11;
vm.age=22;
</script>
结果：
1.2Vue框架中常用的指令
概述：Vue框架给我们提供了很多的指令，都是以v-xxxx开头（为什么是以v开头，因为是Vue提供的），Vue提供的这些指令起始都是作为标签属性直接使用；
指令是由vue提供的，主要的作用是可以操作标签（文本、样式、事件等等）
指令理解：相当于长官给士兵下达军令（我让你干什么你就干什么）
<div id='box' class='cur'>我是div</div>
1.2.1v-text
概述：可以更新标签的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引包-->
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>下面的指令是用来操作文本的</h1>
<p v-text="msg"></p>
<!--横线-->
<hr>
<p>{
{
msg}}</p>
<p v-html="msg"></p>
</div>
</body>
</html>