vue是一套前端框架,免除原生javaSCript中的DOM操作,简化书写,MVVM:可以实现数据的双向绑定,Vue常用指令v-if和v-for等等...

vue是一套前端框架,免除原生javaSCript中的DOM操作,简化书写
基于MVVM(Model-view-viewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上
官网:http://cn.vuejs.org
model(模型) -> controller(控制器)->view(视图)
MVC:只能实现模型到视图的单向展示
M:model,业务模型,处理业务
V:view,视图,界面展示
C:Controller,控制器,处理请求,调用模型和视图
MVVM:可以实现数据的双向绑定

vue快速入门
1新建HTML页面,引入vue.js文件
2.在js代码区域,创建Vue核心对象,进行数据绑定
new Vue({
el:"#app"
data(){
return {username:""} //模型
}
methods:{} //写方法的
});
3.编写视图
<div id="app">
<input name="username" v-model="username">
{{username}} //插值表达式
</div>

Vue常用指令
v-bind 为html标签绑定属性值,如设置href,css样式等 列如v-bind:href  简化书写 :href
v-model 在表单元素上创建双向数据绑定 列如v-model
v-on 为html标签绑定事件 列如v-on:click="show()" 简化 @click="show()"
v-if     v-else    v-else-if 判断正确显示元素,判断错误不显示 列如v-if="count == 3"
v-show 判断成功显示元素,跟上面的区别在于,v-show切换的display 

<div id="box">
  <input v-model="number">
  <div v-if="number == 6">我是6</div>
  <div v-else-if="number == 3">我是3</div>
  <div v-else>我什么也不是</div>
</div>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el:"#box",
    data() {
      return {
        number:6
      };
    }
  })

 

注意:v-if 和 v-show 的渲染方式不同,v-show使用的是切换display v-if 不是
v-for 列表渲染,遍历容器的元素或者对象的属性 列如 v-for="变量名 in 模型名"

<div id="box">
<div v-for="x in arr">
    {{x}}
</div>
</div>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el:"#box",
    data() {
      return {
        arr:[1,4,2,5,6]
      };
    }
  })
</script>

 

Vue生命周期
生命周期的八个阶段,没触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
状态        阶段周期
beforeCreate    创建前
created        创建后
beforeMount    载入前
mounted        挂在完成
beforeUpdate    更新前
updated        更新后
beforeDestroy    销毁前
destroyed    销毁后
mounted:挂在完成,VUe初始化成功,html页面渲染成功,发送异步请求,加载数据

mounted相当于VUe初始化成功自动执行