VUE笔记（一）初识vue

一、vue的简介

1、什么是vue

官网地址:Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

  • 构建用户界面：之前在学习vue之前通过原生js对DOM操作进行构建用户界面的

使用原生js构建用户界面的不足
- 没有规范，统一性不强，不利于团结写作开发
- 大量的DOM操作，开发效率很低
- 没有性能优化

  • 渐进式：声明式渲染+组件系统(vue的核心)+客户端路由+状态机+工具链等部分组成

渐进式：你可以在自己的项目只使用vue的一部分内容，不需要全部使用，这个vue不强制随着项目的变大，大家可以将页面中公共部分封装成组件，然后调用组件，这样可以提高开发效率在随着项目的变大，需要客户端路由+状态机

  • 框架：框架是应用程序的半成品，框架内已经将公共的部分完成了，程序使用框架的好处

    • 快速的提高开发效率

    • 程序员不用关注非核心内容，只关注业务本身

    • 框架规范行为，让代码统一性变得更强

2、特点

优点

  • 声明式编程，不需要程序员编写大量的DOM就能够完成页面的构建

  • 使用组件模式，可以让代码进行复用，增强代码的可维护性

  • 采用虚拟DOM+diff，使得按需更新，不需要构建全部DOM操作

  • vue是一个轻量级的一个框架，相对与其他框架更好容易上手

缺点

  • 首屏加载速度慢

  • VUE的网站不利于SEO优化

3、vue的作者

尤雨溪（Evan You），前端框架 Vue.js 作者，独立开源开发者，现居美国新泽西。曾就职于 Google Creative Labs 和 Meteor Development Group。由于工作中大量接触开源的 Java 项目，最后自己也走上了开源之路，现在全职开发和维护 Vue.js。

4、vue版本情况

  • 2013年Evan You收到了Anglur启发，开发出来了Seed，后来在同年12月份，将Seed改名为vue,当时的版本是0.6.0

  • 2014年正式对外开放，版本是0.8.0

  • 2015年12月份，vue1.0版本出现

  • 2016年12月1日，vue2.0版本

  • 2020年9月18日，vue3.0版本出现

二、vue环境的搭建

vue环境的搭建有两种方式，第1种方式：使用script标签的方式引入到网页上，这种方式比较使用学习使用，不太使用实际开发，第2种方式：使用vuecli脚手架方式来进行项目搭建，这种方式比较适合实际企业开发用

1、使用script方式引入

具体的实现步骤有如下

  • 在html页面中通过script标签的方式引入vue.js

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  • 在body标签之间定义一个div元素，用来作为vue内容渲染的容器

<div id="app"></div>

  • 创建vue实例

 <script>/*通过new的方式调用构造函数来进行创建vue实例Vue的构造函数的参数是一个对象，该对象中的属性就是vue的选项，这里边的选项都是固定的el:vue挂载目标，这里的值是目标挂载点的选择器data:可以是一个对象，也可以是一函数对象的属性是自定义的*/const vm=new Vue({el:'#app',data:{message:'Hello Vue!~'}})</script>

data选项的后面也可以是一个函数

 /*通过new的方式调用构造函数来进行创建vue实例Vue的构造函数的参数是一个对象，该对象中的属性就是vue的选项，这里边的选项都是固定的el:vue挂载目标，这里的值是目标挂载点的选择器data:可以是一个对象，也可以是一函数对象的属性是自定义的*/const vm=new Vue({el:'#app',data:function(){return{message:'Hello Vue!!!!!!!'}}})

  • 在HTML页面中渲染vue实例的data数据

如果要渲染vue中的data数据的方式很多，但是最常见的是一个插值表达式（双花括号）

 <div id="app">{{message}}</div>

2、使用vue/cli命令行工具安装

  • 首先安装vue/cli

npm i -g @vue/cli

  • 创建vue项目

vue create 项目名称

  • 手动安装

Vue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)
> Manually select features

  • 安装相关依赖包

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support( ) Router( ) Vuex
>(*) CSS Pre-processors( ) Linter / Formatter( ) Unit Testing( ) E2E Testing

  • 选择vue的版本

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with3.x
> 2.x

  • 选择css预处理语言

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)LessStylus

  • 选择配置文件

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json

  • 是否保存预设

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

  • 启动项目

