在HTML+CSS+JavaScript前端三件套后，Vue的出现就显得很有必要了
Vue是一种前端开发JS框架，它的出现使传统的面向JS中的DOM对象模型的开发效率得到了提升。Vue的核心思想是MVVM（Model-View-ViewModel）模型，这种模型使得前端的页面显示同后端数据模型相结合，这种模型使得视图端和数据端保持相同，帮助开发人员更能将精力放在对数据的处理上，在HTML中使用Vue，通常有以下三步：
1.引入vue.js
2.创建vue对象，在这个对象中需要声明好vue对象的处接管区域el（class，id），数据模型data（用大括号表示）以及对象方法method
3.在相应的元素中使用Vue模型
有一些vue的指令需要注意：
1.v-bind 为HTML标签绑定属性值，比如设置href，css样式
<a v-bind:href="url">链接1</a>
2.v-model 在表单元素上创建双向数据绑定
<input type="text" v-model="url">
前端页面修改text框里的值，vue中数据模型url值对应改变，实现MVVM模型
eg：
<a v-bind:href="url">链接1</a>
<input type="text" v-model="url">
<script>
new Vue({
el:#app;
data:{
url:"www.baidu.com"
}
})
<script>
3.v-on 为HTML标签绑定js事件
eg：
<input type="button" v-on:click="handle()">new Vue({
el:#app;
data:{
url:"www.baidu.com"
}
methods:{
handle:function(){
alert("我被点击了);
}
}
})
4.v-if/v-else-if/v-else
条件性的渲染某元素，判定为true时渲染，否则不渲染
<span v-if="user.gender==1">男</span>
5.v-show 根据条件展示某元素，区别在于切换的时display的值
v-if和v-show在用法上接近，不同的是他们的原理：
v-if等指令只有在满足前设时才会触发指令。
v-show指令将所有指令都渲染，通过CSS样式display来选择性展示和隐藏
6.v-for
Vue的生命周期
Vue的生命周期一般包含八个阶段，每触发一个生命周期事件，就会自动执行一个生命周期方法（钩子）
1.beforeCreate 创建前
2.created
3.beforeMount 挂载前
4.mounted 挂载完成
5.beforeUpdate 更新前
6.Updated
7.beforeDestroy 销毁前
8.destroyed
标签：Vue,HTML,vue,第一篇,模型,Blog,指令,数据模型 From： https://www.cnblogs.com/lonelythreehorse/p/17652697.html