vue入门

Vue声明式渲染、条件与循环、事件绑定、双向绑定
1.渲染 v-if

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

2.条件与循环 v-for
注意需加上 :key

<div>
   <ul>
     <li v-for="todo in todos" :key="todo.id">{{todo.text}}</li>
   </ul>
</div>

data(){
  return{
    todos:[
      {id:1,text:'吃饭'},
      {id:2,text:'睡觉'},
      {id:3,text:'打豆豆'},]
  }
},

3.事件绑定 v-on:click

<div >
    <button v-on:click='reverseMessage'>反转消息</button>
</div>

methods:{
    reverseMessage:function(){
      alert('事件');
    }
}

4.双向绑定 v-model

<div>
    <p> {{model}}</p>
    <input type="text" v-model="model">
</div>

data(){
    return{
         model:""
}

vue的生命周期

1. beforCreate (创建前)
2. created (创建后)
3. beforeMount (载入前)
4. mounted (载入后)
5. beforeUpdate (更新前)
6. updated (更新后)
7. beforeDestory (销毁前)
8. destoryed (销毁后)

vue第一次页面加载会触发哪几个钩子函数

1. beforCreate
2. created
3. beforeMount
4. mounted

DOM渲染完成周期

 mounted 

周期示例图

各周期详细解析

mounted
1 .在mounted里面修改data里面的数据，并不是想要的直接就拿mounted里面的修改过的值渲染界面，而是还会先拿data里面的初始值进行渲染，然后走beforeUpdate这里拿新的数据进行渲染
2 .这是不是说如果想要修改data里面的数据，要在beforeMounted的时候修改呢
3 .其实beforeMounted也是先按照默认值进行渲染，如果beforeMounted里面修改数据比较慢的话，他是不会等着的，还是会直接执行下一个生命周期函数。也就是说所有的生命周期函数之间没有done的操作
4 .如果在beforeMounted里面加一个setInterval()来延迟修改值的话，也会触发beforeMounted函数
5 .往下看其实发现在mounted生命周期之前修改data里面的数据都是在修改虚拟dom，直到mounted之后任何修改才会被渲染到页面上。
6 .所以理论上只要在mounted之前修改数据都行，比如mounted里面进行ajax请求，也是这个原理
7 .这个还需要再看下源码，应该就能记得比较清楚
8 .挂载页面。

beforeCreate

1 .进行初始化事件，this指向创建的实例
2 .不能访问到data
3 .不能访问computed
4 .不能访问watch
5 .不能访问methods
6 .以上的方法和数据
7 .用来初始化非响应变量

created

1 .实例创建完成
2 .数据已经和data属性绑定，此时放在data中的属性值发生改变的同时，视图也会改变
3 .可以初始化ajax请求了
4 .可以访问data
5 .可以访问computed
6 .可以访问watch
7 .可以访问methods
8 .可以访问到以上的方法和数据
9 .未挂载到DOM
10 .不能访问到ref属性内容为空数组

beforeMount

1 .判断是否有el选项，有就继续，没有就停止编译，除非调用vm.moune(el)
2 .是否有template参数选项
1 .有template参数选项，将模板编译为render函数
2 .没有template选项，将外部html作为模板编译
3 .template中的模板优先级要高于outer HTML的优先级
4 .如果Vue对象中还有一个render函数的话，那么又会先渲染render函数里面的内容。所以这是有优先级的
5 .模板编译完成，但是未挂载，无法获取dom
6 .给实例对象添加el成员
7 .在挂载开始前被调用，在beforeMount之前，会找到对应的template，并编译成render函数

mounted

1 .在mounted之前还是通过{{message}}进行占位的，因为还没有挂载到页面上，还是在js中以虚拟dom形式存在的
2 .mounted之后换成了我们想要的样子
3 .实例挂载到DOM上，此时可以通过DOM api获取到DOM节点。
4 .ref属性可以访问
5 .常用于获取VNode信息ajax请求

beforeUpdate

1 .当data中的数据发生了改变，会触发对应组件的重新渲染
2 .响应式数据更新时调用，发生在虚拟dom打补丁之前
3 .适合在试图更新之前访问现有dom，比如手动移除或者添加事件监听器

updated

1 .虚拟dom重新渲染和打补丁之后调用，组件dom已经更新，可执行依赖dom的操作
2 .避免在这个钩子中操作数据，不然可能陷入死循环

beforeDestory

1 .实例销毁之前调用，这一步实例仍然可以使用，this仍然可以获取实例
2 .常用于销毁定时器，解绑全局事件，销毁插件对象等操作

destoryed

1 .实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑，所有事件监听器都会被移除，所有子实例也会被销毁、
注意
1 .created阶段的ajax请求和mounted阶段请求的区别：前者页面未出现，如果请求消息太多，页面会长时间处于白屏状态
2 .mounted不会承诺所有的子组件也都一起被挂载。如果希望等到整个视图都被渲染完毕，可以使用this.$nextTick