npm run serve

  • 运行项目

3、vue/cli图形界面方式

步骤如下

  • 在终端上输入如下命令打开图形界面方式

vue ui

三、目录结构

1、目录结构的分析

project
|- node_modules:第三方依赖包
|- public:存放静态资源的，这里的静态资源不会被webpack编译|-favicon.ico:icon图标|-index.html:项目index.html文件
|- src:源代码|-assets:静态资源，会被webpack所编译|-components:自定义组件|-App.vue:项目的根组件|-main.js:vue项目的入口文件
|-.gitignore：git上传的忽略文件
|-babel.config.js:babel的配置文件
|-jsconfig.js:js的配置文件
|-package.json:项目配置文件
|-vue.config.js:在文件中可以对webpack的配置进行修改

2、vue项目运行流程

项目启动后，首先运行的是main.js

//导入vue第三依赖包
import Vue from 'vue'
//导入根组件
import App from './App.vue'
//关闭生成提示
Vue.config.productionTip = false
//创建vue实例
//vue的选项
//render:vue2的渲染函数
new Vue({el:'#app',render: h => h(App),
})

注意点：vue2中设置目标挂载点有两种方式

new Vue({el:'#app',render: h => h(App),
})

还有一种方式

new Vue({render: h => h(App),
}).$mount('#app')

3、单文件组件

凡是以后缀.vue结尾的都成称为单文件组件，单文件组件有三个部分组成

  • template:该标签之间存放的HTML代码，用来定义结构的

  • script:编写的js代码

  • style:编写的css代码

<template><h1>Hello <span>{{name}}</span></h1>
</template><script>
export default{data:function(){return{name:'Giles'}}
}
</script><style lang="scss">h1{span{color:red}}
</style>

如上代码，如果要向让其有高亮显示和智能提示需要安装vetur插件

四、打包与部署

开发完的vue项目都必须打包并部署到服务器上

部署vue到nginx服务器上的步骤

  • 在vue.config.js文件中需要配置部署路径，具体配置如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,publicPath:'./'    
})

  • 在终端上进行打包，具体打包的命令如下

npm run build

  • 将生成dist目录进行重命名，并且上传到到外网服务器(阿里云)

这里我将目录上传到/opt目录下

  • 在/etc/nginx/config.d/default.confi下的server节点下进行如下配置

location /first {alias /opt/first;index index.html;}

  • 执行如下命令

ps aux|grep nginx
killall -9 nginx

  • 重新启动nginx服务器

/usr/sbin/nginx

五、vue.config.js的配置

如果要进行webpack的配置可以在vue.config.js中进行

const { defineConfig } = require('@vue/cli-service')
module.exports =defineConfig({//部署应用包时的基本 URLpublicPath:'./',//更改打包后的输出目录名称outputDir:'build',//设置放静态资源的目录assetsDir:'static',//指定生成的index.html的输出路径indexPath:'home.html',//设置devServer的选项devServer:{//自动打开页面open:true,host:'127.0.0.1',port:'8888'}
})

六、插值表达式

1、什么叫插值表达式

vue中的内容如果要动态的渲染到页面之上，可以在<template>部分使用插值表达式动态渲染vue中data选项的数据

2、插值表达式语法

{{插值表达式}}

插值表达内容如下

  • 常量

  • 变量

  • 表达式(运算符+操作数)

<template><!--在vue2template模板中的根元素只能是一个，不能是多个--><div><div>姓名:{{name}}</div><div>年龄:{{38}}</div><div>性别:{{gender==1?'男':'女'}}</div><div>爱好:{{hobby.slice(0,1)}}</div><div>求和:{{nums.reduce((prev,cur)=>prev+cur,0)}}</div></div>
</template><script>
export default {data(){return{name:'Giles',gender:1,hobby:['basketball','football','apple'],nums:[10,20,30,59,89,67]}}
}
</script><style></style>

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

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

相关文章

Kubernetes(K8S)使用PV和PVC做存储安装mysql

Kubernetes(K8S)使用PV和PVC做存储安装mysql

