当前位置： 首页 > news >正文

【阅读文档】Vue.js 2.0 之教程文档

news 2026/1/12 9:16:55

系列文章目录

提示：阅读本章之前，请先阅读目录

文章目录

  • 系列文章目录
  • 前言
  • 兼容性
  • Devtools
  • 开发版和生产版
  • 安装
  • Vue-cli
  • 编译器
  • Vue.js 是什么
  • 最基本的Vue
  • v-bind 指令
  • split 和 reverse 搭配
  • v-model 双向绑定
  • vue-component 定义组件
  • v-bind
  • Object.freeze
  • 箭头函数
  • v-once
  • [] 方括号的attribute
  • SPA 单页面应用
  • v-on
  • v-if 的 key
  • v-show
  • v-for和v-if
  • $event
  • v-model 修饰符

前言

兼容性

不支持IE8及以下的版本

Devtools

想要更便捷的开发vue，学会按照Devtools

开发版和生产版

开发版的，包含了，警告，错误和调试

生产版，剔除了警告，错误，调试

安装

npm install vue

Vue-cli

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本

Vue官方的一个CLI，快速搭建单页面应用的脚手架，只需要几分钟，就可以运行起来，并且带有热重载，lint代码校验，以及生产环境，即可用的构建版本

编译器

只有完整版，才能使用template编译器

因为vue-cli，默认用的版本是vue.runtime.js，他是不支持template模板编译的

所以，会有两种写法

template编译器

new Vue({template: "<div>我需要一个完整的vue，即引入: vue.js</div>"
})

不需要编译器

new Vue({render: h => h("#app", APP)
})

Vue.js 是什么

Vue是一套渐进式框架，它是被设计为自底向上逐层的应用，它只关注视图层，同时也是单页面应用

最基本的Vue

<body><div id="app">Hello world</div>
</body>const vm = new Vue({el: "#root",data() {return {name: "Hello"}}
})

v-bind 指令

Vue提供的特殊attribute（属性）

split 和 reverse 搭配

let name = "Hello Smobee, How old are you ?"
// 分割每个字符，形成数组
const arr1 = name.split("")
// 将数组反转
const arr2 = arr1.reverse()
// 将数组每个字符拼接
const newName = arr2.join("")

v-model 双向绑定

<input v-model="name">new Vue({el: "#root",data() {return {name: "Smobee"}}
})

vue-component 定义组件

Vue.component("SchoolView", {template: `<div>Hello</div>`
})

v-bind

完整写法

<input v-bind:value="name"/>

简写是

<input :value="name"/>

Object.freeze

var obj = {name: "smobee"
}
Object.freeze(obj)new Vue({el: "#root",data() {return {obj}}
})// 这里的obj，不再是响应式了，因为Object.freeze会阻止vue的跟踪

箭头函数

不要在vue实例的property使用箭头函数

created: () => {// 取不到console.log(this.name)
}

不要在回调函数，使用箭头函数

vm.$watch("a", (newValue) => {// 取不到this.name = newValue
})

v-once

只会读取一次，后面不会更新

<span v-once>{{ name }}</span>

[] 方括号的attribute

vue 2.6只会，支持方括号，进行动态javascript// 最后这里会变成 :id="xxxx"
<div :[attrName]="xxxxxx">data() {return {attrName: "id"}
}

SPA 单页面应用

Single page application

v-on

完整

<div v-on:click="onClick"></div>

简写

<div @click="onClick"></div>

v-if 的 key

这里没有用key，input框被会复用，placeholder会被更新

<div v-if="state"><input placeholder="Hello i am a input"/>
</div>
<div v-else><input placeholder="Hello i am b input . xixi"/>
</div>

这里用的key，input框，则不会被复用，每次都会重新渲染

<div v-if="state"><input placeholder="Hello i am a input" key="aInput"/>
</div>
<div v-else><input placeholder="Hello i am b input . xixi" key="bInput"/>
</div>

v-show

只是切换元素的css样式，display:none

并且无法用于template

v-for和v-if

v-for的优先级更高

如果是搭配使用

那么就可以实现，每个循环输出的元素，进行一次v-if的判断

<div v-for="(item, index) in arr" v-if="item">
</div>

$event

