Vue 2看这篇就够了

Vue 2 技术文档

Vue.js 是一款用于构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。而 Vue.js 2(以下简称 Vue 2)则是该框架的一个重要版本,提供了许多新的特性和改进。本文将详细介绍 Vue 2 的各项功能及其使用方法。

目录

  • Vue 2 技术文档
    • 1. Vue 2 的安装和基本使用
      • 安装 Vue 2
      • 创建 Vue 实例
    • 2. 模板语法
      • 插值
      • 指令
      • 计算属性
    • 3. Vue 实例
      • 实例属性与方法
      • 生命周期钩子
    • 4. 组件
      • 定义与注册组件
      • 组件通信
        • 父子组件通信
    • 5. 路由
      • 安装 Vue Router
      • 配置路由
      • 动态路由匹配
    • 6. 状态管理
      • 安装 Vuex
      • Vuex 基本使用
      • 模块化
    • 7. 过渡与动画
      • 过渡类名
      • 动画
    • 8. HTTP 请求
      • 使用 axios
      • 在 Vue 组件中使用 HTTP 请求
    • 9. 表单处理
      • 基本表单处理
      • 表单修饰符
    • 10. 插件
      • 使用插件
      • 创建插件
    • 11. 实践
      • 代码结构
      • 性能优化

1. Vue 2 的安装和基本使用

安装 Vue 2

Vue 2 提供了多种安装方式:

  1. 通过 CDN 引入:

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    
  2. 使用 npm 安装:

    npm install vue@2
    
  3. 使用 Vue CLI 创建项目:

    npm install -g @vue/cli
    vue create my-project
    cd my-project
    npm run serve
    

创建 Vue 实例

一个简单的 Vue 实例示例:

<!DOCTYPE html>
<html>
<head><title>Vue 2 示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app">{{ message }}</div><script>new Vue({el: '#app',data: {message: 'Hello, Vue 2!'}});</script>
</body>
</html>

在这个示例中,我们创建了一个新的 Vue 实例,并将其挂载到 #app 元素上。data 对象中的 message 属性将显示在页面上。

2. 模板语法

插值

Vue 允许在模板中使用双花括号语法进行数据绑定:

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

也可以在属性中使用:

<div id="app"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span>
</div>

指令

指令(Directives)是带有 v- 前缀的特殊属性:

  • v-bind: 绑定属性
  • v-if: 条件渲染
  • v-for: 列表渲染
  • v-on: 事件监听

示例:

<div id="app"><p v-if="seen">现在你看到我了</p>
</div><script>new Vue({el: '#app',data: {seen: true}});
</script>

计算属性

计算属性是基于依赖进行缓存的属性:

<div id="app">{{ reversedMessage }}
</div><script>new Vue({el: '#app',data: {message: 'Hello'},computed: {reversedMessage: function() {return this.message.split('').reverse().join('')}}});
</script>

在这个示例中,reversedMessage 是一个计算属性,它基于 message 计算出一个反转字符串。

3. Vue 实例

实例属性与方法

Vue 实例有许多属性和方法,如 eldatamethods 等:

<div id="app"><p>{{ message }}</p><button @click="reverseMessage">Reverse Message</button>
</div><script>new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}});
</script>

生命周期钩子

Vue 实例在生命周期内会触发一些钩子函数:

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

4. 组件

定义与注册组件

Vue 组件是可复用的 Vue 实例,通常我们可以通过 Vue.component 方法来全局注册一个组件:

<div id="app"><my-component></my-component>
</div><script>Vue.component('my-component', {template: '<div>A custom component!</div>'});new Vue({el: '#app'});
</script>

也可以通过 components 选项局部注册组件:

<div id="app"><my-component></my-component>
</div><script>var myComponent = {template: '<div>A custom component!</div>'};new Vue({el: '#app',components: {'my-component': myComponent}});
</script>

组件通信

父子组件通信

在这里插入图片描述

父组件通过 props 向子组件传递数据:

<div id="app"><child message="Hello from parent"></child>
</div><script>Vue.component('child', {props: ['message'],template: '<div>{{ message }}</div>'});new Vue({el: '#app'});
</script>

子组件通过 $emit 向父组件发送事件:

<div id="app"><button-counter @increment="incrementTotal"></button-counter><p>总计点击次数: {{ total }}</p>
</div><script>Vue.component('button-counter', {template: '<button @click="incrementCounter">{{ counter }}</button>',data: function () {return {counter: 0}},methods: {incrementCounter: function () {this.counter += 1;this.$emit('increment');}}});new Vue({el: '#app',data: {total: 0},methods: {incrementTotal: function () {this.total += 1;}}});
</script>

