Vue全攻略：从入门到精通，CSS与图片处理的实战技巧揭秘

引言

第一章：Vue.js入门

1.1 Vue.js基础

Vue.js的基本概念包括：

• 数据绑定
• 指令
• 条件渲染
• 列表渲染

1.2 Vue.js实例化

通过以下代码可以创建一个简单的Vue实例：

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

1.3 Vue.js模板语法

Vue.js模板语法包括：

• 插值表达式
• 指令
• 事件

第二章：Vue.js进阶

2.1 Vue.js组件

组件是Vue.js的核心概念之一，可以用于复用代码和逻辑。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Component!'
    };
  }
};
</script>

2.2 Vue.js路由

Vue Router是Vue.js官方的路由管理器，用于实现单页面应用（SPA）。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ '../components/About.vue')
    }
  ]
});

2.3 Vue.js状态管理

Vuex是Vue.js的状态管理模式和库，用于在多种组件享和管理状态。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
});

第三章：CSS实战技巧

3.1 CSS预处理器

CSS预处理器如Sass、Less等可以提高CSS的开发效率。

$primary-color: blue;

body {
  background-color: $primary-color;
}

3.2 CSS模块化

CSS模块化可以将样式与组件分离，提高代码的可维护性。

/* component.css */
.button {
  background-color: red;
  color: white;
}

3.3 CSS响应式设计

响应式设计可以通过媒体查询等技术，使网站在不同设备上都有良好的显示效果。

@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

第四章：图片处理实战技巧

4.1 图片压缩

function compressImage(file, quality, callback) {
  const reader = new FileReader();
  reader.onload = function() {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      canvas.toBlob((blob) => {
        blob.name = file.name;
        blob.lastModified = Date.now();
        callback(blob);
      }, 'image/jpeg', quality);
    };
    img.src = reader.result;
  };
  reader.readAsDataURL(file);
}

4.2 图片裁剪

function cropImage(file, rect, callback) {
  const reader = new FileReader();
  reader.onload = function() {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = rect.width;
      canvas.height = rect.height;
      ctx.drawImage(img, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
      canvas.toBlob((blob) => {
        blob.name = file.name;
        blob.lastModified = Date.now();
        callback(blob);
      }, 'image/jpeg', 1);
    };
    img.src = reader.result;
  };
  reader.readAsDataURL(file);
}

4.3 图片上传

function uploadImage(file) {
  const formData = new FormData();
  formData.append('file', file);

  fetch('upload-url', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Upload successful', data);
  })
  .catch(error => {
    console.error('Upload failed', error);
  });
}

第五章：实战案例

5.1 Vue.js项目实战

以下是一个使用Vue.js、Vue Router和Vuex实现的简单待办事项应用：

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      this.todos.push({ text: this.newTodo });
      this.newTodo = '';
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

5.2 CSS实战案例

以下是一个使用CSS模块化的响应式设计案例：

/* todo.css */
.todo {
  display: flex;
  align-items: center;
  padding: 10px;
}

.todo-input {
  flex: 1;
  margin-right: 10px;
}

.todo-remove {
  margin-left: 10px;
}

<template>
  <div class="todo">
    <input class="todo-input" v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo">
    <button class="todo-remove" @click="removeTodo">Remove</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      // ...
    },
    removeTodo() {
      // ...
    }
  }
};
</script>

5.3 图片处理实战案例

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <div v-if="imageSrc">
      <canvas ref="canvas" :width="imageWidth" :height="imageHeight"></canvas>
      <button @click="cropImage">Crop</button>
      <button @click="compressImage">Compress</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '',
      imageWidth: 0,
      imageHeight: 0,
      croppedImage: ''
    };
  },
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageSrc = e.target.result;
        this.imageWidth = this.$refs.canvas.width;
        this.imageHeight = this.$refs.canvas.height;
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      const rect = {
        x: 0,
        y: 0,
        width: this.imageWidth,
        height: this.imageHeight
      };
      this.croppedImage = this.$refs.canvas.toDataURL('image/jpeg');
    },
    compressImage() {
      const file = new File([this.imageSrc], 'compressed.jpg', {
        type: 'image/jpeg',
        lastModified: new Date().getTime()
      });
      this.croppedImage = file;
    }
  }
};
</script>

第六章：总结

• Vue.js的基本概念、实例化、模板语法
• Vue.js组件、路由、状态管理
• CSS预处理器、模块化、响应式设计
• 图片压缩、裁剪、上传