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.mzph.cn/web/25503.shtml

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

相关文章

Vue2基础:.sync修饰符的使用,认识,作用,本质案例演示,实现父子之间的通信。

.sync的作用&#xff1a; 可以实现子组件与父组件数据的双向绑定&#xff0c;简化代码。 与v-model的不同点,prop属性名可以自定义&#xff0c;不要一定要用value. .sync的本质&#xff1a; 就是&#xff1a;属性名和update&#xff1a;属性名合写。 下面我们进行代码演示…

探索智慧景区票务系统的架构与应用

随着旅游业的迅速发展&#xff0c;智慧景区票务系统已经成为提升景区管理效率、优化游客体验的重要工具。智慧景区票务系统的架构设计与应用&#xff0c;将现代信息技术与景区管理相结合&#xff0c;为景区的门票销售、入园管理和游客服务提供了全新的解决方案。本文将深入探讨…

每天一个数据分析题(三百五十六)-图表决策树

图表决策树中将图表分成四类&#xff0c;分别是&#xff1f; A. 比较类 B. 序列类 C. 构成类 D. 描述类 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案

【西瓜书】9.聚类

聚类任务是无监督学习的一种用于分类等其他任务的前驱过程&#xff0c;作为数据清洗&#xff0c;基于聚类结果训练分类模型 1.聚类性能度量&#xff08;有效性指标&#xff09; 分类任务的性能度量有错误率、精度、准确率P、召回率R、F1度量(P-R的调和平均)、TPR、FPR、AUC回归…

滑动窗口算法:巧妙玩转数据的窗外世界

✨✨✨学习的道路很枯燥&#xff0c;希望我们能并肩走下来! 文章目录 目录 文章目录 前言 一 滑动窗口是什么&#xff1f; 二 相关题目解析 1. 长度最小的子数组 &#x1f973;题目解析 &#x1f973;算法原理 ✏️思路1 暴力枚举出所有子数组之和 ✏️思路2 滑动窗…

docker-compose部署mysql+nginx+redis

docker部署 参考&#xff1a; docker部署mysqlnginxredis docker-compose部署mysqlnginxredis mysql 1、创建docker-compose-mysql.yml version: "3" services:mysql:image: mysql:5.7restart: alwayscontainer_name: mysqlports:- 3306:3306volumes:- /home/my…

LangChain开发【NL2SQL】应用

前言 关于LangGraph的简单介绍&#xff0c;请参考这篇博客&#xff1a; LangGraph开发Agent智能体应用【基础聊天机器人】-CSDN博客 对比LangChain实现NL2SQL 关于用LangChain开发NL2SQL的Agent应用&#xff0c;在这篇博客提供了完整的代码实现&#xff1a; LangChain开发…

AI网络爬虫:批量爬取豆瓣图书搜索结果

工作任务&#xff1a;爬取豆瓣图书搜索结果页面的全部图书信息 在ChatGPT中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个爬虫Python脚本编写的任务&#xff0c;具体步骤如下&#xff1a; 用 fake-useragent库设置随机的请求头&#xff1b; 设置chr…

深拷贝浅拷贝解析,从原理理解深拷贝

这块应该都有过比较深刻的了解了。今天加深下印象和查漏补缺下。 浅拷贝&#xff1a; let original { a: 1, b: { c: 2 } };//这边定一个obj&#xff0c;来供拷贝 let shallowCopy Object.assign({}, original);// let shallowCopy { ...original }; 创建一个浅拷贝对象拷贝…

NFT 智能合约实战-快速开始(1)NFT发展历史 | NFT合约标准(ERC-721、ERC-1155和ERC-998)介绍

文章目录 NFT 智能合约实战-快速开始(1)NFT发展历史国内NFT市场国内NFT合规性如何获得NFT?如何查询NFT信息?在 OpenSea 上查看我们的 NFT什么是ERC721NFT合约标准ERC-721、ERC-1155和ERC-998 对比ERC721IERC721.sol 接口内容关于合约需要接收 ERC721 资产 onERC721Received…

Nginx面试题精选及参考答案(3万字长文)