5. 路由

Vue Router 是官方的路由管理器,用于构建单页面应用。

安装 Vue Router

npm install vue-router

配置路由

首先创建路由组件:

<div id="app"><router-view></router-view>
</div><script>const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }]const router = new VueRouter({routes})new Vue({el: '#app',router})
</script>

动态路由匹配

你可以在路由路径中使用动态参数:

<div id="app"><router-view></router-view>
</div><script>const User = {template: '<div>User {{ $route.params.id }}</div>'}const routes = [{ path: '/user/:id', component: User }]const router = new VueRouter({routes})newVue({el: '#app',router})
</script>

在这个示例中,/user/:id 路径中的 :id 是一个动态片段,$route.params.id 将会被当前的 id 值替换。

6. 状态管理

Vuex 是一个专为 Vue.js 应用设计的状态管理模式。

安装 Vuex

npm install vuex

Vuex 基本使用

创建一个简单的 Vuex store:

<script>const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}}})new Vue({el: '#app',store,computed: {count() {return this.$store.state.count}},methods: {increment() {this.$store.commit('increment')}}})
</script><div id="app"><p>{{ count }}</p><button @click="increment">Increment</button>
</div>

模块化

当应用变得复杂时,可以将 store 分割成模块:

<script>const moduleA = {state: () => ({ count: 0 }),mutations: {increment(state) {state.count++}}}const store = new Vuex.Store({modules: {a: moduleA}})new Vue({el: '#app',store,computed: {count() {return this.$store.state.a.count}},methods: {increment() {this.$store.commit('a/increment')}}})
</script><div id="app"><p>{{ count }}</p><button @click="increment">Increment</button>
</div>

7. 过渡与动画

Vue 提供了非常易用的过渡效果系统。

过渡类名

可以使用 transition 组件来为元素添加过渡效果:

<div id="app"><button @click="show = !show">Toggle</button><transition name="fade"><p v-if="show">Hello Vue!</p></transition>
</div><script>new Vue({el: '#app',data: {show: true}})
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {opacity: 0;
}
</style>

动画

Vue 也支持使用 CSS 动画和第三方动画库,例如 Animate.css:

<div id="app"><button @click="show = !show">Toggle</button><transitionname="bounce"enter-active-class="animated bounceIn"leave-active-class="animated bounceOut"><p v-if="show">Hello Vue!</p></transition>
</div><script>new Vue({el: '#app',data: {show: true}})
</script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

8. HTTP 请求

在 Vue 项目中,通常使用 axios 来进行 HTTP 请求。

使用 axios

首先安装 axios:

npm install axios

在 Vue 组件中使用 HTTP 请求

在 Vue 组件中使用 axios 进行 HTTP 请求:

<div id="app"><ul><li v-for="post in posts" :key="post.id">{{ post.title }}</li></ul>
</div><script>new Vue({el: '#app',data: {posts: []},created() {axios.get('https://jsonplaceholder.typicode.com/posts').then(response => {this.posts = response.data}).catch(error => {console.log(error)})}})
</script>

在这个示例中,我们在组件创建时发起 HTTP 请求,并将响应的数据绑定到组件的数据属性 posts 上。

9. 表单处理

Vue 2 提供了简单而强大的表单处理功能。

基本表单处理

使用 v-model 指令来创建双向数据绑定:

<div id="app"><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>
</div><script>new Vue({el: '#app',data: {message: ''}})
</script>

表单修饰符

Vue 提供了几个表单修饰符来简化表单处理:

  • .lazy: 取代 input 监听 change 事件。
  • .number: 将用户输入自动转换为数值。
  • .trim: 自动过滤用户输入的首尾空格。

示例:

<div id="app"><input v-model.lazy="message" placeholder="edit me"><input v-model.number="age" type="number" placeholder="age"><input v-model.trim="name" placeholder="name"><p>Message is: {{ message }}</p><p>Age is: {{ age }}</p><p>Name is: {{ name }}</p>
</div><script>new Vue({el: '#app',data: {message: '',age: null,name: ''}})
</script>

10. 插件

Vue.js 的插件系统使得我们可以很方便地扩展 Vue 的功能。

使用插件

使用插件通常需要通过 Vue.use 方法来注册:

<script>Vue.use(SomePlugin)
</script>

例如使用 Vue Router 插件:

<script>import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)
</script>

创建插件

创建一个简单的插件:

MyPlugin.install = function (Vue, options) {Vue.myGlobalMethod = function () {console.log('MyPlugin global method')}Vue.directive('my-directive', {bind(el, binding, vnode, oldVnode) {el.textContent = binding.value}})Vue.prototype.$myMethod = function (methodOptions) {console.log('MyPlugin instance method')}
}Vue.use(MyPlugin)

