Vue.js用法详解

简介

Vue.js是一款轻量级Javascript框架，其核心库只关注视图层（View）的渲染和交互，非常适合开发单页应用程序。Vue.js易学易用，且具有良好的灵活性和扩展性，因此备受前端开发者喜爱。

基本使用

以下是Vue.js的基本使用方法：

基本配置

在使用Vue.js前，需要引入Vue.js库：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

实例化

创建Vue.js实例：

var vm = new Vue({
  // options
})

数据绑定

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

数据双向绑定

<input v-model="message">
<p>{{ message }}</p>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

事件绑定

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>

var app = new Vue({
  el: '#app',
  methods: {
    greet: function () {
      alert('Hello Vue.js!')
    }
  }
})

示例说明

示例一：计数器

以下示例为简单的计数器。

HTML

<div id="app">
  <p>{{ count }}</p>
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      this.count++;
    },
    decrement: function() {
      this.count--;
    }
  }
});

示例二：显示隐藏

以下示例为根据属性值判断全选按钮是否显示。

HTML

<div id="app">
  <input type="checkbox" v-model="checkAllign">显示全选按钮
  <button v-show="checkAllign">全选</button>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    checkAllign: false
  }
});

结语

以上是Vue.js的基础知识和两个示例说明。Vue.js是一款非常好用的Javascript框架，可以极大地提高开发效率。希望本文对您有所帮助。