逼疯一个前端入门程序员--vue小学习

代码一敲，每日一🐇，🐇就完了。
小学习第一步：
首先

<div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!--  声明式渲染   -->
    <!-- <div>{{message}}</div> -->
    <!-- 条件 -->
    <div v-if="seen">{{message}}</div>
    <!-- 循环 -->
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.id}}--{{todo.text}}</li>
    </ul>
    <!--  绑定事件 第一种写法  -->
    <button v-on:click="reverseMessage">反转消息</button>
    <!--  第二种 简略写法  -->
    <!-- <button @click="reverseMessage">反转消息</button> -->
    <!-- 双向绑定 -->
    <input v-model="message2">
    <p>{{message2}}</p>
</div>

在script标签中写

export default {
  name: 'App',
  components: {
    // 写组件
  },
  data(){
    return{
      message:"hello jhx",
      // seen:false,
      seen:true,
      todos:[
        {id:1,text:'jjj'},
        {id:2,text:'hhh'},
        {id:3,text:'xxx'},
      ],
      message2:" ",
    }
    
  },
  methods:{
    //写事件
    reverseMessage(){
      alert("已触发,点击确定变更")
      this.message=this.message.split('').reverse().join('')
    }
  }
}

效果：
①

②

③

④

小学习第二步:

vue生命周期

    1、beforeCreate（创建前）
    2、created（创建后）
    3、beforeMount（载入前）
    4、mounted（载入后）
    5、beforeUpdate（更新前）
    6、updated（更新后）
    7、beforeDestroy（销毁前）
    8、destroyed（销毁后）

vue第一次页面加载会触发的钩子函数
beforeCreate、created、beforeMount、mounted

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

beforeCreate
    进行初始化事件，this指向创建的实例，而且不能访问到data、computed、watch、methods的方法和数据，可以用来初始化非响应变量
created钩子
    实例创建完成，数据已经和data属性绑定，此时放在data中的属性值发生改变的同时，视图也会改变。就可以初始化ajax请求了，还可以访问data、computed、watch、methods的方法和数据。犹如还未挂载到DOM，所以不能访问到ref属性内容为空数组
beforeMount
    在挂载开始前被调用，在beforeMount之前，会找到对应的template，并编译成render函数
mounted
    在mounted之前还是通过{{message}}进行占位的，因为还没有挂载到页面上，还是在js中以虚拟dom形式存在的，而经过mounted之后换成了我们想要的样子，实例会挂载到DOM上，此时可以通过DOM api获取到DOM节点。通过$ref属性可以访问，常用于获取VNode信息ajax请求
beforeUpdate
    当data中的数据发生了改变，会触发对应组件的重新渲染，响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在试图更新之前访问现有dom，比如手动移除或者添加事件监听器。
updated
    虚拟dom重新渲染和打补丁之后调用，组件dom已经更新，可执行依赖dom的操作，避免在这个钩子中操作数据，不然可能陷入死循环。
beforeDestory
    实例销毁之前调用，这一步实例仍然可以使用，this仍然可以获取实例，常用于销毁定时器，解绑全局事件，销毁插件对象等操作。
destoryed
    实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑，所有事件监听器都会被移除，所有子实例也会被销毁。
注意:
    created阶段的ajax请求和mounted阶段请求的区别：前者页面未出现，如果请求消息太多，页面会长时间处于白屏状态.mounted不会承诺所有的子组件也都一起被挂载。如果希望等到整个视图都被渲染完毕，可以使用this. $nextTick
    最后，重点中的重点，如何逼疯一个程序员，就从小做起就行，在他所要学的知识里随便动点小手脚，但是嘞，程序员也是人，何必逼疯人家呢，没有什么深仇大恨是正宗的一起喝杯茶所解决不掉的，如果有，呢就两杯三杯四杯··· ···

结语：

    人生每天都要笑，生活的下一秒发生什么，我们谁也不知道。所以，放下心里的纠结，放下脑中的烦恼，放下生活的不愉快，活在当下。人生喜怒哀乐，百般形态，不如在心里全部淡然处之，轻轻一笑，让心更自在，生命更恒久。积极者相信只有推动自己才能推动世界，只要推动自己就能推动世界。