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

Vue入门学习（一）

news 2025/9/16 8:29:06

一、Vue环境搭建及第一个Demo

1.1编程工具：

下载Vscode,并安装插件

在Extensions 选项中搜索插件：

1：Live Server：将当前项目作为根路径，启动一个服务端，这样右键就会有如下选项

2：Eclipse Keymap：作为后端开发工程师，习惯了Eclipse 的快捷键，当然要安装这个插件，貌似有些快捷键还是要自己设置。

1.2 开始Vue

官网：

https://cn.vuejs.org/v2/guide/installation.html

基于Vue2.x版本开始学习：

1：下载开发版本的Vue.js，开始第一行代码：

工程目录结构如下：

完整代码：

  <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="./js/vue.js"></script>
</head><body><div id="demo"><h1>Hello, {{name}}</h1></div><script type="text/javascript">// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip = false;// 开启页面开发者工具Vue.config.devtools = truevar vm = new Vue({el: '#demo',data: {name: 'hanzhe'}})</script>
</body></html>

主要步骤：

1:引入Vue.js:

   <!-- 引入Vue --><script type="text/javascript" src="./js/vue.js"></script>

2:创建一个div容器，并设置一个id的标签属性，h1中使用{{xxxx}}，至于为什么这么写，目前先记住是这样规定的。xxx为js的表达式，例如 a, a+b ,demo()等

3:创建Vue实例：

<script type="text/javascript">// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip = false;// 开启页面开发者工具Vue.config.devtools = true// 至于变量名称为什么为vm学过MVVM 就明白了var vm = new Vue({el: '#demo',// el表示元素，绑定id为demo的容器data: {name: 'hanzhe'// name为div中对应的名称}})</script>

这样，第一个Vue案例就成功了，右键 open with live server在浏览器上的展示：

1.3 官网推荐安装：Vue Devtools

科学上网在chrom上安装此拓展程序：安装完并开启后，并没有在F12的面板中查看到想要的效果：

一顿百度后，说是要修改配置：找到拓展程序的安装目录：

查找方法：

个人资料路径即为拓展程序安装路径，找到对应的拓展程序修改，manifest.json文件里面的值：

 "persistent": true //修改为ture

二、模板语法

vue中模板语法包括两大类，插值语法、指令语法

插值语法：

功能：用于解析标签体内容

写法：{{xxx}},xxx是js表达式，可以直接读取到data中的所有区域，像上面demo中的{{name}}。

指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）

举例：

<body><div id="demo"><h1>Hello, {{name}}</h1><a href={{url}}>跳转</a></div><script type="text/javascript">// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip = false;// 开启页面开发者工具Vue.config.devtools = truevar vm = new Vue({el: '#demo',data: {name: 'hanzhe',url: 'wwww.baidu.com'}})</script>
</body>

在div中有一个超链接，href标签属性值用插值语法，data中也有对应的值，查看页面能否达到想要的效果：

页面报错，提示不能使用{{xxx}}插值语法,需要使用v-bind或者：

修改如下：即可正常跳转指定的链接地址，v-bind还可以简写为 : 冒号

深理解，指令语法用于解析标签属性、绑定事件，插值语法解析标签体内容

<body><div id="demo"><h1>Hello, {{name}}</h1><a v-bind:href="baidu.url">跳转1</a><!-- 简写 --><a :href="baidu.url">跳转2</a></div><script type="text/javascript">// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip = false;// 开启页面开发者工具Vue.config.devtools = truevar vm = new Vue({el: '#demo',data: {name: 'hanzhe',baidu:{url:'https://www.baidu.com/'}}})</script>
</body>

三、数据绑定

Vue中有2种数据绑定的方式：

单向绑定：v-bind只能从data流向页面
双向绑定：v-model数据不仅能从data流向页面，还可以从页面流向data

备注：

双向绑定一般应用在表单类元素上，如input ,select,textarea等

v-modul:value可以简写v-model，因为v-model默认收集的就是value的值

     <!-- 数据绑定 --><!-- 单向数据绑定 --><p>单向数据绑定：<input type="text" v-bind:value="name"></p>双向数据绑定：<input type="text" v-model="name">

四、el与data的两种写法

el的两种写法：

1：创建vue实例对象时配置el属性

2：先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

data的两种写法：

1：对象式：data:{}

2：函数式：data(){return {}}

如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错。

一个重要的原则：

