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

Vue框架引入

news 2026/6/3 16:24:43

vue简介

1.1.vue是什么?
Vue官网

  • 英文官网: https://vuejs.org/
  • 中文官网: https://cn.vuejs.org/

 

vue是一套构建用户界面的渐进式javascript框架

  • 构建用户界面:将我们手里拿到的数据通过某种办法变成用户可以看见的界面
  • 前端工程师的职责:就是在合适的时候发出合适的请求,然后将数据展现在合适位置
  • vue关注的就是你把数据给我,我怎么把它变成界面

渐进式:vue可以自底向上逐层的应用

  • 接地气点说,如果你是一个简单的应用,那么只需要引入一个轻量小的核心库即可(这个库压缩完只有100多kb);如果你的应用是一个复杂的应用,可以引入各式各样的vue插件。也就是从一个轻量小巧的核心库逐渐递进到使用各式各样的vue插件库。 

后起之秀,指的是vue之前有react,react之前有Angluer,尤雨溪也是参考了react写的好的部分。 

Vue的特点

  • 1.采用组件化模式，提高代码复用率、且让代码更好维护。

组件化：一个.vue文件就是一个组件,.vue文件是Vue打造的一个全新的文件格式,.vue文件中
写的就是HTML结构、css样式、js交互

  • 2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。 

  •  3.使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。

Vue官网使用指南 

学习vue之前,先来看一下Vue官网顶部的导航区,vue团队为了让vue更好用,所以说写了些文档并且进行了分类形成了官网上方这个导航区。

教程、API最重要，学习过程中总要打开看的东西

  • 教程：vue入门的文档，先不打开，下一节点vue小案例时打开看
  • API：在编码过程中遇到不会的可以查看API，不会就找API
  • 风格指南：教你如何写出更优雅的vue代码，目前先不用通读，得等vue全部学完而且学的过程中也已经在慢慢渗透如何更好的编写vue代码
  • 示例：官网给出的一些案例
  • Cookbook:编写vue代码的技巧

生态系统 

工具和核心插件尤为重要
工具--->Vue CLI :最一开始学习时需要在HTML中引入vue.js才能编写vue代码,但是后续公司
中干活得借助于一个高端的平台来开发叫脚手架

搭建vue的开发环境

1.下载开发版本的vue

1. script 引入

  • 引入本地文件 (初学者选择这种)
  • CDN引入线上文件 (CDN加速的意思)

 

2. npm 安装 指令 (后续使用这种)

  • 借助于 node.js
  • 安装 nodejs、Vue的脚手架、搭建 vue项目

2.安装开发者调试工具 

3.关闭浏览器F12的警告提示

 初识Vue

<body><!-- 1：准备好一个容器 --><div id="app"><!-- 3:使用数据 插值表达式 --><p>Hello,欢迎来到{{name}}</p></div>
</body>
<!-- 引入了vue的 构造方法 -- 创建对象 -->
<script src="../js/vue.js"></script>
<script >// 2:创建vue 实例// vue实例 管控 id#app 所有的属性、数据var vm = new Vue({el:"#app", // el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串data:{ //data中用于存储数据,数据供el所指定的容器去使用。name:"齐鲁师范大学"}})
</script>

总结

 数据绑定理解

Vue中有两种数据绑定方式:

  1. 1.单向数据绑定(v-bind):数据只能从data流向页面。
  2. 2.双向数据绑定(v-model):数据不仅能从data中流向页面,还可以从页面流向data中。

备注：

  • 1) 双向绑定一般都应用在表单类元素上(如:input、select等)
  • 2) v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。

el与data的2种写法 

el的2种写法:

  • new Vue时候配置el属性
  • 先创建Vue实例,随后通过vm.$mount('#app')指定el的值。
var vm = new Vue({
el:"#app", // el的第一种写法
data:{ //data中用于存储数据,数据供el所指定的容器去使用。name:"高数"
}
})
vm.$mount('#app');//el的第二种写法

data的两种写法:

  • 对象式
  • 函数式
var vm = new Vue({
el:"#app",
data:{ //data的第一种写法:对象式。name:"高数"
}
data:function(){//data的第二种写法:函数式
return{name:"高数"}
}
data(){//简化函数式return{name:"高数"}  
}
})

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

一个重要原则：
由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了，而是表示window。

MVVM模型 

1. M：模型(Model) ：对应 data 中的数据
2. V：视图(View) ：模板
3. VM：视图模型(ViewModel) ： Vue 实例对象

 

 观察发现:

  • 1.data中所有的属性,最后都出现在了vm身上。
  • 2.vm身上所有的属性及vue原型上所有的属性,在Vue模板中都可以直接使用。

 内置指令

 