Kubernetes使用PV和PVC做存储安装mysql 环境准备什么是PV和PVC环境准备配置nfs安装nfs配置nfs服务端 创建命名空间配置pv和pvcpv的yaml文件pvc的yaml文件 部署mysql创建mysql的root密码的secret创建mysql部署的yaml部署mysql链接mysql外部链接内部链接 环境准备 首先你需要一个…
阅读更多...
git 基础入门

git 基础入门

Git基础入门 Git是一个分布式 版本管理系统&#xff0c;用于跟踪文件的变化和协同开发。 版本管理&#xff1a;理解成档案馆&#xff0c;记录开发阶段各个版本 分布式&集中式 分布式每个人都有一个档案馆&#xff0c;集中式只有一个档案馆。分布式每人可以管理自己的档案…
阅读更多...
HodlSoftware-免费在线PDF工具箱 加解密PDF 集成隐私保护功能

HodlSoftware-免费在线PDF工具箱 加解密PDF 集成隐私保护功能

HodlSoftware是什么 HodlSoftware是一款免费在线PDF工具箱&#xff0c;集合编辑 PDF 的简单功能&#xff0c;可以对PDF进行加解密、优化压缩PDF、PDF 合并、PDF旋转、PDF页面移除和分割PDF等操作&#xff0c;而且工具集成隐私保护功能&#xff0c;文件只在浏览器本地完成&…
阅读更多...
SQLI-labs-第一关

SQLI-labs-第一关

知识点&#xff1a;单引号字符型注入 思路&#xff1a; 1、根据提示&#xff0c;为get注入&#xff0c;在url中输入内容 2、判断注入点 输入?id1&#xff0c;显示数据库语句错误&#xff0c;说明这里存在sql注入漏洞 输入?id1‘ and 11 -- &#xff0c;回显正常&#xff0c…
阅读更多...
webpack5（一）

webpack5（一）

什么是webpack webpack是一个静态资源打包工具&#xff0c;它会以一个或者多个文件作为打包的入口&#xff0c;将整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件&#xff0c;可以在浏览器端运行。一般将 webpack 输出的文件称为 bandle 。 …
阅读更多...
Linux操作系统--网络配置(2)

Linux操作系统--网络配置(2)

在上一次课程中，我们对Linux课程中的网络有了一个了解，下面我们来看看如何配置网络IP。 1.配置网络IP地址 在Linux操作系统中，比如搭建集群，这一个时候如果使用DHCP实现动态IP的分配，那么如果需要访问管理其中一个节点操作时候，就需要通过其IP访问。这一个时候还得去查看…
阅读更多...
RabbitMQ死信队列

RabbitMQ死信队列

RabbitMQ死信队列 1、过期时间TTL 过期时间TTL表示可以对消息设置预期的时间&#xff0c;在这个时间内都可以被消费者接收获取&#xff1b;过了之后消息将自动被 删除。RabbitMQ可以对消息和队列设置TTL&#xff0c;目前有两种方法可以设置&#xff1a; 第一种方法是通过队列…
阅读更多...
广汽埃安，新能源扛把子？继比亚迪、理想之后实现正“盈利”

广汽埃安，新能源扛把子？继比亚迪、理想之后实现正“盈利”

根据广汽集团日前披露的2023年半年度报告&#xff0c;广汽埃安在今年的六七月份连续两个月实现盈利&#xff0c;成为继比亚迪、理想之后&#xff0c;第三家实现盈利的国产新能源汽车品牌。这一成绩进一步表明广汽埃安在国内新能源汽车市场的竞争力以及其持续增长的势头。报告显…
阅读更多...
PHP教学资源管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

PHP教学资源管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 教学资源管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 源码 https://download.csdn.net/download/qq_41221322/88260480 论文 https://downl…
阅读更多...
Matlab图像处理-减法运算

Matlab图像处理-减法运算

减法运算 图像减法也称为差分方法&#xff0c;是一种常用于检测图像变化及运动物体的图像处理方法。常用来检测一系列相同场景图像的差异&#xff0c;其主要的应用在于检测同一场景下两幅图像之间的变化或是混合图像的分离。 差影法 将同一景物在不同时问拍摄的图像或同一景…
阅读更多...
MATLAB软件安装包分享（附安装教程）

MATLAB软件安装包分享（附安装教程）