// 这样可以传递原生事件
<div @click="onClick(item, $event)"></div>

v-model 修饰符

// 输入后的自动转为数值类型
<input v-model.number="age">

// 输入后的自动去除首尾空格
<input v-model.trim="name">

相关文章：

【阅读文档】Vue.js 2.0 之教程文档

系列文章目录 提示&#xff1a;阅读本章之前&#xff0c;请先阅读目录 文章目录系列文章目录前言兼容性Devtools开发版和生产版安装Vue-cli编译器Vue.js 是什么最基本的Vuev-bind 指令split 和 reverse 搭配v-model 双向绑定vue-component 定义组件v-bindObject.freeze箭头函数…...

编程日记 2023/5/12 3:03:41

Docker【基本使用】

1&#xff1a;启动Docker1.1&#xff1a;操作systemctl start docker.service1.2&#xff1a;常见问题【第一步】启动docker&#xff0c;提示启动失败&#xff0c;查询运行状态systemctl start docker.service【第二步】查询docker运行状态&#xff0c;提示不支持SELinux【第三…...

编程日记 2023/5/12 3:03:38

算法leetcode｜39. 组合总和（rust重拳出击）

文章目录39. 组合总和&#xff1a;样例 1&#xff1a;样例 2&#xff1a;样例 3&#xff1a;提示&#xff1a;分析&#xff1a;题解&#xff1a;rustgoccpythonjava39. 组合总和&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找…...

编程日记 2023/5/12 3:03:30

JavaSE学习笔记总结day18

