尚医通-前端Vue学习(九)

news2024/11/19 6:32:30

(1)vscode的安装及使用

(2)前端知识-ES6语法知识点

(3)Vue-入门

(4) Vue的生命周期

(5)Vue-Axios的使用

 (6)ElemmentUI介绍


 

(1)vscode的安装及使用

下载地址

Visual Studio Code - Code Editing. Redefined

为方便后续开发,建议安装如下插件

创建项目

vscode本身没有新建项目的选项,所以要先创建一个空的文件夹,如project_xxxx。

然后打开vscode,再在vscode里面选择 File -> Open Folder 打开文件夹,这样才可以创建项目。

保存工作区

打开文件夹后,选择“文件 -> 将工作区另存为...”,为工作区文件起一个名字,存储在刚才的文件夹下即可

新建文件夹和网页

(2)前端知识-ES6语法知识点

什么是 ECMAScript 6

ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准, 2015 年 6 月正式发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

基本语法

本部分只学习项目开发中涉及到ES6的最少必要知识,方便项目开发中对代码的理解。

 let声明变量

// var 声明的变量没有局部作用域
// let 声明的变量  有局部作用域

{

    var a = 1;

    let b = 2;

}

console.log(a)

console.log(b)  //b is not defined

 

 

// var 可以声明多次
// let 只能声明一次

var m = 1;

var m = 2;

let n = 10;

let n = 20;  //'n' has already been declared

console.log(m)

console.log(n)

const声明常量(只读变量)

// 1、声明之后不允许改变    
const PI = "3.1415926"
PI = 3     // TypeError: Assignment to constant variable.
// 2、一但声明必须初始化,否则会报错
const MY_AGE  // Missing initializer in const declaration

解构赋值

创建 03-解构赋值-数组解构.js

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。

//1、数组解构

let a = 1b = 2c = 3

//console.log(a, b, c)

// ES6

let [xyz] = [123]

//console.log(x, y, z)

//2、对象解构

let user = {name: 'Helen'age: 18}

// 传统

let name1 = user.name

let age1 = user.age

console.log(name1age1)

// ES6

let { nameage } =  user  //注意:结构的变量必须是user中的属性

console.log(nameage)

 

模板字符串

模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。

//字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。

let name = "lucy"

let age = 20

let info = `My name is ${name} ,I am ${age+1}`

console.log(info)

 

声明对象简写

//传统方式定义对象

const name = "lucy"

const age = 20

const user1 = {name:name,age:age}

//console.log(user1)

//es6

const user2 = {name,age}

console.log(user2)

 

 

对象拓展运算符

拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。

//对象复制

let person1 = {name: "Amy"age: 15}

let someone1 = { ...person1}

//console.log(someone1)

//对象合并

let age = {age: 15}

let name = {name: "Amy"}

let person2 = {...age, ...name}

console.log(person2)

 

 

箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是:

参数 => 函数体

箭头函数多用于匿名函数的定义

//传统方式定义函数

var f1 = function(a) {

    return a

}

//console.log(f1(3))

//es6使用箭头函数定义

//参数 => 函数体

var f2 = a => a

//console.log(f2(4))

 

 

使用箭头函数

// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。

var f3 = function(m,n) {

    return m+n

}

//es6 