有vue管理的函数，一定不要写箭头函数(没明白，先记着)，否则this就不再是Vue实例了

 <script type="text/javascript">// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip = false;// 开启页面开发者工具Vue.config.devtools = truevar vm = new Vue({// el的第一种写法// el: '#demo',// data的第一种写法// data: {//     name: 'hanzhe',//     baidu: {//         url: 'https://www.baidu.com/'//     }// }// data的第二种写法，函数式data() {return {name: 'zhangsan',baidu: {url: 'http://www.baidu.com'}}}})// el的第二种写法vm.$mount("#demo")</script>

五、MV VM 模型

MVVM模型：

M：模型Model，data中的数据
V：视图View，模板代码
VM：视图模型ViewModel，Vue实例，所以用vm表示vue实例

观察发现：

data中所有的属性，最后都出现在vm身上，属性为_data
vm身上所有属性及Vue原型，身上所有属性，在Vue模板中都可以直接使用。

<body><div id="demo"><h1>名称, {{name}}</h1><h1>年龄, {{age}}</h1><h1>测试, {{$options}}</h1></div><script type="text/javascript">// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip = false;// 开启页面开发者工具Vue.config.devtools = truevar vm = new Vue({data() {return {name: 'zhangsan',age: 12}}})// el的第二种写法vm.$mount("#demo")</script>
</body>

六、数据代理

使用Object.defineProperty对属性进行绑定

 <script type="text/javascript">let number = 18let person = {name: 'zhangsan',sex: '男',}// 当有人读取person的age属性时，get函数（getter）呗调用，且返回值就是age的值Object.defineProperty(person, 'age', {value: 90})console.log(person)</script>

// 控制台输出
{name: 'zhangsan', sex: '男', age: 90}

数据代理：通过一个对象代理另外一个对象中属性的操作（读/写）：

<script type="text/javascript">let number = 18let person = {name: 'zhangsan',sex: '男',}// 当有人读取person的age属性时，get函数（getter）呗调用，且返回值就是age的值Object.defineProperty(person, 'age', {// value: 90,get() {console.log("有人读取了属性")return number},set(value) {console.log("有人修改了属性")number = value}})console.log(person)</script>

基本原理：

通过object.defineProperty()把data对象中属性添加到vm上
为每一个添加到vm上的属性，都有一个getter，setter
在getter,setter内部去操作读写data中对应的属性

Vue将data中的数据拷贝了一份到_data属性中，又将_data里面的属性提到Vue实例中，通过defineProperty实现数据代理，这样通过getter/setter操作name进而操作_data中的name,又对data进行数据劫持，实现响应。

Vue入门学习（一）

一、Vue环境搭建及第一个Demo 1.1编程工具： 下载Vscode,并安装插件在Extensions 选项中搜索插件： 1：Live Server：将当前项目作为根路径，启动一个服务端，这样右键就会有如下选项 2：Eclipse …...

编程日记 2023/8/31 3:56:23

软考：中级软件设计师:无线网，网络接入技术，ipv6

软考：中级软件设计师:无线网提示：系列被面试官问的问题，我自己当时不会，所以下来自己复盘一下，认真学习和总结，以应对未来更多的可能性关于互联网大厂的笔试面试，都是需要细心准备的 &#x…...

编程日记 2023/8/31 3:55:21

dart 学习之同步生成器（sync）和异步生成器（async）

同步生成器（sync*）和异步生成器（async*）都是 Dart 中用于逐步产生多个值的生成器类型，但它们之间有一些重要的区别： 执行方式： 同步生成器（sync*）： 同步生成器…...

编程日记 2023/8/31 3:54:19

JSX基础

1. JSX介绍概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构作用：在React中创建HTML结构（页面UI结构） 优势： 采用类似于HTML的语法，降低学习成…...

编程日记 2023/8/31 3:53:14

Linux Day11---mbash项目（二）

观看本文之前请先阅读Linux Day10的相关内容 1.touch 1.1 open系统调用 int open(const char*path,int oflags,mode_t mode); oflags参数： O_APPEND:把写入数据追加在文件的末尾 O_TRUNC:把文件长度设置为0，丢弃已有的内容 O_CREAT:如果需要&#…...

编程日记 2023/8/31 3:52:13

回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测（多指标，多图） 目录回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测（多指标，多图…...

编程日记 2023/8/31 3:51:12

【Golang】go条件编译

交叉编译只是为了能在一个平台上编译出其他平台可运行的程序，Go 作为一个跨平台的语言，它提供的类库势必也是跨平台的，比如说程序的系统调用相关的功能，能根据所处环境选择对应的源码进行编译。让编译器只对满足条件的代码进行编译…...

编程日记 2023/8/31 3:50:11

学习创建第一个 React 项目

目标本篇的目标是配置好基础的环境并创建出第一个 React 项目。由于之前没接触过相关的知识，所以还需要了解其依赖的一些概念。步骤主要参考First React app using create-react-app | VS code | npx | npm - YouTube 0. 简单了解相关概念 JavaScript 一种语…...

