vue基础知识

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。以下是Vue.js开发的基础知识：

1. Vue实例

在Vue中，一切都是从创建一个Vue实例开始的：

var vm = new Vue({
  // 选项
});

2. 数据与方法

Vue实例的数据对象：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
});
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
});

3. 模板语法

Vue.js使用了基于HTML的模板语法，允许你声明式地将数据渲染进DOM。

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

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

4. 计算属性和侦听器

计算属性和侦听器用于响应数据的变化。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
});

5. Class与Style绑定

Vue.js提供了强大的绑定Class和Style的能力。

<div v-bind:class="{ active: isActive }"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

6. 条件渲染

v-if、v-else-if、v-else 用于条件性地渲染一块内容。

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

7. 列表渲染

v-for 指令可以基于一个数组渲染一个列表。

<ul>
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

8. 事件处理

v-on 用于监听DOM事件。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
});

9. 表单输入绑定

v-model 指令用于在表单输入和应用状态之间建立双向绑定。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

10. 组件

组件是Vue.js最强大的功能之一，允许你扩展HTML元素，封装可重用的代码。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

使用组件：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' });

以上是Vue.js开发的一些基础概念，但Vue.js的强大远不止于此，它还包括了路由、状态管理、服务器端渲染等高级功能。开始Vue.js的旅程，建议阅读官方文档以获得更全面的学习。