目录 什么是Nginx,它主要用于哪些场景? Nginx和Apache有什么区别? 描述一下Nginx的事件驱动模型。 Nginx如何处理静态文件和动态请求? 什么是反向代理,Nginx如何实现反向代理? 如何在Linux系统中安装Nginx? Nginx的主要配置文件有哪些? 如何修改Nginx的配置以实…

软考初级网络管理员_01_计算机系统基础知识(硬件)单选题

1.在字长为16位、32位、62位或128位的计算机中&#xff0c;字长为()位的计算机数据运算精度最高。 16 32 64 128 2.8位、16位、32位和64位字长的计算机中&#xff0c;()位字长计算机的数据运算精度最高。 9 8 16 64 3.声卡的性能指标主要包括-和采样位数:在采样位数分…

如何随机化列表中的元素?

一、技术难点 在Python中&#xff0c;随机化列表中的元素通常指的是对列表进行洗牌&#xff08;shuffle&#xff09;操作&#xff0c;即在不改变列表中元素数量的前提下&#xff0c;随机改变元素的顺序。这个过程看似简单&#xff0c;但在实际实现中需要考虑一些技术细节和难点…

插入排序(Insertion_sort)

最简单的一种排序 基本思想就是从第一个元素开始&#xff0c;每次排列一个元素&#xff0c;一直排列到结尾 例如&#xff1a; 3 1 4 5 7 2 6 第一个元素不用排序&#xff0c;从第二个开始 因为3 > 1所以直接将3覆盖到1上 3 3 4 5 7 2 6 而1用一个变量先…

【CMake】install用法

以前一直不清楚install的具体作用&#xff0c;现在明白了&#xff0c;其实就是把你的文件&#xff08;生成的二进制&#xff0c;源代码或者任意&#xff09;给复制&#xff08;也可以说安装&#xff09;到指定路径。 将二进制安装到Bin文件夹 比如我生成了一个test程序&#…

【教学类-64-02】20240610色块眼力挑战(二)-2-25宫格色差10-100(10倍)(星火讯飞)

背景需求 以下的色块眼里挑战需要人工筛选图片&#xff0c;非常繁琐。 【教学类-64-01】20240607色块眼力挑战&#xff08;一&#xff09;-0-255随机底色-CSDN博客文章浏览阅读446次&#xff0c;点赞12次&#xff0c;收藏5次。【教学类-64-01】20240607色块眼力挑战&#xff…

Linux安装Docker | 使用国内镜像

环境 CentOS7 先确认能够上网 curl www.baidu.com返回该输出说明网络OK 步骤一&#xff1a;安装gcc 和 gcc-c yum -y install gccyum -y install gcc-c步骤二&#xff1a;安装Docker仓库 yum install -y yum-utils接下来配置yum的国内镜像 yum-config-manager --add-re…

tomcat服务器之maxHttpHeaderSize

背景&#xff1a;在OA流程表单中&#xff0c;填写了200条数据&#xff0c;一提交&#xff0c;秒报400错误&#xff0c;且请求没有打到后端中&#xff08;无报错日志&#xff09;&#xff0c;一开始以为是谷歌浏览器的问题&#xff0c;可百度上关于这个错误的解决方案都是清除缓…

转让北京劳务分包地基基础施工资质条件和流程

地基基础资质转让流程是怎样的?对于企业来说&#xff0c;资质证书不仅是实力的证明&#xff0c;更是获得工程承包的前提。而在有了资质证书后&#xff0c;企业才可以安心的准备工程投标&#xff0c;进而在工程竣工后获得收益。而对于从事地基基础工程施工的企业&#xff0c;需…

5、Spring之Bean生命周期~创建Bean(1)

5、Spring之Bean生命周期~创建Bean 创建BeanresolveBeanClass()方法doResolveBeanClass()方法 resolveBeforeInstantiation()方法 创建Bean Spring Bean的生命周期首先会经过扫描&#xff0c;然后回经过合并&#xff0c;合并之后就会通过getBean()方法去获取bean&#xff0c;ge…