Vue

显然，写VUE就是为了用单文件组件，不然用原生js其实也行了。

.vue文件基本格式

<script>
export default {
  // 组件选项
  // 此处声明一些响应式状态（js）
}
</script>

<template>
  // 这里写模板（html）
</template>

<style>
 // 这里写css
</style>

attribute bind(属性绑定)

属性绑定就是使用v-bind语法对属性进行动态设置

语法：v-bind:attribute="variable"

<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1 v-bind:class="titleClass">Make me red</h1> 
  <!-- 此处添加一个动态 class 绑定, 将class和data中的titleClass变量绑定-->
  <!-- 从而等价于class = "title" -->
</template>

<style>
.title {
  color: red;
}
</style>

事件监听（单向绑定）

<script>
export default {
  data() {
    return {
      c: 0
    }
  },
  methods: {
    increment() {
      this.c++;//这里的this其实就是整个vue组件，c就是其一个属性
    }
  }
}
</script>

<template>
  <button v-on:click="increment">count is: {{ c }}</button>
  <!-- 将increment函数绑定到click事件上（显然这里的click是js的知识点哈哈） -->
</template>

表单绑定（双向绑定）

如果控件有value属性的话（<textarea> <select> <input>等等)，则可以使用v-model实现控件值的双向绑定

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {

  }
}
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

条件渲染

使用v-if指令来有条件地渲染元素

<script>
export default {
  data() {
    return {
      awesome: true
    }
  },
  methods: {
    toggle() {
      this.awesome^=true;//每次调用这个函数的时候，就把awesome给取反
    }
  }
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <!--点击按钮的时候就调用toggle函数-->
  <h1 v-if="awesome">Vue is awesome!</h1>
  <!--如果awesome为真就渲染这个-->
  <h1 v-else>Oh no 😢</h1>
  <!--否则就渲染这个-->
</template>

列表渲染

可以使用 v-for 指令来渲染一个基于源数组的列表：

<script>
// 给每个 todo 对象一个唯一的 id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo })
      this.newTodo = ''
      //在源数组上调用变更方法
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
      //使用新的数组替代原数组
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
        <!--这里进行了一波列表渲染-->
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

计算属性

我们可以使用 computed 选项声明一个响应式的属性，它的值由其他属性计算而来

<script>
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },
  computed: { //计算属性
    filteredTodos() {
      return this.hideCompleted
        ? this.todos.filter((t) => !t.done)
        : this.todos
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>