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

Vue框架引入

news 2026/1/20 6:46:13

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

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/20 1:53:32

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/19 3:46:38

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2026/1/19 4:41:27

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...

编程新知 2026/1/20 2:52:18

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/12/6 11:14:42

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15