var f4 = (m,n=> m+n

console.log(f4(4,5))

 

(3)Vue-入门

  Vue.js 是一款流行的 JavaScript 前端框架,目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层,同时,它也能方便地获取数据更新,实现视图与模型的交互。

首先需要引入vue.js   :才能使用vue属性

 

单向和双向绑定指令: 

 

 

双向绑定

 

 在双向绑定输入框中输入其他地方也跟着变化:

 

 

 绑定事件:

 

 点击事件绑定:

 简写事件绑定:

 

Vue:条件指令

 

 

Vue-列表渲染(循环指令) 

 

 

 

 

(4) Vue的生命周期

 

 

 

 

 (5)Vue-Axios的使用

 

axios的作用

axios是独立于vue的一个项目,可以用于浏览器和node.js中发送ajax请求

 

 

 

 

 

 

 

 

 

 

 

 (6)ElemmentUI介绍

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页面快速布局和构建

 

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

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

相关文章

Java项目:SpringBoot课程在线学习系统

作者主页:源码空间站2022 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 采用SpringBootSpringMybatisThyeleaf实现的在线学习系统,一共2个角色:管理员与学生。 管理员角色功能: 登录…

Unreal Engine中的Actor:理解、生成与消亡

目录 谈谈Actor 生成(实例化)Acotr StaticClass/UClass:类模板/类的快照 Actor的生命周期 Actor的消亡 Destroy:标记删除 SetLifeSpan:设置存活时间 Destroyed:消亡Actor的通知 EndPlay&#xff1…

chatGPT对接微信

代码地址: https://github.com/jeffcail/go-wecaht-bot 喜欢的帅锅美女可以点个star哦😊 背景 玩一玩chatGPT。只因GPT你太美~~~ wechat SDK go get github.com/eatmoreapple/openwechat实现功能 自动通过好友申请用户私聊回…

我的转行之路

我一直想为自己没有继续从事编程,而转到铁路行业找一个合理的理由,来掩饰我的愚蠢。我日思夜想终于找到了更合理更有说服力的理由,十个字,目光的短浅,认知的缺乏。 那个时候,只被一毕业就能拿到不错的工资…

Python还有发展前景吗?现在该怎么去学习?

从2008年开始Python就突然火了起来,腾讯最近组织了一个大型Python技术交流峰会,由此可见Python现在已经到了我们不能想象的境界,一切的步伐都要跟着大公司走,腾讯这样级别的公司都这样重视Python技术,可见Python的发展…

什么样的人适合当黑客?

别说我没资格说这些话或是我的话是废话(对你来说是,对别人呢?),我想任何人都有资格尽自己的能力帮助别人. 首先,看到这篇文章,觉得好长,好烦,懒的看,走人… OK,我觉的你不适合做黑客! 07年我考上大学,选择了机械制造及其自动化(数控编程&a…

【linux kernel】linux内核裁剪随想

为什么需要裁剪? 首先,裁剪并不一定是缩小内核镜像的大小,而是移植和适配。内核支持的特性很多,站在项目的角度,不一定全部需要这些特性和功能。这时候就需要将不需要的特性和功能剔除,随着这个过程的进行…

LabVIEW在两台计算机之间传输数据

LabVIEW在两台计算机之间传输数据 有几种网络协议可用于完成此任务。使用正确的网络协议白皮书将完成为应用选择正确协议的任务。它涵盖了控制和监视应用中最常用的通信模型,并根据配置、性能、易用性等推荐最适合每种情况的网络协议。 参考的白皮书重点介绍了三种…

【MAX7800与ESP8266mcu通讯关键字控制】

【MAX7800与ESP8266mcu通讯关键字控制】 1. 前言2. 实验条件2.1 硬件条件2.2 软件条件3. 程序编写3.1 ESP8266程序解剖3.2 MAX7800程序解剖4. 实验效果4.1 esp8266打印如下4.2 max7800打印如下5. 小结1. 前言 前期搭好MAX7800 的eclipse和ESP82666的Arduino开发环境,现在开始…

98.第十九章 MySQL数据库 -- MySQL数据库架构、存储引擎、服务器配置和状态(八)

4.MySQL架构和性能优化 MySQL是C/S 架构的,connectors是连接器;可供Native C API、JDBC、ODBC、NET、PHP、Perl、 Python、Ruby、Cobol等连接mysql;ODBC叫开放数据库(系统)互联,open database connection; JDBC是主要用于java语言利用较为底层的驱动连接数据库;以上这…

[网络工程师]-VLAN

1、VLAN基础 虚拟局域网(Virtual Local Area Network,VLAN)是一种将局域网设备从逻辑上划分成一个个网段,从而实现虚拟工作组的数据交换技术。VLAN技术主要应用在三层交换机中。 VLAN是基于物理网络构建的逻辑子网,所以…

Java项目:springboot在线选课系统

作者主页:源码空间站2022 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 后端技术包含springbootmybatisspring securitymysqlredis 前端技术包含 semanticUI thymeleaf模板引擎 使用教程 1. 下载项目之后 等待ma…

网络存储ISCSI实战

一、网络存储 目前应用最为广泛的两种数据存储设备:NAS与SAN 1、NAS NAS的全称是Network-attached storage,即网络附加存储,并不需要单独的网络用于存储IO,更适用于中小型的存储解决方案。 NAS设备通常是一个完整的服务器架构…

天天说手撕红黑树?你真的能撕的下来吗?(详细解释+代码注释)

目录 一、你还记得什么是红黑树吗? 二、AVL树与红黑树的比较 三、模拟实现红黑树 3.1、红黑树的定义 3.2、插入结点 3.2.1、情况一 3.2.2、情况二 3.2.3、情况三 四、红黑树的验证 4.1、检查中序遍历是否有序 3.2、检查是否出现两个连续的红色结点 4.3、检…

数据护航 安全立方—海泰方圆数据安全治理立体式框架

发展数据安全是必然趋势 2022年6月,中央全面深化改革委员会第二十六次会议强调,“数据基础制度建设事关国家发展和安全大局,要维护国家数据安全,保护个人信息和商业秘密,促进数据高效流通使用、赋能实体经济&#xff0…

【JVM】jvm虚拟机中的堆

jvm虚拟机中的堆一、JVM体系结构二、Java堆简介2.1 堆的特点2.2 堆空间细分2.3 堆空间的分代思想2.4 堆的默认大小三、JVM堆内存常用参数四、垃圾回收算法(GC,Garbage Collection)4.1 标记-清除(Mark-Sweep)4.2 复制&a…

【代码审计-1】PHP无框架项目SQL注入

代码审计 教学计划:审计项目漏洞Demo->审计思路->完整源码框架->验证并利用漏洞 教学内容:PHP,JAVA网站应用,引入框架类开发源码,相关审计工具及插件使用 必备知识点:环境安装搭建使用&#xff0c…

python是什么鬼?为什么学会他就能月入过万,它真的这么牛吗?

为什么那么多人选择学习python? Python在人工智能、大数据、自动化运维、全栈开发等方面具有独特的优势。随着Python继续占据编程语言主流的趋势,全国各城市的招聘岗位和薪酬将大幅增加。此外,随着人工智能在中国的投资和规划,对…

使用docker compose一键部署多个服务

docker compose 是 docker 官方的开源项目,用来实现对 docker 容器集群的快速编排 下载安装 官网下载地址:点这里 我用的是云服务器,所以就直接用yum安装了,直接执行这两条命令,等安装结束后查看版本,看到…

SpringCloud系列(六)Feign 客户端的配置及使用

❓Feign 是什么? 🙊Feign 是一个声明式的 http 客户端, 其主要的作用就是帮助我们实现 http 的请求发送, 正如官网所说, Feign使编写Java http客户端更容易; ❓❓为什么要用 Feign? 🙊🙊如在未学习 Feign 之前, 我们利用的是 RestTemplate …