JavaScript-Vue入门-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript-Vue入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文主要测分享Vue的一些基础

Vue简介

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。它的主要目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

下是一些 Vue 的主要特点和概念：

1. 响应式数据绑定：
Vue 使用基于 HTML 的模板语法，允许你声明式地将已渲染的 DOM 绑定至底层 Vue 实例的数据。当数据改变时，视图会自动更新。这种数据驱动的方式使得状态管理变得直观而简单。

2. 组件化：
Vue 允许你将界面拆分为可重用的组件，每个组件都有自己的逻辑和样式。这使得代码更易于组织和维护，同时提高了代码的复用性。你可以使用 Vue 的单文件组件特性，将模板、逻辑和样式封装在一个 .vue 文件中。

3. 指令：
Vue 提供了一套丰富的指令，用于在模板中绑定数据、事件、样式等。例如，v-bind 用于绑定属性，v-on 用于绑定事件处理器，v-if 和 v-show 用于条件渲染等。

4. 生命周期钩子：
Vue 实例在其生命周期中有一系列的钩子函数，允许你在不同的阶段执行特定的逻辑。例如，你可以在组件创建时初始化数据，或在组件销毁时清理资源。

5. 路由和状态管理：
虽然 Vue 本身并不直接包含路由和状态管理功能，但它与 Vue Router（官方路由库）和 Vuex（官方状态管理库）无缝集成。Vue Router 使得构建单页面应用变得简单，而 Vuex 则提供了一个集中式的存储库，用于管理应用的状态。

创建第一个Vue程序

打开Webstorm，创建一个新项目选择Vue

JavaScript-Vue入门,javascript,vue.js,开发语言,ecmascript,前端

然后创建之后根据终端输出提示，执行命令

cd yourproject这个命令用于切换到当前目录下的 datagenerate 文件夹

npm install 安装项目中 package.json 文件里列出的所有依赖。

npm run dev这个命令用于执行 package.json 文件中 scripts 部分定义的 dev 脚本。通常情况下，dev 脚本用于启动项目的开发服务器，这样你就可以在本地浏览器中查看和测试你的应用了。

运行后，打开网页就是如此界面

JavaScript-Vue入门,javascript,vue.js,开发语言,ecmascript,前端

当然可以直接通过命令创建

要创建一个新的 Vue 项目，首先需要安装 Vue CLI（命令行界面）。确保你已经安装了 Node.js 和 npm，然后在命令行中运行以下命令：

npm install -g @vue/cli

安装完成后，可以使用以下命令创建一个新的 Vue 项目：

vue create my-project

按照提示选择所需的配置选项，如 Babel、TypeScript、CSS 预处理器等。创建完成后，进入项目目录并启动开发服务器：

cd my-project npm run serve

现在，你可以在浏览器中访问 http://localhost:8080 查看你的 Vue 应用程序。

Vue 项目结构

一个典型的 Vue 项目结构如下：

my-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

node_modules/: 存储项目的依赖包。
public/: 存放公共文件，如 index.html 和 favicon.ico。
src/: 存放项目的源代码。
- assets/: 存放静态资源，如图片、字体等。
- components/: 存放可复用的 Vue 组件。
- router/: 存放路由配置文件。
- store/: 存放 Vuex 状态管理文件。
- views/: 存放页面级组件。
- App.vue: 根组件。
- main.js: 应用程序的入口文件。
.gitignore: 指定需要 Git 忽略的文件和目录。
babel.config.js: Babel 配置文件。
package.json: 项目的元数据和依赖项配置文件。
README.md: 项目的说明文档。

Vue基础

Vue实例：Vue应用的根本是一个Vue实例。通过创建一个Vue实例来启动应用。

// 创建一个Vue实例
const app = new Vue({
  el: '#app', // 挂载点，指定Vue实例管理的DOM元素
  data: {
    message: 'Hello, Vue!' // 定义数据
  }
});

Vue 模板语法

Vue 使用基于 HTML 的模板语法，允许你声明式地将数据渲染到 DOM 中。Vue 模板语法包括插值、指令和特殊特性。

插值

可以使用双大括号（{{}}）在模板中插入数据：

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

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

指令

指令是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。常用的指令包括：

v-if：根据表达式的真假值来有条件地渲染元素。
v-for：基于数组或对象渲染一个列表。
v-bind：动态绑定一个或多个属性，或一个组件 prop 到表达式。
v-on：绑定事件监听器。
v-model：在表单控件或者组件上创建双向绑定。

示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <child-component ref="child"></child-component>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ChildComponent,
    ComponentA,
    ComponentB
  },
  data() {
    return {
      items: [
        { id: 1, text: '项目 1' },
        { id: 2, text: '项目 2' },
        { id: 3, text: '项目 3' }
      ],
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    accessChild() {
      console.log(this.$refs.child)
    }
  }
}
</script>

特殊特性

Vue 提供了一些特殊的模板特性，如 key、ref、is 等，用于实现特定的功能。