11. 实践

代码结构

  1. 目录结构:合理的目录结构能提升项目的可维护性。

    • components: 存放 Vue 组件。
    • views: 存放视图组件(页面级)。
    • store: 存放 Vuex 状态管理相关文件。
    • router: 存放路由配置文件。
  2. 组件划分:尽量保持组件的单一职责,一个组件只完成一项任务。

  3. 命名规范:遵循一致的命名规范,如组件命名使用 PascalCase。

性能优化

  1. 按需加载:使用路由懒加载和动态导入来减少初始加载时间。
  2. 长列表性能优化:使用 v-for 渲染大量数据时,使用 v-bind:key
  3. 避免不必要的响应:使用 Object.freeze 冻结数据,避免深层嵌套的数据对象变成响应式。
  4. 使用事件代理:在大量元素上绑定事件时,使用事件代理。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

北航第五次数据结构与程序设计编程题复习

北航第五次数据结构与程序设计编程题复习 树叶节点遍历&#xff08;树-基础题&#xff09;计算器&#xff08;表达式计算-表达式树实现&#xff09;服务优化词频统计&#xff08;树实现&#xff09; 树叶节点遍历&#xff08;树-基础题&#xff09; 【问题描述】 从标准输入中…

React的useState的基础使用

import {useState} from react // 1.调用useState添加状态变量 // count 是新增的状态变量 // setCount 修改状态变量的方法 // 2.添加点击事件回调 // userState实现计数实例import {useState} from react// 使用组件 function App() {// 1.调用useState添加状态变量// coun…

Qt——升级系列(Level Four):控件概述、QWidget 核心属性、按钮类控件

目录 控件概述 QWidget 核心属性 核心属性概览 enabled geometry windowTitle windowIcon windowOpacity cursor font toolTip focusPolicy styleSheet 按钮类控件 Push Button Radio Buttion Check Box Tool Button 控件概述 Widget 是 Qt 中的核⼼概念. 英⽂原义是 "…

运维一个宝塔面板的php项目的艰辛历程【解决了http3,ssl,quic】

在这个项目的环境 使用了宝塔面板 有4个php:php5.6,php7.3,php7.4,php8.0 nignx为1.20版本 升级计划&#xff1a; 升级nginx1.26.0版本&#xff0c;添加上http3协议&#xff0c;添加ssl证书 遇到的问题&#xff1a; 升级nginx1.26版本后 无法打开php5.6的后台 原因&#xff…

PromptPort:为大模型定制的创意AI提示词工具库

PromptPort&#xff1a;为大模型定制的创意AI提示词工具库 随着人工智能技术的飞速发展&#xff0c;大模型在各行各业的应用越来越广泛。而在与大模型交互的过程中&#xff0c;如何提供精准、有效的提示词成为了关键。今天&#xff0c;就为大家介绍一款专为大模型定制的创意AI…

Llama模型家族之Stanford NLP ReFT源代码探索 (二)Intervention Layers层

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

QT error: allocation of incomplete type ‘Ui::Server‘

目录 前言 报错内容&#xff1a; 过程解析&#xff1a; 原因分析&#xff1a; daisy.skye的博客 QT合集http://t.csdnimg.cn/wEVbu 前言 最近又开始需要做上位机了&#xff0c;要知道qt上位机对我来说已经3年没有接触了&#xff0c;最开始接触还是毕业时工作中的简单学习和…

数据结构 -- 树状数组

前言 树状数组或二叉索引树&#xff08;Binary Indexed Tree&#xff09;&#xff0c;又以其发明者命名为 Fenwick 树。其初衷是解决数据压缩里的累积频率的计算问题&#xff0c;现多用于高效计算数列的前缀和、区间和。它可以以 O(logn) 的时间得到任意前缀和。并同时支持在 …

计算机毕业设计python+spark知识图谱音乐推荐系统 音乐数据分析可视化大屏 音乐爬虫 LSTM情感分析 大数据毕设 深度学习 机器学习

流程&#xff1a; 1.Python采集网易云音乐歌手、歌词、音乐、评论等约10-20万海量数据&#xff0c;存入mysql数据库&#xff1b; 2.使用pandasnumpy/MapReduce对mysql中四类数据进行数据清洗&#xff0c;写入.csv文件并上传至hdfs(含评论NLP文本分类/lsm情感分析); 3.使用hive建…

关于科技的总结与思考