相关文章：

Vue框架引入

vue简介 1.1.vue是什么?Vue官网 英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/ vue是一套构建用户界面的渐进式javascript框架 构建用户界面:将我们手里拿到的数据通过某种办法变成用户可以看见的界面前端工程师的职责:就是在合适的时候发出合适的请求,然后…...

编程日记 2024/7/9 0:37:30

贝叶斯估计(1):期末大乱炖

写在前面&#xff01; 1 先验分布和后验分布 三种信息&#xff1a;总体信息、样本信息、先验信息 总体信息&#xff1a;“总体是正态分布”&#xff1b;样本信息&#xff1a;总体抽取的样本提供的信息&#xff0c;是最新鲜的信息&#xff1b;先验信息&#xff1a;在抽样之前就…...

编程日记 2024/7/9 0:34:27

电脑找回彻底删除文件？四个实测效果的方法【一键找回】

电脑数据删除了还能恢复吗&#xff1f;可以的&#xff0c;只要我们及时撤销上一步删除操作&#xff0c;还是有几率找回彻底删除文件。 当我们的电脑文件被彻底删除后&#xff0c;尽管恢复的成功率可能受到多种因素的影响&#xff0c;但仍有几种方法可以尝试找回这些文件。本文整…...

编程日记 2024/7/9 0:33:26

java开发报错

查了一下啊。...

编程日记 2024/7/9 0:32:25

基于python 的动态虚拟主机

内容动态&#xff0c;内容通过程序的执行结果返回。 通过编写脚本&#xff0c;完成配置&#xff0c;实现访问页面返回Hello World。 实现步骤&#xff1a; 1、安装python模块 dnf install python3-mod_wsgi 2、编写脚本 在/var/www/cgi-bin/目录下编写脚本&#xff1a; vim…...

编程日记 2024/7/9 0:30:22

绝地求生PUBG没有开始游戏按钮的解决办法

绝地求生是一款特别热门的战术竞技型射击类游戏&#xff0c;游戏中玩家需要在游戏地图上收集各种资源&#xff0c;并在不断缩小的安全区域内持武器对抗其他玩家&#xff0c;让自己生存到最后。当游戏最后场上只剩下一支队伍的时候即可获得游戏胜利。然而一些玩家在游玩绝地求生…...

编程日记 2024/7/9 0:29:21

开始尝试从0写一个项目--前端（一）

基础项目构建 创建VUE初始工程 确保自己下载了node.js和npm node -v //查看node.js的版本 npm -v //查看npm的版本 npm i vue/cli -g //安装VUE CLI 创建 以管理员身份运行 输入&#xff1a;vue ui 就会进入 点击创建 自定义项目名字&#xff0c;选择npm管理 结…...

编程日记 2024/7/9 0:27:18

【Java探索之旅】多态：向上下转型、多态优缺点、构造函数陷阱

文章目录 &#x1f4d1;前言一、向上转型和向下转型1.1 向上转型1.2 向下转型 二、多态的优缺点2.1 多态优点2.2 多态缺陷 三、避免避免构造方法中调用重写的方法四、好的习惯&#x1f324;️全篇总结 &#x1f4d1;前言 在面向对象编程中&#xff0c;向上转型和向下转型是常用…...

编程日记 2024/7/9 0:26:17

Linux上web服务器搭建（Apache、Nginx）

第五章 web服务器 第一节 DNS&#xff1a;对域名进行解析&#xff0c;查询对应的地址 1.1 web服务器简介 www是world wide web的缩写&#xff0c;也就是全球信息广播的意思 1.2.网址及HTTP简介 web服务器提供的这些数据大部分都是文件&#xff0c;那么我们需要在服务器端…...

编程日记 2024/7/9 0:25:16

Django QuerySet对象，exclude()方法

模型参考上一章内容&#xff1a; Django QuerySet对象&#xff0c;filter()方法-CSDN博客 exclude()方法&#xff0c;用于排除符合条件的数据。 1&#xff0c;添加视图函数 Test/app11/views.py from django.shortcuts import render from .models import Postdef index(re…...

编程日记 2024/7/9 0:24:14

Qt/C++音视频开发78-获取本地摄像头支持的分辨率/帧率/格式等信息/mjpeg/yuyv/h264

一、前言 上一篇文章讲到用ffmpeg命令方式执行打印到日志输出&#xff0c;可以拿到本地摄像头设备信息&#xff0c;顺藤摸瓜&#xff0c;发现可以通过执行 ffmpeg -f dshow -list_options true -i video“Webcam” 命令获取指定摄像头设备的分辨率帧率格式等信息&#xff0c;会…...