今日内容 零、 复习昨日 一、作业 二、进程与线程 三、创建线程 四、线程的API 五、线程状态 六、线程同步 零、 复习昨日 晨考 一、作业 见答案 二、进程与线程[了解] 一个进程就是一个应用程序,进程包含线程 一个进程至少包含一个线程,大部分都是有多条线程在执行任务(多线…...

编程日记 2023/5/14 5:15:22

HybridFusion: LiDAR和视觉交叉源点云融合

一、基本信息 研究方向&#xff1a; 大场景点云配准 HybridFusion: 它可以在户外大型场景中从不同视角记录交叉源密集点云。 团队链接&#xff1a;http://www.adv-ci.com 视频链接&#xff1a; https://www.bilibili.com/video/BV1vM41147yD/?spm_id_from333.337.sear…...

编程日记 2023/5/14 5:15:20

走进JVM

JVM的位置 在操作系统之上&#xff0c;可以想象成一个软件&#xff0c;Java程序都运行在上面 JVM结构图 JVM调优的位置 99%的调优在堆中&#xff0c;极少数在方法区中 很多第三方插件都是在执行引擎那块地方做出修改而来&#xff0c;比如Lombook在程序运行时动态生成get/s…...

编程日记 2023/5/14 5:15:18

C语言-基础了解-15-C函数指针与回调函数

C函数指针与回调函数 一、函数指针 函数指针是指向函数的指针变量。 通常我们说的指针变量是指向一个整型、字符型或数组等变量&#xff0c;而函数指针是指向函数。 函数指针可以像一般函数一样&#xff0c;用于调用函数、传递参数。 函数指针变量的声明&#xff1a; type…...

编程日记 2023/5/14 5:15:16

react和vue在响应式上的不同理解

vue和react的区别总是被提及&#xff0c;关于这个问题最近也有了自己的想法。我认为它们之间最大的区别是对于响应数据变化的实现方式不同。 vue实现响应的方法是&#xff0c;首先收集依赖这个数据的副作用&#xff08;视图更新、计算属性等&#xff09;&#xff0c;当数据修改…...

编程日记 2023/5/14 5:15:13

多线程二 多线程了解与使用

文章目录synchronized 锁有两种synchronized异常捕获主线程和子线程volatile的作用notify是随机启动等待线程中的一个synchronized 锁有两种 类对象类的实例 第一种&#xff1a;锁类对象&#xff0c;有两种方式&#xff0c;如下&#xff1a; // 方法一&#xff1a;synchroni…...

编程日记 2023/5/14 5:15:10

嵌入式 Linux 的僵尸进程是什么？

目录 1、什么是僵尸进程&#xff1f; 2、僵尸进程的目的 3、怎么避免僵尸进程&#xff1f; 4、僵尸进程的处理方法 4.1 wait&#xff08;&#xff09;连接 4.2 waitpid&#xff08;&#xff09;函数 1、什么是僵尸进程&#xff1f; 首先内核会释放终止进程(调用了 exit …...

编程日记 2023/5/11 2:20:02

【刷题笔记】笔记一

1.自守数牛客链接解析&#xff1a;1.自守数的结尾肯定是 0&#xff0c;1&#xff0c;5&#xff0c;62.把数字转换为string类&#xff08;方便比较&#xff09;3.直接find在s2 里面 使用find查找另一个即可。#include <iostream> #include<string> using namespace …...

编程日记 2023/5/14 5:15:08

浏览器主页被hao123劫持的解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理…...

编程日记 2023/5/14 5:15:05

华为OD机试题 - 热点网络统计（JavaScript）| 含代码编写思路

华为OD机试题 最近更新的博客使用说明本篇题解：热点网络统计题目输入输出描述示例一输入输出示例二输入输出Code解题思路华为OD其它语言版本最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华…...

编程日记 2023/5/14 5:15:02

IT项目经理的自我修养手册

在不断进步的时代&#xff0c;任何岗位职责都是一个责任、权力与义务的综合体&#xff0c;有多大的权力就应该承担多大的责任&#xff0c;有多大的权力和责任应该尽多大的义务&#xff0c;任何割裂开来的做法都会发生问题。那么作为IT项目经理的岗位职责&#xff0c;我大概列举…...

编程日记 2023/5/14 5:15:00

2023年软考中级电子商务设计师考什么？

首先&#xff0c;电子商务设计师属于软考中级&#xff0c;因此难度也不是特别大。但并不是说就完全没有难度&#xff0c;难度还是有的&#xff0c;像上午题一般把基本知识点掌握了&#xff0c;是没什么问题的&#xff0c;重点就在于下午题会比较难。 接下来我们来剖析一下考试…...

编程日记 2023/5/14 5:14:57

现在的00后太强了，几个问题差点给我问懵了

前言 我们公司刚入职一个00后小伙&#xff0c;今天在办公室交流了一下&#xff0c;他问我会不会自动化测试&#xff0c;我说懂一点&#xff0c;然后直接问了我几个自动化测试问题&#xff0c;差点直接给我问懵了&#xff01; 问题如下&#xff1a; 我们在制定自动化测试实施…...

编程日记 2023/5/14 5:14:54

$3 : 水​​​​​项目实战 - 水果库存系统

javase知识点复习&#xff1a; final关键字&#xff1a;http://t.csdn.cn/bvFgu 接口的定义&#xff0c;特性&#xff0c;实现&#xff0c;继承&#xff1a;http://t.csdn.cn/tbXl3 异常&#xff1a;http://t.csdn.cn/VlS0Z DAO的概念和角色&#xff08;设计理念&#xff09;&a…...

编程日记 2023/5/14 5:14:51

毕业设计 基于STM32单片机无线ZIGBEE智能大棚土壤湿度光照检测

基于STM32单片机无线ZIGBEE智能大棚土壤湿度光照检测1、项目简介1.1 系统构成1.2 系统功能2、部分电路设计2.1 STM32F103C8T6核心系统电路设计2.2 光敏采集电路设计2.3 温度采集电路设计3、部分代码展示3.1 读取DS18B20温度值3.2 定时器初始化1、项目简介 选题指导&#xff0c…...

编程日记 2023/5/14 5:14:48

华为OD机试真题Java实现【相对开音节】真题+解题思路+代码（20222023）

相对开音节 题目 相对开音节构成的结构为辅音+元音（aeiou）+辅音(r除外)+e，常见的单词有bike、cake等。 给定一个字符串，以空格为分隔符，反转每个单词中的字母，若单词中包含如数字等其他非字母时不进行反转。 反转后计算其中含有相对开音节结构的子串个数（连续的子串…...

编程日记 2023/5/14 5:14:45

【C++】30h速成C++从入门到精通（STL容器listvector）

listlist的介绍list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后一个元素。list与…...

编程日记 2023/5/14 5:14:42

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/1/7 20:22:34

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/11 17:16:41

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/1/9 0:46:43

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2026/1/2 5:00:31

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50