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

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

news 2026/2/7 18:05:21

系列文章目录

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

文章目录

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

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/4 16:43:14

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/4 16:30:39

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

编程新知 2026/1/31 9:00:14