JavaScript-Vue入门

news2024/11/19 13:34:27

本文主要测分享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

6565a2b48a0c593cbc8d0edbe2591436.png

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

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

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

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

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

892eddd70a74b1c6cabe64fb162b0682.png

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

要创建一个新的 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 可以缓存组件实例，避免重复渲染。

    <keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1624605.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android --- SharedPreferences

Android --- SharedPreferences

SharedPreferences 对应sp文件的接口 使用 SharedPreferences API可以保存的相对较小键值对集合。SharedPreferences 对象指向包含键值对的文件&#xff0c;并提供读写这些键值对的简单方法。每个 SharedPreferences 文件均由框架进行管理&#xff0c;可以是私有文件&#xff…
阅读更多...
李沐66_使用注意力机制的seq2seq——自学笔记

李沐66_使用注意力机制的seq2seq——自学笔记

加入注意力 1.编码器对每次词的输出作为key和value 2.解码器RNN对上一个词的输出是query 3.注意力的输出和下一个词的词嵌入合并进入RNN 一个带有Bahdanau注意力的循环神经网络编码器-解码器模型 总结 1.seq2seq通过隐状态在编码器和解码器中传递信息 2.注意力机制可以根…
阅读更多...
stable diffusion 的controlNet 安装和使用

stable diffusion 的controlNet 安装和使用

stable diffusion 安装controlNet需要先下载扩展 扩展地址 下载了扩展以后&#xff0c;需要下载相应的模型&#xff0c;每个模型大约1.45G,可以按需下载。 模型地址 如果下载速度太慢&#xff0c;可以考虑去liblib下载&#xff0c;但是是全量模型 liblib 模型下载完后&#…
阅读更多...
使用windows端MySQL创建数据库

使用windows端MySQL创建数据库

1.命令行登录数据库 命令&#xff1a;mysql -u用户名 -p密码&#xff1b; 切记命令后面要以分号结尾 2. 查看和创建数据库 查看数据库命令&#xff1a;show database&#xff1b; 创建数据库命令&#xff1a;mysql> create database db_classes; 创建一个名为db_classes的…
阅读更多...
通配符HTTPS安全证书

通配符HTTPS安全证书

众多类型的SSL证书&#xff0c;要说适用或者说省钱肯定是通配符了&#xff0c;因为谁都想一本SSL证书包括了整条域名&#xff0c;而且也不用一条一条单独管理。 通配符HTTPS安全证书&#xff0c;其实就是通配符SSL证书&#xff0c;SSL证书主流CA的参数都一样&#xff0c;通配符…
阅读更多...
使用riscv-tests进行指令测试（二）

使用riscv-tests进行指令测试（二）

使用riscv-tests进行指令测试&#xff08;二&#xff09; 1 测试用例命名规则2 测试用例dump文件介绍 本文属于《 TinyEMU模拟器基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 测试用例命名规则 用例名称 TVM Name “-” Target Environment Name “-” “指令”…
阅读更多...
【论文浅尝】Phi-3-mini：A Highly Capable Language Model Locally on Your Phone

【论文浅尝】Phi-3-mini：A Highly Capable Language Model Locally on Your Phone

Phi-3-mini phi-3-mini&#xff0c;一个3.8亿个参数的语言模型&#xff0c;训练了3.3万亿个token&#xff0c;其总体性能&#xff0c;通过学术基准和内部测试进行衡量&#xff0c;可以与Mixtral 8x7B和GPT-3.5等模型相媲美(在MMLU上达到69%&#xff0c;在MT-bench上达到8.38)&…
阅读更多...
python_django农产品物流信息服务系统6m344

python_django农产品物流信息服务系统6m344

Python 中存在众多的 Web 开发框架&#xff1a;Flask、Django、Tornado、Webpy、Web2py、Bottle、Pyramid、Zope2 等。近几年较为流行的&#xff0c;大概也就是 Flask 和 Django 了 Flask 是一个轻量级的 Web 框架&#xff0c;使用 Python 语言编写&#xff0c;较其他同类型框…
阅读更多...
13 如何利用缓存实现万级并发扣减

13 如何利用缓存实现万级并发扣减

在上一讲的实现方案里我们讨论了采用纯数据库的扣减实现方案&#xff0c;如果以常规的机器或者 Docker 来进行评估&#xff0c;此方案较难实现单机过万的 TPS。之所以介绍&#xff0c;是想告诉你&#xff0c;架构是面向业务功能、成本、实现难度、时间等因素的取舍&#xff0c;…
阅读更多...
广工电工与电子技术实验报告-8路彩灯循环控制电路

广工电工与电子技术实验报告-8路彩灯循环控制电路

实验代码 module LED_water (clk,led); input clk; output [7:0] led; reg [7:0] led; integer p; reg clk_1Hz; reg [7:0] current_state, next_state; always (posedge clk) begin if(p25000000-1)begin …
阅读更多...
对2023年图灵奖揭晓看法

