初识Vue

这段时间由于疫情一直宅在家里，正好赶上学校有个网页设计的比赛，于是我就做了一个汇总疫情新闻数据等等的网页参加比赛。
到了今天，网页基本逻辑已经通过jQuery实现了，但是由于是初次开发项目，对于前后端的数据交互以及需要遵循什么规范等等
我不是很理解，功能虽然实现了，但是不知道这些写法会不会造成什么不好的影响，而且我也不知道接下来怎么写。所以就索性先放下这件事，
去学习一门新的技术VUE，希望通过VUE的学习找到接着开发的灵感。

一.安装VUE

没什么好说的，使用一个框架之前肯定要先从官网上下载下来

<script src="../js/vue.js"></script>

这就直接引入html中直接使用了。

二.Hello vue!

``

<div id="app">
    {{message}}
</div>

``

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>

每一个新东西的第一个例子肯定是先和它打个招呼，来一场美丽的邂逅。

三。使用Vue实现计数器

``

<div id="app">
  <h2>这是一个计数器：{{counter}}</h2>
  <button v-on:click="addCounter">+</button>
  <button v-on:click="subCounter">-</button>
</div>

``

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter:0
    },
    methods:{
      addCounter:function () {
        this.counter++;
      },
      subCounter:function () {
        this.counter--;
      }
    }
  });
</script>

使用Vue让我感到很有趣的是他能够响应式的将data中的数据同步渲染到网页中，在之前开发网页中，从后台接收来数据之后我需要先通过jQuery获得那个需要更新的元素，然后创建出子元素实例，再append到元素中，这个繁琐的过程现在Vue都帮我们做了。这得益于Vue声明式的编程范式，而之前的jQuery是命令式的。

四。使用Vue展现列表

``

<ul id="app">
  <li v-for="movie in movies">{{movie}}</li>
</ul>

``

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies:['秦时明月','海贼王','盗梦空间','黑客帝国','假面骑士']
    }
  });
</script>

这个列表也是响应式输出数据的，可以打开console窗口，输入app.movies.shift(),可以看到秦时明月条目被动态删除了，然后输入app.movies.push("天行九歌");可以看到立马多出了一条。

之前的例子我还没什么感觉，这个v-for指令让我感觉有点jsp内味了。说实在的，vue这个Mustache语法和EL表达式有点像，都是有大括号，不过Mustache胡子多一点，有两个大括号，el就一个。el是从jsp内置对象中取值，Mustache是从Vue对象中取值。

五。Vue的生命周期

对于一个对象，特别不是我们自己创建的对象，他的生命周期对于我们程序员来说也是很重要的，我们可以在这个对象的某个生命周期进行一些操作。像是Servlet就有create,init,service,detroy这些生命阶段组成的生命周期一样，Vue也有它自己的生命周期。

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed

上述就是Vue的生命周期，相比Servlet来说多了很多，下面我们就通过实例来验证这些生命节点我们都能够执行某些操作这个结论吧。

``

<div v-on:click="textClick" id="app">
  {{message}}
</div>

``

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods:{
      textClick:function () {
        this.message = "Hello World!";
      }
    },
    beforeCreate:function () {
      console.log("the Vue is start to create...");
    },
    created:function () {
      console.log("this Vue is created...")
    },
    beforeMount:function () {
      console.log("the Vue is start to mount...");
    },
    mounted:function () {
      console.log("this Vue is mounted...")
    },
    beforeUpdate:function () {
      console.log("the Vue is start to update...");
    },
    updated:function () {
      console.log("this Vue is updated...")
    }
  });
</script>

注意控制台的输出，在后面使用Vue的时候我们就可以在它的某个生命节点进行一些操作了。

这场美丽的邂逅让我体会到了Vue的魅力，我算是明白了为什么前端能够由诸侯争霸变成这天下三分的局面了，接下来就一步一步走进Vue吧