1st.初始Vue
首先，需要给Vue准备一个容器：
<div id="app">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
</div>
在页面中，通过插值表达式 {{数据名}} 可以直接使用Vue管理的数据。 注意：Vue管理的数据是响应式的，所谓响应式，指的是，当前数据发生改变是，会重新渲染页面。
在创建一个vue实例之前，需要先安装vue，可以通过下载官网的vue包或者直接用CDN导入
开发版本：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
生产版本：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
现在就可以创建一个vue实例了：
// 不允许 vue-devtools 检查代码
Vue.config.devtools=false
// vue 在启动时不显示生产提示
Vue.config.productionTip=false
// 初始化一个Vue实例，在创建Vue实例时，需要给Vue传递一个配置选项，该配置选项是一个对象
let vm=newVue({
// el选项，指定当前Vue实例，操作的容器
el:'#app',
// data选项，用于存储当前Vue实例管理的数据
// data选项里面管理的数据，会被添加到Vue实例身上，这里就是vm身上。
// data选项里面管理的数据，其实会被Vue实例身上的_data进行代理；并将代理过后的数据再添加到Vue实例身上，方便直接调用。
data:{
name:'张三',
age:20
}
})
展示效果：
2nd.Vue的常用指令
2.1.插值表达式
在页面中直接显示data里面的数据，可以通过插值表达式
例如：
<h2>{{name}}</h2>
<h2>{{address}}</h2>
2.2.属性绑定
通过v-bind:指令让html元素的属性绑定Vue实例管理的数据。v-bind:的简写是:
例如：
<input type="text" v-bind:value="name" >
<input type="text" :value="name" >
2.3.事件绑定
通过v-on:指令让html元素的事件绑定Vue实例管理的方法。v-on:的简写是@
例如：
<input type="text" v-on:input="setName">
<input type="text" @input="setName">
注意：这里在调用方法时，不能加上()，此时它才会将事件对象作为方法的第一个参数，传给该方法。
如果方法的逻辑处理比较简单，可以直接将代码写在行内；这里的$event返回的就是事件对象。
例如：
<input type="text" :value="address" @input="address=$event.target.value">
2.4.双向绑定
v-model指令，用于实现对数据的双向绑定，所谓双向绑定，
指的是：数据发生变化重新渲染页面，页面数据发生变化更新回数据。
<input type="text" v-model="hobby">
3rd.条件渲染和列表渲染
3.1.条件渲染
3.1.1 v-if
v-if指令用于条件渲染，表达式返回true，渲染元素；否则不渲染元素。
例如：
<div class="box" v-if="isShow">v-if</div>
v-if，v-else-if，v-else还可以组成多重判断结构。注意：中间不能有断层。
例如：
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=70">中等</h2>
<h2 v-else-if="score>=60">合格</h2>
<h2 v-else>差</h2>
3.1.2 v-show
v-show指令也是用于条件渲染，表达式返回true，显示元素；否则不显示元素。
例如：
<div class="box" v-show="isShow">v-show</div>
注意：v-if的表达式返回false，会生成对应的元素。v-show的表达式返回true，元素正常生成，通过display样式去控制显示和隐藏。所以，如果元素需要反复切换显示和隐藏使用v-show；如果只是页面加载时判断是否显示使用v-if。
3.2.循环渲染
v-for指令，用于循环列表。
语法：v-for="(每一项,索引) in 数组"，渲染列表时，为了提高渲染性能，通常都要绑定一个key。key一定要是唯一值。
例如：
<li v-for="(item,index) in goodses" v-bind:key="index">
{{item.id}}---{{item.name}}---{{item.price}}
</li>