文章目录 互联网时代有趣的数字数据驱动大数据的两个特性数据保护互联网免费模式的再探讨平台互联网的意义人工智能伦理的思考语言理性人梅特卡夫定律冲浪的神奇之处AR的恐怖之处叙词表、受控词表和大众分类法六度/十九度的解读知识图谱是真正的仿生智能幂次法则和优先连接现代…

MyBatis插件机制

MyBatis插件机制是该框架提供的一种灵活扩展方式&#xff0c;允许开发者在不修改框架源代码的情况下对MyBatis的功能进行定制和增强。这种机制主要通过拦截器&#xff08;Interceptor&#xff09;实现&#xff0c;使得开发者可以拦截和修改MyBatis在执行SQL语句过程中的行为。 …

【AI大模型】Transformers大模型库(五):AutoModel、Model Head及查看模型结构

目录​​​​​​​ 一、引言 二、自动模型类&#xff08;AutoModel&#xff09; 2.1 概述 2.2 Model Head&#xff08;模型头&#xff09; 2.3 代码示例 三、总结 一、引言 这里的Transformers指的是huggingface开发的大模型库&#xff0c;为huggingface上数以万计的预…

ChatGPT Prompt技术全攻略-总结篇:Prompt工程技术的未来发展

系列篇章&#x1f4a5; No.文章1ChatGPT Prompt技术全攻略-入门篇&#xff1a;AI提示工程基础2ChatGPT Prompt技术全攻略-进阶篇&#xff1a;深入Prompt工程技术3ChatGPT Prompt技术全攻略-高级篇&#xff1a;掌握高级Prompt工程技术4ChatGPT Prompt技术全攻略-应用篇&#xf…

DNS协议 | NAT技术 | 代理服务器

目录 一、DNS协议 1、DNS背景 2、DNS协议 域名 域名解析 二、NAT技术 1、NAT技术 2、NAPT技术 3、NAT技术的缺陷 三、代理服务器 1、正向代理服务器 2、反向代理服务器 一、DNS协议 域名系统&#xff08;Domain Name System&#xff0c;缩写&#xff1a;DNS&#…

20240605解决飞凌的OK3588-C的核心板刷机原厂buildroot不能连接ADB的问题

20240605解决飞凌的OK3588-C的核心板刷机原厂buildroot不能连接ADB的问题 2024/6/5 13:53 rootrootrootroot-ThinkBook-16-G5-IRH:~/repo_RK3588_Buildroot20240508$ ./build.sh --help rootrootrootroot-ThinkBook-16-G5-IRH:~/repo_RK3588_Buildroot20240508$ ./build.sh lun…

【学术小白成长之路】02三方演化博弈(基于复制动态方程)期望与复制动态方程

从本专栏开始&#xff0c;笔者正式研究演化博弈分析&#xff0c;其中涉及到双方演化博弈分析&#xff0c;三方演化博弈分析&#xff0c;复杂网络博弈分析等等。 先阅读了大量相关的博弈分析的文献&#xff0c;总结了现有的研究常用的研究流程&#xff0c;针对每个流程进行拆解。…

快速搭建rtsp server(Ubuntu)

在现代视频监控和实时视频流媒体应用中&#xff0c;实时流协议&#xff08;RTSP&#xff09;服务器扮演着至关重要的角色。无论是家庭安防系统、企业级监控还是流媒体服务&#xff0c;RTSP服务器都能提供高效、稳定的解决方案。然而&#xff0c;对于许多初学者或开发者来说&…

数学建模笔记

数学建模 定义角度 数学模型是针对参照某种事物系统的特征或数量依存关系&#xff0c;采用数学语言&#xff0c;概括地或近似地表述出的一种数学结构&#xff0c;这种数学结构是借助于数学符号刻画出来的某种系统的纯关系结构。从广义理解&#xff0c;数学模型包括数学中的各…

高考分数查询结果自动推送至微信(卷II)

祝各位端午节安康&#xff01;只要心中无结&#xff0c;每天都是节&#xff0c;开心最重要&#xff01; 在上一篇文章高考分数查询结果自动推送至微信&#xff08;卷Ⅰ&#xff09;-CSDN博客中谈了思路&#xff0c;今天具体实现。文中将敏感信息已做处理&#xff0c;读者根据自…

【大学物理】波动光学:光的衍射

23.2 单缝的夫琅禾费衍射_哔哩哔哩_bilibili 1 光的衍射和惠更斯-菲涅尔原理 干涉vs衍射&#xff1a;干涉研究的是两个分立的子光源&#xff0c;衍射研究的是连续的子光源。 两位科学家用分解的思想&#xff0c;一个解决了方向一个解决了光强。 2 单缝的夫琅禾费衍射 夫琅禾…