key：用于标识 v-for 循环中的每个节点，以便 Vue 能够跟踪节点的身份，从而重用和重新排序现有元素。
ref：用于在父组件中直接访问子组件或 DOM 元素。
is：用于动态组件或者避免 HTML 解析限制。

示例：

<template>
  <div>
    <h1>{{ $route.name }}</h1>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

路由配置

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页应用。它允许我们将 URL 映射到组件，实现页面的导航和切换。

安装 Vue Router

要在 Vue 项目中使用 Vue Router，首先需要安装它：

npm install vue-router

配置路由

在 src/router/index.js 文件中配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的代码中，我们导入了 VueRouter 并使用 Vue.use() 方法将其注册为 Vue 插件。然后定义了一个 routes 数组，其中每个对象表示一个路由，包含 path、name 和 component 属性。最后，创建了一个 VueRouter 实例，并将 routes 传递给它。

使用路由

在 src/App.vue 文件中使用 <router-view> 组件来渲染匹配的路由组件：

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

使用 <router-link> 组件创建导航链接，当点击链接时，Vue Router 会自动更新 URL 并渲染对应的组件。

在组件中，可以使用 this.$router 访问路由器实例，使用 this.$route 访问当前路由对象。

示例：

<template>
  <div>
    <h1>{{ $route.name }}</h1>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把"接触"过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

const data = { count: 0 };

const vm = new Vue({
  data
});

console.log(vm.count); // 0

vm.count = 1;
console.log(data.count); // 1

组件通信

Props：Props 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。

// 子组件
Vue.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
});

// 父组件
new Vue({
  el: '#app',
  template: '<child message="Hello from parent!"></child>'
});

自定义事件：父组件可以通过 v-on 监听子组件触发的自定义事件，子组件可以通过 $emit 触发自定义事件。

// 子组件
Vue.component('child', {
  template: '<button v-on:click="$emit(\'my-event\')">触发事件</button>'
});

// 父组件
new Vue({
  el: '#app',
  template: '<child v-on:my-event="handleEvent"></child>',
  methods: {
    handleEvent() {
      console.log('事件触发');
    }
  }
});

插槽（Slot）：插槽允许你像这样合成组件：

<navigation-link url="/profile">
  个人资料
</navigation-link>

然后你在 <navigation-link> 的模板中可能会写为：

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

/ 定义状态
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// 在组件中使用状态
new Vue({
  el: '#app',
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    increment() {
      store.commit('increment');
    }
  }
});

生命周期钩子

Vue 实例在创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户在不同阶段添加自己的代码的机会。

常用的生命周期钩子包括：

created：在实例创建完成后被立即调用。
mounted：实例被挂载后调用。
updated：当实例更新完毕之后调用。
destroyed：实例销毁后调用。

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log('实例已创建');
  },
  mounted() {
    console.log('实例已挂载');
  },
  updated() {
    console.log('实例已更新');
  },
  destroyed() {
    console.log('实例已销毁');
  }
});

表单处理

v-model 指令可以在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

<div id="app">
  <input v-model="message" placeholder="输入消息">
  <p>输入的消息：{{ message }}</p>
</div>

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

表单验证可以通过自定义指令或插件来实现，例如 VeeValidate。

<div id="app">
  <form>
    <input v-model="email" v-validate="'required|email'" name="email" type="email">
    <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
  </form>
</div>

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

new Vue({
  el: '#app',
  data: {
    email: ''
  }
});

API交互

可以使用 Axios 或 Fetch 等库发起 HTTP 请求与后端 API 进行交互。

使用 Axios 发起请求：

import axios from 'axios';

new Vue({
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/data');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
});

使用 Fetch 发起请求：

new Vue({
  methods: {
    async fetchData() {
      try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }
    }
  }
});

插件与工具

Vue Devtools：Vue Devtools 是一个浏览器扩展，用于调试 Vue.js 应用程序。它允许你检查组件层次结构、查看组件的数据和状态等。
Vue CLI：Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。它提供了一个功能丰富的命令行工具，可以帮助你快速创建和管理 Vue 项目。
```
# 安装 Vue CLI
npm install -g @vue/cli

# 创建一个新项目
vue create my-project

# 启动开发服务器
cd my-project
npm run serve
```

性能优化

使用计算属性：计算属性可以缓存计算结果，避免在模板中进行复杂的逻辑运算。

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

使用 v-if 和 v-show：v-if 会根据条件销毁或重建元素，而 v-show 只是切换元素的 display 属性。对于频繁切换的元素，使用 v-show 可以提高性能。
```
<div v-if="condition">...</div>
<div v-show="condition">...</div>
```
使用异步组件：异步组件可以在需要时才加载组件，减少初始加载时间。
```
Vue.component('async-component', () => import('./AsyncComponent.vue'));
```
使用 keep-alive：keep-alive 可以缓存组件实例，避免重复渲染。文章来源地址https://www.toymoban.com/news/detail-859108.html
```
<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>
```