编程日记 2023/8/31 3:49:08

使用Python构建网络爬虫：提取网页内容和图片资源

网络爬虫是一种自动获取网页内容的程序，它可以帮助我们高效地收集网络上的有价值信息。本文将介绍如何使用Python构建网络爬虫，提取网页内容和图片资源。　　一、环境准备　　1.安装Python环境　　首先，确保您已经安装了Python环境。访问P…...

编程日记 2023/8/31 3:48:06

echarts画一个简单的饼图中间是空的环有两种颜色一种是底色一种是百分比的颜色

//dom打印出来大概是什么样子下方有个图可以作为参考 ecInit(correctRate, processAnalysisVO.correctRate, (100-processAnalysisVO.correctRate));//如效果图//饼图 function ecInit(dom, correctRate, errorRate) {var dom dom; //就是你要放入的盒子元素var myChart ech…...

编程日记 2023/8/31 3:46:03

5 群起集群

1.在启动集群之前，先配置workers,有几个节点就配置几个 [atguiguhadoop102 hadoop]$ vim /opt/module/hadoop-3.1.3/etc/hadoop/workers在该文件中增加如下内容： hadoop102 hadoop103 hadoop104 注意：该文件中添加的内容结尾不允许有空格&a…...

编程日记 2023/8/31 3:45:01

前端传参对象套对象的格式,后端进行解析并存入数据库

项目场景： 在一些小程序中会涉及到一个表单中的一个数组对象中夹杂着另一个对象数据,这个被夹杂的数据是from表单内的一组单选或者双选这样的数据,前端转为json对象之后传到后端进行解析问题描述首先传进来的对象是这样的格式的 abc:{"a":"0&quo…...

编程日记 2023/8/31 3:43:59

WordPress 网站使用 CDN 后获取访客真实 IP

WordPress 往数据库存 IP 的时候似乎用的是 REMOTE_ADDR，这样一来数据库里面的评论信息就全是从各个 CDN 服务器来的 IP。在 wp-config.php 文件中增加下面代码就可以获取 CDN 后访客的真实 IP。这个函数的核心是用解析后的 HTTP_X_FORWARDED_FOR 替换 REMOTE_ADD…...

编程日记 2023/8/31 3:42:58

mysql my.ini、登录、用户相关操作、密码管理、权限管理、权限表，角色管理

my.ini 配置文件格式登录mysql mysql -h hostname | IP -P port -u username -p database -e “select 语句”； 创建用户、修改用户、删除用户 create user ‘zen’ identified by ‘密码’ ## host 默认是 % create user ‘zen’‘localhost’ identified by ‘密…...

编程日记 2023/8/31 3:41:52

UUID和数据库主键

UUID uuid是由网卡MAC地址、时间戳、名字空间（Namespace）、随机或伪随机数、时序等因素随机生成的一个字符串。有128位，重合概率是2的128次方。 Unique 突发奇想用uuid做数据库主键。可以保证全局唯一性可以分布式生成无序插入可以避免锁…...

编程日记 2023/8/31 3:40:50

uniapp：蓝牙模块

模拟的是蓝牙设备签到/签出： 获取指定蓝牙设备蓝牙初始搜索次数限制，超过限制就停止搜索蓝牙连接失败次数限制，超过限制标识蓝牙连接失败（离开蓝牙范围或其他原因）自动重连指定蓝牙 const device ref<any>(nu…...

编程日记 2023/8/31 3:39:48

探索链表：数据结构的精妙之处

前言在计算机科学中，数据结构是构建和组织数据的基础，它们是解决复杂问题的关键。然而，在众多数据结构中，链表（Linked List）因其独特的特点和广泛的应用而备受关注。本文将带您深入探讨链表的概念、种类、…...

编程日记 2023/8/31 3:38:46

Java监听mysql的binlog 报错解决办法

报错：com.github.shyiko.mysql.binlog.network.AuthenticationException: Client does not support authentication protocol requested by server; consider upgrading MySQL client 解决方案：在mysql中执行以下命令 alter user rootlocalhost identi…...

编程日记 2023/8/31 3:37:45

Javascript 中的 debugger 拦截

debugger 指令，一般用于调试，在如浏览器调试执行环境中，可以在 JavaScript 代码中产生中断。如果想要拦截 debugger，是不容易的，常用的函数替代、proxy 方法均对它无效，如： window.debugger …...

编程日记 2023/8/31 3:36:43

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/9/16 1:44:00

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

Opencv中的addweighted函数

一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...

编程新知 2025/9/11 8:42:09

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口目录第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/9/10 3:41:08