Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios

在Vue.js中，数据和DOM是双向绑定的，所以我们不需要手动操作DOM。Vue.js提供了一些常用的指令，如v-if、v-for、v-bind等，还有组件系统，可以让我们用更自然的方式构建界面。

1. Vue快速入门

<div id="app">
  {{ message }}
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

2. Vue常用指令

<div id="app">
  <!-- 文本插值 -->
  <p>{{ message }}</p>
 
  <!-- 条件渲染 -->
  <p v-if="seen">现在你看到我了</p>
 
  <!-- 绑定属性 -->
  <img v-bind:src="imageSrc">
  <!-- 缩写 -->
  <img :src="imageSrc">
 
  <!-- 事件绑定 -->
  <button v-on:click="reverseMessage">反转消息</button>
  <!-- 缩写 -->
  <button @click="reverseMessage">反转消息</button>
 
  <!-- 循环 -->
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
 
  <!-- 按键绑定 -->
  <input v-on:keyup.enter="submit">
</div>

3. Vue生命周期

new Vue({
  data: {
    // ...
  },
  created: function () {
    // 实例被创建后调用
  },
  mounted: function () {
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用
  },
  // ...
})

4. Vue Ajax和Axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
<script>
var app = new Vue({
  // ...
  methods: {
    fetchData: function () {
      var self = this;
      axios.get('api/data')
        .then(function (response) {
          self.data = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
})
</script>

以上代码展示了如何在Vue应用中使用Axios进行HTTP请求获取数据。在实际开发中，Vue.js通常与现代JavaScript框架（如Vuex和Vue Router）一起使用，以及各种UI库，如Element UI、Bootstrap Vue等。