编程日记 2024/7/9 0:23:11

Go bufio包

bufio包&#xff1a; 带缓冲的I/O操作&#xff0c; 减少系统调用次数&#xff0c; 读取文件、网络数据。 bufio包 是什么 bufio 包是 Go 标准库中的一个非常有用的包&#xff0c;用于提供带缓冲的 I/O 操作。它通过缓冲来提高读取和写入的效率&#xff0c;可以有效减少系统调用…...

编程日记 2024/7/9 0:22:11

C++ 类和对象 拷贝构造函数

一 拷贝构造函数的概念&#xff1a; 拷贝构造函数是一种特殊的构造函数&#xff0c;用于创建一个对象是另一个对象的副本。当需要用一个已存在的对象来初始化一个新对象时&#xff0c;或者将对象传递给函数或从函数返回对象时&#xff0c;会调用拷贝构造函数。 二 拷贝构造函…...

编程日记 2024/7/9 0:21:09

C# —— Math对象

Math 数学类 提供了一些相关数学计算的属性和方法、四舍五入、向上求整、向下求整、开平方&#xff0c;几次方 最大值和最小值 sin cos 绝对值 方法 1.Math 常用的字段 Math.PI double x 2 * 180 / Math.PI; Console.WriteLine(x); 2 Math.Abs() 求绝对值 int a -3; Con…...

编程日记 2024/7/9 0:20:08

Face_recognition实现人脸识别

这里写自定义目录标题 欢迎使用Markdown编辑器一、安装人脸识别库face_recognition1.1 安装cmake1.2 安装dlib库1.3 安装face_recognition 二、3个常用的人脸识别案例2.1 识别并绘制人脸框2.2 提取并绘制人脸关键点2.3 人脸匹配及标注 欢迎使用Markdown编辑器 本文基于face_re…...

编程日记 2024/7/9 0:19:07

1-3分钟爆款视频素材在哪找啊？这9个热门爆款素材网站分享给你

在如今快节奏的时代&#xff0c;短视频已成为吸引观众注意力的黄金手段。然而&#xff0c;要制作出1-3分钟的爆款视频&#xff0c;除了创意和剪辑技巧外&#xff0c;选择合适的素材至关重要。那么&#xff0c;哪里可以找到那些能让你的视频脱颖而出的爆款素材呢&#xff1f;不用…...

编程日记 2024/7/9 0:18:06

武汉免费 【FPGA实战训练】 Vivado入门与设计师资课程

一&#xff0e;背景介绍 当今高度数字化和智能化的工业领域&#xff0c;对高效、灵活且可靠的技术解决方案的需求日益迫切。随着工业 4.0 时代的到来&#xff0c;工业生产过程正经历着前所未有的变革&#xff0c;从传统的机械化、自动化逐步迈向智能化和信息化。在这一背景下&…...

编程日记 2024/7/9 0:17:05

【vite创建项目】

搭建vue3tsvitepinia框架 一、安装vite并创建项目1、用vite构建项目2、配置vite3、找不到模块 “path“ 或其相对应的类型声明。 二、安装element-plus1、安装element-plus2、引入框架 三、安装sass sass-loader1、安装sass 四、安装vue-router-next 路由1、安装vue-router42搭…...

编程日记 2024/7/9 0:16:04

最优化方法 运筹学【】

1.无约束 常用公式 线搜索准则&#xff1a;求步长 精确线搜索&#xff08;argmin&#xff09; 最速下降&#xff1a;sd&#xff1a;线性收敛 2.算法 SD dk&#xff1a;付梯度-g newton dk&#xff1a;Gkd-g 二阶收敛&#xff0c;步长为1 阻尼牛顿&#xff1a;步长用先搜…...

编程日记 2024/7/9 0:15:02

探索 WebKit 的动感世界：设备方向和运动支持全解析

探索 WebKit 的动感世界&#xff1a;设备方向和运动支持全解析 随着移动设备的普及&#xff0c;网页应用对设备方向和运动的感知需求日益增长。WebKit 作为众多流行移动浏览器的渲染引擎&#xff0c;提供了对设备方向和运动的全面支持&#xff0c;使得 Web 应用能够根据设备的…...

编程日记 2024/7/9 0:11:58

Unity Il2CppDumper原理与实战：解析元数据与二进制对齐

1. 这不是“破解工具”&#xff0c;而是Unity开发者该懂的二进制真相课 你刚在Unity Asset Store下载了一个功能惊艳的插件&#xff0c;却在打包iOS后发现部分逻辑失效&#xff1b;或者接手一个没有源码的旧项目&#xff0c;只有一堆 .dll 和 .so 文件&#xff0c;连主入口…...

