前端框架Vue2.0+Vue3.0学习笔记01

一、Vue技术_课程简介

1、前端框架小白

2、熟练掌握Vue2

3、轻松玩转Vue3

①、vue基础

②、vue-cli

③、vue-router

④、vuex

⑤、element-ui

⑥、vue3

二、Vue技术_Vue简介

1、Vue是什么?

一套用于构建用户界面(把你拿到手里的数据,通过某种办法变成用户可以看见的界面)渐进式(Vue可以自底向上逐层的应用:①、简单应用:只需一个轻量小巧的核心库 ②、复杂应用:可以引入各式各样的Vue插件。逐渐递进:从一个轻量小巧的核心库逐渐递进到使用各式各样的Vue插件JavaScript框架

2、谁开发的?

尤雨溪

3、Vue的特点

①、采用组件化模式,提高代码复用率、且让代码更好维护。

②、声明式编码,让编码人员无需直接操作DOM,提高开发效率。

③、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点

4、学习Vue之前要掌握的JavaScript基础知识

ES6语法规范:解构赋值、模板字符串、箭头函数

ES6模块化:默认暴露、分别暴露、统一暴露 import export

包管理器:npm、yarn、cnpm

原型、原型链:

数组常用方法:过滤一个数组、加工一个数组、筛选最值

axios:

promise:

......

三、Vue技术_Vue官网使用指南

https://cn.vuejs.org/

四、Vue技术_搭建Vue开发环境

引入vue.js文件

五、Vue技术_Hello小案例

六、Vue技术_分析Hello案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>初始Vue</title><!-- 引入Vue(可以说是对象也可以说是函数)如果你引入了Vue,全局就多了Vue这个构造函数 --><script type="text/javascript" src="../js/vue.js"></script></head><body><!--初识Vue:1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;3、root容器里的代码被称为【Vue模板】4、Vue实例和容器是一一对应的;5、真实开发中具有一个Vue实例,并且会配合着组件一起使用;6、{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;7、一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新;--><!-- 准备好一个容器 --><div id="root"><h1>Hello, {{name.toUpperCase()}}, {{address}}</h1></div><script type="text/javascript">Vue.config.productionTip = false //阻止 Vue 在启动时生成生产提示//创建Vue实例const x = new Vue({el:'#root',//el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串data:{ //data中用于存储数据,数据供el所指定的容器去使用。值我们暂时先写成一个对象。name:'nanjing',address:'北京'}})</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/98343.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hudi SQL DML

本文介绍SparkSQL提供的几个数据操作语言(DML)操作,用于与Hudi表交互。这些操作包括插入、更新、合并和删除Hudi表中的数据。 1.Insert Into 使用INSERT INTO语句使用Spark SQL将数据添加到Hudi表中。以下是一些示例: INSERT INTO <table> SELECT <columns> F…

航拍飞行器经营商城小程序的作用是什么

航拍人群越来越越多&#xff0c;一款靠谱的装备往往能达到预期效果&#xff0c;随着互联网信息传播度加深&#xff0c;也吸引了大批同样的爱好者加入航拍序列。 对航拍飞行器企业/经营商来说&#xff0c;市场增幅下也带来了不少商机&#xff0c;然在实际销售及客户赋能方面还是…

[软考中级]软件设计师-计算机网络

网络设备 物理层 物理层不能隔离广播域和冲突域 中继器&#xff0c;集线器 集线器可看成是特殊的多路中继器 数据链路层 可以隔离冲突域不能隔离广播域 网桥&#xff0c;交换机 交换机是多端口的网桥 网络层 可以隔离广播域和冲突域 路由器 应用层 网关 协议簇 …

JVM Optimization Learning(四)

目录 一、调优 1、基础概念 2、什么是调优&#xff1f; 3、调优&#xff0c;从规划开始 4、调优案例 一、调优 1、基础概念 吞吐量&#xff1a;用户代码执行时间 /&#xff08;用户代码执行时间 垃圾回收时间&#xff09; 响应时间&#xff1a;STW越短&#xff0c;响应…

JavaScript循环语句(for、while)

目录 一、前言 二、for循环 1. for循环的基本语法和使用方法 2. 循环变量的初始化、条件判断和迭代方式 3. 嵌套for循环的概念和应用场景 4. for-in循环和for-of循环的用途与区别 5. 常见for循环的应用案例 三、while循环 1. while循环的基本语法和使用方法 2. 循环条…

常用排序算法详解

1.冒泡排序原理示例代码实现 2.快速排序原理示例代码实现 3.插入排序原理示例代码实现 4.希尔排序原理示例代码实现 5.选择排序原理示例代码实现 6.堆排序原理示例代码实现 7.归并排序原理示例代码实现 本文讲述了常见的排序算法的执行过程&#xff0c;有详细实现过程举例 1.冒…

git+码云提交PR流程记录

前提条件&#xff1a;注册码云账号&#xff0c;本地安装git 如果不知道怎么注册和安装&#xff0c;可以参考gitgitee入门教程&#xff08;https://bbs.huaweicloud.com/forum/thread-55222-1-1.html&#xff09; 登录自己的码云账号 登陆了之后&#xff0c;在码云上打开目标项…

PHP 将json格式数据转换成数组的方法

php将json数据转换为数组的方法非常简单&#xff0c;php自带的json_decode()就可以实现&#xff0c;但是记住参数后面加上true&#xff0c;返回的便是数组&#xff0c;如果不加返回的便是对象 //json格式数据 $data {"angle":0,"card_region":[{"x&…

项目需求分析5大常见问题及解决方案

需求分析过程中&#xff0c;往往容易导致需求不准确和不完整&#xff0c;引起需求频繁变更&#xff0c;导致项目进度延误和成本增加&#xff1b;而需求分析的误解问题&#xff0c;导致交付产品无法满足客户期待&#xff0c;降低用户满意度和资源浪费。 那么在需求分析中&#x…

力扣第404题 左叶子之和 c++ 递归 与 迭代解法

题目 404. 左叶子之和 简单 给定二叉树的根节点 root &#xff0c;返回所有左叶子之和。 示例 1&#xff1a; 输入: root [3,9,20,null,null,15,7] 输出: 24 解释: 在这个二叉树中&#xff0c;有两个左叶子&#xff0c;分别是 9 和 15&#xff0c;所以返回 24示例 2: 输…

asp.net饭店订餐管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机设计定制

一、源码特点 asp.net 饭店订餐管理系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语 言开发 asp.net饭店订餐系统 二、功能介…

设计模式 - 访问者模式

目录 一. 前言 二. 实现 三. 优缺点 一. 前言 访问者模式&#xff0c;即在不改变聚合对象内元素的前提下&#xff0c;为聚合对象内每个元素提供多种访问方式&#xff0c;即聚合对象内的每个元素都有多个访问者对象。访问者模式主要解决稳定的数据结构和易变元素的操作之间的…

Unity实现设计模式——策略模式

Unity实现设计模式——策略模式 策略模式是一种定义一些列算法的方法&#xff0c;这些所有的算法都是完成相同的工作&#xff0c;只是实现不同。它可以通过相同的方式调用所有的算法&#xff0c;减少各种算法类与使用算法类之间的耦合。 策略模式的 Strategy 类层次为 Contex…

【Qt控件之QPushButton】使用及技巧

描述 QPushButton类是Qt中用于创建按钮的控件类&#xff0c;它继承自QAbstractButton类。 下面是QPushButton类的一些主要函数说明&#xff1a; QPushButton(QWidget *parent nullptr)&#xff1a;构造函数&#xff0c;创建一个QPushButton对象。 explicit QPushButton(cons…

放大招,百度文心大模型4.0正在加紧训练,即将发布

插播一条快讯&#xff01; &#xfeff;&#xfeff;刚刚看到一篇报道&#xff0c;说百度正在加紧训练文心大模型4.0&#xff01;百度5月发布了文心大模型3.5&#xff0c;才4个多月又要发布4.0了&#xff0c;这迭代速度简直了。据说这次发布将在10月17日百度世界大会上进行&am…

面试题-React(十):setState为什么使用异步机制?

在React中&#xff0c;setState的异步特性和异步渲染机制是开发者们经常讨论的话题。为什么React选择将setState设计为异步操作&#xff1f;异步渲染又是如何实现的&#xff1f;本篇博客将深入探究这些问题&#xff0c;通过代码示例解释为什么异步操作是React的一大亮点。 一、…

NeurIPS 2023 | 李飞飞团队提出SiamMAE:孪生掩码自编码器,刷榜视觉自监督方法

在计算机视觉领域&#xff0c;想要建立图像和场景&#xff08;scene&#xff09;之间之间的对应关系是一项比较困难的任务&#xff0c;尤其是在存在遮挡、视角改变或是物体外观发生变化的情况下。 最近&#xff0c;斯坦福大学李飞飞团队对MAE进行扩展&#xff0c;提出了孪生掩…

Tensorflow入门之 Hello World

Tensorflow入门之 Hello World 简介 Tensorflow 是 Google 开源的深度学习框架&#xff0c;来自于 Google Brain 研究项目&#xff0c;在 Google 第一代分布式机器学习框架 DistBelief 的基础上发展起来。 Tensorflow 的官方网址 http://www.tensorflow.org Tensorflow 的 G…

基于边缘网关的智慧工地监测方案

边缘物联网技术为千行百业赋能&#xff0c;依托边缘计算的低延时、高效率、广适用优势&#xff0c;也为工程建设产业带来新的增长动力。 例如在智慧工地应用中&#xff0c;围绕建设施工过程中的人员、设备、环境等要素&#xff0c;利用边缘计算网关构建全面的数据采集、分析、联…

web3.0时代分布式网络协议的异同

Web3.0时代标志着分布式网络协议的兴起&#xff0c;其中IPFS&#xff08;InterPlanetary File System&#xff09;和NDN&#xff08;Named Data Networking&#xff09;是备受瞩目的项目。尽管它们都属于分布式网络协议领域&#xff0c;但在多个方面存在显著区别。以下是IPFS和…