目录 一、软件简介 二、软件下载 一、软件简介 MATLAB是Matrix Laboratory的缩写&#xff0c;是一款由美国MathWorks公司开发的商业数学软件。它主要用于进行数值计算、数据分析、可视化、算法开发、模拟仿真等多个领域。MATLAB具有高度的灵活性和开放性&#xff0c;可以为用…
阅读更多...
Flink流批一体计算（18）：PyFlink DataStream API之计算和Sink

Flink流批一体计算（18）：PyFlink DataStream API之计算和Sink

目录 1. 在上节数据流上执行转换操作&#xff0c;或者使用 sink 将数据写入外部系统。 2. File Sink File Sink Format Types Row-encoded Formats Bulk-encoded Formats 桶分配 滚动策略 3. 如何输出结果 Print 集合数据到客户端&#xff0c;execute_and_collect…
阅读更多...
水库大坝安全监测的主要内容包括哪些？

水库大坝安全监测的主要内容包括哪些？

在水库大坝的实时监测中&#xff0c;主要任务是通过无线传感网络监测各个监测点的水位、水压、渗流、流量、扬压力等数据&#xff0c;并在计算机上用数据模式或图形模式进行实时反映&#xff0c;以掌握整个水库大坝的各项变化情况。大坝安全监测系统能实现全天候远程自动监测&a…
阅读更多...
ruoyi-vue-plus 配置邮箱

ruoyi-vue-plus 配置邮箱

ruoyi-vue-plus 配置邮箱 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对你有帮助请…
阅读更多...
当我焦虑时，我从CSDN的博主身上学到了什么？

当我焦虑时，我从CSDN的博主身上学到了什么？

文章目录 前言一、思考为什么会产生差距1.1 懒惰1.2 没有合理的规划学习时间 二、我该如何做&#xff1f;2.1 认真生活规律作息2.2 做事就是0和1 结语 前言 我们在学习的过程当中总会遇到一些比我们自己优秀的人&#xff0c;不论你是在更好的985或211院校学习&#xff0c;还是…
阅读更多...
Netty-01-快速掌握Java NIO

Netty-01-快速掌握Java NIO

文章目录 一、从传统I/O到Java NIO二、NIO 三大组件1. Channel&#xff08;通道&#xff09;1.1. FileChannel1.1.1. 获取 FileChannel1.1.2. FileChannel 读取 文件1.1.3. FileChannel写⽂件1.1.4. 通道之前传输数据-transferFrom1.1.5. 通道之前传输数据-transferTo 1.2. Soc…
阅读更多...
学习Linux基础知识与命令行操作

学习Linux基础知识与命令行操作

开始学习Linux系统前&#xff0c;首先要掌握计算机基础知识&#xff0c;了解硬件、操作系统、文件系统、网络和安全等概念。对这些基础知识的了解能够帮助理解Linux系统的概念和功能。 在Linux系统中&#xff0c;文件和目录是数据管理的基本单位。每个文件和目录都有一个称为&…
阅读更多...
Unity实现倒计时和获取系统时间

Unity实现倒计时和获取系统时间

一：创建UGUI 1.创建Canvas画布组件，调节Canvas画布的分辨率等其他设置。我们可以把视图设置为2D模式下。 2.创建Text文本组件，取名为Timer计时器，我们调整Text文本组件的大小，用锚点设置Text文本组件的位置，并且设置好Text文本组件的颜色。 3.我们再创建一个Text文…
阅读更多...
Matlab怎么引入外部的latex包？Matlab怎么使用特殊字符？

Matlab怎么引入外部的latex包？Matlab怎么使用特殊字符？

Matlab怎么引入外部的latex包&#xff1f;Matlab怎么使用特殊字符&#xff1f; Matlab怎么使用特殊字符&#xff1f;一种是使用latex方式&#xff0c;Matlab支持基本的Latex字符【这里】&#xff0c;但一些字符需要依赖外部的包&#xff0c;例如“&#x1d53c;”&#xff0c;需…
阅读更多...
android2022配置opencv4android480

android2022配置opencv4android480

1&#xff0c;安装android studio2022。 2&#xff0c;下载OPENCV4ANDROID&#xff0c;解压到任意盘中。 3&#xff0c;File->New->New Project&#xff0c;选择Empty Views Activity。再选择语言&#xff0c;本文选择JAVA。 4&#xff0c;File->New->Import Modu…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023