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

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

news 2026/4/3 17:31:17

系列文章目录

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

文章目录

  • 系列文章目录
  • 前言
  • 兼容性
  • 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

机械键盘连击终结者：三分钟搞定键盘“鬼键“问题

机械键盘连击终结者&#xff1a;三分钟搞定键盘"鬼键"问题 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocker 还在为机械键盘的&…...

编程新知 2026/4/3 17:14:49

解锁5大核心能力：BetterJoy让Switch手柄在PC实现专业级控制

解锁5大核心能力&#xff1a;BetterJoy让Switch手柄在PC实现专业级控制 【免费下载链接】BetterJoy Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput 项目地址: https://gitcode…...

编程新知 2026/4/3 16:40:17

Linux实时查看CUDA显卡使用情况的常用命令详解

在 Linux 系统中&#xff0c;你可以使用以下几个常用命令来实时查看 CUDA 显卡的情况&#xff1a;1. nvidia-smi 命令nvidia-smi&#xff08;NVIDIA System Management Interface&#xff09;是 NVIDIA 提供的一个命令行工具&#xff0c;它可以实时显示 NVIDIA GPU 的状态信息&…...

编程新知 2026/4/3 15:43:34

C++的std--ranges选择管理

C的std::ranges选择管理&#xff1a;现代算法的新范式 在C20标准中&#xff0c;std::ranges的引入彻底改变了传统算法的实现方式&#xff0c;为开发者提供了更简洁、更安全的范围操作工具。通过范围库&#xff0c;开发者可以摆脱繁琐的迭代器对&#xff0c;直接操作数据序列&a…...

编程新知 2026/4/3 15:37:31

实战指南：基于快马AI生成代码，快速构建并部署一个完整企业网站

今天想和大家分享一个实战经验&#xff1a;如何用InsCode(快马)平台快速搭建一个完整的企业网站。整个过程非常流畅&#xff0c;特别适合需要快速上线展示页面的场景。 项目结构规划 首先明确企业网站需要的核心页面&#xff1a;首页、关于我们、服务项目、案例展示、团队介绍、…...

编程新知 2026/4/3 15:29:29

SEO聚合页与传统网页有什么区别

SEO聚合页的核心理念与传统网页的差异 在互联网的世界里&#xff0c;网页的形式和功能不断演变&#xff0c;其中SEO聚合页与传统网页的区别尤为显著。理解这两者的不同&#xff0c;对于提升网站的流量和用户体验至关重要。 SEO聚合页是一种专注于内容聚合和优化的网页形式&am…...

编程新知 2026/4/3 15:27:25

HTTP 基础

文章目录1、认识 HTTP1.1 超文本2、与 HTTP 有关的组件2.1 Web 服务器3、与 HTTP 有关的协议3.1 TCP3.2 DNS3.3 URI / URL3.4 HTTPS4、HTTP 请求响应过程5、HTTP 请求特征6、详解 HTTP 报文6.1 HTTP 请求 方法6.2 HTTP 请求 URL6.2.1 http6.2.2 主机6.2.3 端口6.2.4 路径6.2.5 …...

编程新知 2026/4/3 14:36:13

如何快速掌握Outfit字体：5个简单技巧打造专业级设计

如何快速掌握Outfit字体&#xff1a;5个简单技巧打造专业级设计 【免费下载链接】Outfit-Fonts The most on-brand typeface 项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts Outfit字体是一款专业的开源无衬线字体&#xff0c;提供从Thin到Black的9种完整字…...

编程新知 2026/4/3 13:00:51

Python 官方网站（python.org）上 Python 3.13.0 版本的 Windows 下载选项说明

Python 官方网站&#xff08;python.org&#xff09;上 Python 3.13.0 版本的 Windows 下载选项说明。以下是各选项的简要解释&#xff0c;帮助你选择合适的安装包&#xff1a; ✅ Windows installer (64-bit)&#xff1a;标准 .exe 安装程序&#xff0c;适用于大多数现代 64 位…...

编程新知 2026/4/3 12:50:36

CasRel关系抽取完整流程：从原始文本清洗、NER预处理到SPO抽取

CasRel关系抽取完整流程&#xff1a;从原始文本清洗、NER预处理到SPO抽取 1. 什么是CasRel关系抽取&#xff1f; CasRel&#xff08;Cascade Binary Tagging Framework&#xff09;是一个专门从文本中自动提取"谁-做了什么-对谁"这种关系信息的AI模型。想象一下&am…...

编程新知 2026/4/3 11:50:08