编程新知 2026/5/26 4:52:25

别再盲跑了！手把手教你用Arduino Zero在IDE 2.0里设置断点单步调试

告别盲跑时代&#xff1a;Arduino Zero与IDE 2.0的源码级调试实战指南 当你的Arduino项目逻辑越来越复杂&#xff0c;仅靠串口打印调试就像在迷宫里摸黑前行——直到遇见Arduino Zero与IDE 2.0的调试组合。本文将揭示如何用这套工具实现 源码级精准调试 &#xff0c;即使你手…...

编程新知 2026/5/26 1:47:12

2026年，揭秘那些真正安全的原生态食材厂家你不可不知的秘密

随着人们生活水平的提升以及对健康的日益重视&#xff0c;选择真正安全的原生态食材已经成为许多人购买食物的标准。但市场的繁杂使得甄别真正安全的食材厂家变得愈加困难。今天&#xff0c;我将通过几个关键角度&#xff0c;为大家揭秘那些真正安全的原生态食材厂家的秘密&…...

编程新知 2026/5/26 1:27:06

Veo 2胶片质感生成器失效？——深度解析Color Science v2.3内核中被屏蔽的Cinematic Grain Injection层

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Veo 2胶片质感生成器失效现象全景透视 近期大量用户反馈&#xff0c;Veo 2 胶片质感生成器在调用 generate_film_effect() 接口后返回空纹理、纯灰帧或 HTTP 503 Service Unavailable 错误&#xff0c;且该问题…...

编程新知 2026/5/26 1:06:54

GitLab External Wiki代理权限绕过漏洞深度解析

1. 这个漏洞不是“修个补丁”就能完事的——它暴露的是 GitLab 权限模型里一个被长期忽视的逻辑断层GitLab 安全漏洞 CVE-2025-2614&#xff0c;光看编号容易误以为是又一个常规的越权或 XSS 类型漏洞。但我在实际复现和审计过程中发现&#xff0c;它根本不是配置疏漏或代码拼写…...

编程新知 2026/5/26 0:42:31

rk35xx 通过recovery升级问题

Firefly 的 recovery 库是一个核心组件&#xff0c;它构建了一个独立的微型 Linux 系统&#xff0c;专门用于在设备主系统之外执行高可靠性的固件升级。简单来说&#xff0c;它的工作流程是&#xff1a;主系统通过命令触发&#xff0c;将升级指令写入特定分区并重启&#xff1b…...

编程新知 2026/5/26 0:03:57

LoRa物联网与动态基线算法在养殖体温监测中的实战应用

1. 项目概述&#xff1a;为什么我们需要一个智能体温监测系统&#xff1f;在规模化养殖场里干了十几年&#xff0c;我见过太多因为体温异常没被及时发现而导致的损失。一头育肥猪突然不吃食&#xff0c;等饲养员第二天巡栏发现时&#xff0c;可能已经高烧好几天&#xff0c;继发…...

编程新知 2026/5/25 20:22:06

Frida无Root Hook PC微信小程序源码（Electron+Chromium）

1. 这不是“破解”&#xff0c;而是一次对微信小程序运行机制的逆向观察 你有没有试过&#xff0c;在PC版微信里点开一个小程序&#xff0c;想看看它背后是怎么写的&#xff1f;比如某个电商小程序的优惠券逻辑、某个工具类小程序的数据渲染方式&#xff0c;甚至只是单纯好奇—…...

编程新知 2026/5/25 17:55:38

遭遇薪酬倒挂后的反向谈判与资产重估策略「蒸汽求职分享」

在 2026 年全球科技大厂与跨国泛金融巨头追求极致人效、频繁进行组织架构重组&#xff08;Reorg&#xff09;的买方市场中&#xff0c;一个让无数海外名校留学生在入职两年后心态瞬间崩塌的现象&#xff0c;正在高频发生——“薪酬倒挂&#xff08;Salary Inversion&#xff09…...

编程新知 2026/5/25 17:28:10

UE5项目打包后RenderTarget导出图片全黑？手把手教你解决伽马校正与资产打包问题

UE5打包后RenderTarget导出图片全黑的终极解决方案当你花了整整三天时间调试RenderTarget导出功能&#xff0c;终于在编辑器里看到完美的截图效果&#xff0c;却在打包成可执行文件后发现所有导出的图片都变成了一片漆黑——这种从云端跌入谷底的感觉&#xff0c;每个UE开发者都…...

编程新知 2026/5/25 17:19:36