对2023年图灵奖揭晓看法

2023年图灵奖揭晓&#xff0c;你怎么看&#xff1f; 2023年图灵奖&#xff0c;最近刚刚颁给普林斯顿数学教授 Avi Wigderson&#xff01;作为理论计算机科学领域的领军人物&#xff0c;他对于理解计算中的随机性和伪随机性的作用&#xff0c;作出了开创性贡献。这些贡献不仅推…
阅读更多...
C++修炼之路之多态---多态的原理(虚函数表)

C++修炼之路之多态---多态的原理(虚函数表)

目录 一&#xff1a;多态的原理 1.虚函数表 2.原理分析 3.对于虚表存在哪里的探讨 4.对于是不是所有的虚函数都要存进虚函数表的探讨 二&#xff1a;多继承中的虚函数表 三&#xff1a;常见的问答题 接下来的日子会顺顺利利&#xff0c;万事胜意&#xff0c;生活明朗--…
阅读更多...
PPSSPPSDL for Mac v1.17.1 PSP游戏模拟器(附500款游戏) 激活版

PPSSPPSDL for Mac v1.17.1 PSP游戏模拟器(附500款游戏) 激活版

PPSSPPSDL for Mac是一款模拟器软件&#xff0c;它允许用户在Mac上运行PSP&#xff08;PlayStation Portable&#xff09;游戏。通过这款模拟器&#xff0c;用户可以体验到高清甚至更高的分辨率的游戏画面&#xff0c;同时还能够升级纹理以提升清晰度&#xff0c;并启用后处理着…
阅读更多...
安卓手机连接电脑实用技巧：实现文件传输与共享

安卓手机连接电脑实用技巧：实现文件传输与共享

在手机使用过程中&#xff0c;我们常常需要将手机中的文件传输到电脑&#xff0c;或者将手机与电脑进行共享。为了实现这一需求&#xff0c;掌握一些实用的安卓手机连接电脑技巧就显得尤为重要。本文将为您详细介绍2种简单、高效且安全的方法&#xff0c;让您轻松实现安卓手机与…
阅读更多...
【网络安全】安全事件管理处置 — 事件分级分类

【网络安全】安全事件管理处置 — 事件分级分类

专栏文章索引&#xff1a;网络安全 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、安全事件分级 二、应急事件分级 三、安全事件分类 四、常见安全事件原因分析 1.web入侵 2.漏洞攻击 3.网络攻击 一、安全事件分级 在对安全事件的应急响应过程中&#xf…
阅读更多...
如何最大程度使用AWS？

如何最大程度使用AWS？

随着云计算技术的不断发展&#xff0c;AWS已经成为众多企业的首选&#xff0c;为其提供了强大的基础设施和服务。那么如何最大程度地、灵活地利用AWS&#xff0c;成为许多企业专注的焦点。九河云作为AWS的合作伙伴&#xff0c;为读者们提供一些技巧和策略&#xff0c;帮助读者充…
阅读更多...
物联网鸿蒙实训解决方案

物联网鸿蒙实训解决方案

一、建设背景 在数字化浪潮汹涌的时代&#xff0c;华为鸿蒙系统以其前瞻的技术视野和创新的开发理念&#xff0c;成为了引领行业发展的风向标。 据华为开发者大会2023&#xff08;HDC. Together&#xff09;公布的数据&#xff0c;鸿蒙生态系统展现出了强劲的发展动力&#x…
阅读更多...
Qt ： 禁用控件默认的鼠标滚轮事件

Qt ： 禁用控件默认的鼠标滚轮事件

最近在写一个模拟器&#xff0c;在item中添加了很多的控件&#xff0c;这些控件默认是支持鼠标滚动事件的。在数据量特别大的时候&#xff0c;及容易不小心就把数据给修改了而不自知。所有&#xff0c;我们这里需要禁用掉这些控件的鼠标滚轮事件。 实现的思想很简单&#xff0c…
阅读更多...
[Swift]组件化开发

[Swift]组件化开发

一、组件化开发基础 1.组件定义 在软件开发中&#xff0c;一个组件是指一个独立的、可替换的软件单元&#xff0c;它封装了一组相关的功能。组件通过定义的接口与外界交互&#xff0c;并且这些接口隔离了组件内部的实现细节。在Swift语言中&#xff0c;组件可以是一个模块、一…
阅读更多...
新品发布！无人机装调检修实训系统

新品发布！无人机装调检修实训系统

近年&#xff0c;我国密集出台相关产业政策&#xff0c;推动低空经济从探索走向发展&#xff0c;根据新华网数据&#xff0c;2030年低空经济规模有望达2万亿。无人机专业属于跨学科的综合性专业&#xff0c;其中装调检测技术是无人机教培的重要组成部分。 天途推出无人机装调检…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023