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

「网页开发|前端开发|Vue」04 快速掌握开发网站需要的Vue基础知识

本文主要介绍使用Vue进行前端开发的一些必备知识,比如:Vue应用实例,Vue的组件概念,模板语言和模板语法,计算属性,路由配置等等。

文章目录

  • 本系列前文传送门
  • 前言
  • 一、Vue实例:项目入口
  • 二、模板语言:Vue如何编写页面
  • 三、模板语法:类编程语言的设计
  • 四、计算属性与监听属性
    • **计算属性具体用法如下:**
    • 监听属性具体用法如下:
  • 五、生命周期与Hook函数
  • 本系列下一篇文章传送门

本系列前文传送门

  • 「网页开发|前端开发|Vue」01 快速入门:快速写一个Vue的HelloWorld项目
  • 「网页开发|前端开发|Vue」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转
  • 「网页开发|前端开发|页面布局」03 学会够用的CSS,实现任意你想要的页面布局

前言

在了解Vue项目的文件结构、如何通过路由拥有多页面网站以及如何去实现单个页面的元素布局之后,我们就需要去实现具体单个页面的内容了。

因此我们就需要在使用html编写页面的基础上,掌握一些vue的特性来帮助编写页面内容以及页面数据的处理和变化。

一、Vue实例:项目入口

我们要使用Vue来搭建网站,就需要实例化一个Vue对象来代表一个Vue应用,如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
new Vue({......
})

我们来看一个具体的网站Vue实例:

<div id="app"><p>{{message}}</p>
</div><script type="text/javascript">var vm = new Vue({el: '#app',data: {message: "Hello Vue World!"},methods: {printMessage: function() {console.log(this.message)}}})
</script>

这里Vue({})中有三个参数:el, data, methods:

  • el代表要挂在的HTML元素的id
  • data初始化了一些数据给页面,这里初始化了变量message的值为Hello Vue World!,而html代码中用{{ message }}表示这里使用message的值作为渲染内容
  • method则是用来定义供页面使用的方法,这里定义了printMessage()方法,调用后会在控制台输出message的值

一个Vue应用代表一个网站,一个网站一般会有多个页面,对应到Vue中成为多个组件。一般来说,每个页面都是应用的一个组件,页面中需要被重复用的的部分也会单独拆分成一个组件。

我们在「网页开发|前端开发|Vue」01 快速入门:快速写一个Vue的HelloWorld项目中已经探索了使用脚手架工具生成的标准化Vue项目文件的结构以及各个代码之间的流转,可以回看加深一下理解。

二、模板语言:Vue如何编写页面

我们一般会将 Vue 组件定义在一个单独的 .vue 文件中,叫做单文件组件。

Vue扩展了HTML,称之为模板。任何合乎规范的 HTML 都是合法的 Vue 模板,在一个XXXX.vue文件中,会有<template></template>标签,在其中是HTML代码(这些HTML将最终被渲染成浏览器页面),如下:

<template><div class="hello"><h1>Hello World</h1></div>
</template>

这使得如果熟悉html语言,可以快速开发vue网站应用的开发。

在同一个XXXX.vue文件中,会有CSS代码,默认这些样式代码只针对这个文件中的HTML元素有效,如下:

<style scoped>
h1 {font-weight: normal;
}
</style>

这里的scoped属性是一个可选属性,加上之后会自动添加一个唯一的 attribute (比如 data-v-21e5b78) 为这个文件中内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 h1[data-v-21e5b78]

同样的,XXXX.vue文件中也会有javascript代码,以<script></script>包括起来,如下:

<script>
export default {name: 'HelloWorld',data() {return {msg: 'Hello Vue World!'}}
}
</script>

总而言之,我们只需要记住Vue所谓的模板就是将一个页面的HTML, CSS以及javascript代码单独放到一起的XXXX.vue文件。当我们要编写一个页面的时候,我们只需要在对应的.vue文件中编写代码即可。

我们在「网页开发|前端开发|Vue」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转 中已经介绍了如何将展示一个页面的网站,通过路由设计拓展成展示多个页面的网站,可以回看加深理解。

三、模板语法:类编程语言的设计

因为Vue的模板可以理解是扩展了的HTML,Vue提供了一些类似编程语言语法关键字的模板语法来帮助开发,也叫做指令。

Vue官网介绍,一个指令的本质是模板中出现的特殊标记,让处理模板的库知道需要对这里的 DOM 元素进行一些对应的处理。

指令的前缀是默认的 v-,常见指令如下:

  • v-if: 条件判断,当if条件为true时元素才会存在(注意,是直接在页面源代码中不存在这个元素的代码)。当有多个条件分支的时候会搭配v-else-if, v-else来使用。
<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>type is not A or B or C</div>
</div>
  • v-show: 与v-if相似,用来控制是否展示某些元素。但v-if结果为false的时候页面源代码里不会有对应元素的代码,但是v-showfalse的时候,页面源代码中也会有对应元素的代码,只是我们在浏览器渲染的页面中看不到而已。
  • v-for:
    • for循环,主要用来处理数组,通过遍历来展示多个元素
    • 注意,比如希望得到一个<ul>中有多个<li>的结果,v-for应该写在<li>
  • v-bind:
    • 当元素属性(比如class)的值需要用到data里面定义的变量时,需要使用v-bind来标记
    • 比如<div v-bind:class="{ isActive?'active':'default' }">表示,如果当变量isActive的值为true,则class='active',否则class='default'
    • v-bind:class="{ isActive?'active':'default' }" 也可以简写成:class="{ isActive?'active':'default' }"
  • v-on:
    • v-bind类似,v-bind是在元素属性上绑定逻辑,v-on则是在元素事件上绑定逻辑。
    • 比如<button v-on:click="counter += 1">增加 1</button>是给buttonclick事件绑定了counter+=1的逻辑,使得每次点击Button都会将counter的值加一
    • v-on:click="counter += 1"可以简写成@click="counter += 1"
  • v-model: 用来在表单控件元素上(比如input)绑定某个数据变量,然后就可以通过表单控件来修改变量的值。
<div id="app"><p>input 元素:</p><input v-model="message" placeholder="编辑我……"><p>消息是: {{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'input what you want',}
})
</script>

我们看到这里在通过new Vue({...})创建了一个实例,然后实例化的同时初始化了变量message的值为input what you want,然后通过v-model将变量message绑定到<input>上,这个时候如果我们修改输入框中的内容,这个新的内容就会成为变量message新的值,相当于提供了通过用户输入修改变量值的途径,或者说提供了存储用户输入的途径

四、计算属性与监听属性

直接在模板中的用变量的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护,于是就有了计算属性和监听属性:

  • 计算属性:我们可以指定通过一个变量A,去计算变量B,当A发生变化的时候,B会跟着重新计算。
  • 监听属性:指定监听一个变量A,当变量A变化时,都会执行编写好的逻辑。这里的逻辑可以是计算也可以是其他的。
  • 计算属性是为了及时更新值(计算逻辑只是得到值的手段),而监听属性是为了执行预定逻辑。

计算属性具体用法如下:

<template>
<div id="app"><button @click="count += 1">增加 1</button><p>Count: {{ count }}</p><p>Double Count: {{doubleCount}}</p>
</div>
</template>
<script>
export default {data() {return {count:1}},computed: {// 每当 count 改变时,这个函数就会执行doubleCount() {return this.count * 2}}
}
</script>

这里当我们点击button按钮使得变量count加一之后,doubleCount会重新计算。
注意,这里在computeddoubleCount函数体中要访问data()中定义的count,需要使用this来定位,不然会无法找到变量从而抛出如下的ReferenceError错误:

vue.esm.js:3767 ReferenceError: count is not definedat VueComponent.doubleCount (HelloWorld.vue:19:1)at Watcher.get (vue.esm.js:4164:1)at Watcher.evaluate (vue.esm.js:4265:1)at VueComponent.computedGetter [as doubleCount] (vue.esm.js:4490:1)at Object.get (vue.esm.js:706:1)at Proxy.render (HelloWorld.vue:16:1)at Vue._render (vue.esm.js:2540:1)at VueComponent.updateComponent (vue.esm.js:2980:1)at Watcher.get (vue.esm.js:4164:1)at new Watcher (vue.esm.js:4154:1)

监听属性具体用法如下:

<template><div id="app"><button @click="count += 1">点击</button><p>Count: {{ count }}</p></div>
</template>
<script>
export default {data() {return {count: 1}},watch: {// 每当 count 改变时,这个函数就会执行count(newValue, oldValue) {alert(`count从 ${oldValue} 增加到了 ${newValue}`)}}
}
</script>

这里watch中定义的count监听逻辑会有两个参数代表原值和新值,我们可以在逻辑中使用这两个值做一些判断或者计算。

五、生命周期与Hook函数

生命周期是一个类比人类生命的技术术语,用来表示元素或者说组件从被创建、初始化、渲染更新、再次渲染、卸载(移除)等一系列过程。

Vue 组件完整的生命周期包括,创建组件、初始化数据、编译模板、挂载 DOM、渲染、更新、再次渲染、卸载等一系列过程。

在这些过程的前后我们都要执行相应的方法,这些方法就叫做Hook(钩子)函数。而在Vue 组件的生命周期中有 8 个常用的钩子函数,我们可以在刚才的代码中加入各个生命周期Hook函数来测试效果,如下:

<template><div id="app"><button @click="count += 1">点击</button><p>Count: {{ count }}</p></div>
</template>
<script>
export default {data() {return {count: 1}},watch: {// 每当 count 改变时,这个函数就会执行count(newValue, oldValue) {alert(`count从 ${oldValue} 增加到了 ${newValue}`)}},beforeCreate() {console.log(`the vue is beforeCreate.`)},created() {console.log(`the vue is created.`)},beforeMount() {console.log(`the vue is beforeMount.`)},mounted() {console.log(`the vue is mounted.`)},beforeUpdate() {console.log(`the vue is beforeUpdate.`)},updated() {console.log(`the vue is updated.`)},beforeDestroy() {console.log(`the vue is beforeDestroy.`)},destroyed() {console.log(`the vue is destroyed.`)}
}
</script>

回到浏览器页面使用F12打开开发者工具,可以在console控制台中看到如下输出:

the vue is beforeCreate.
the vue is created.
the vue is beforeMount.
the vue is mounted.

点击按钮之后,可以看到console中额外有如下输出信息:

the vue is beforeUpdate.
the vue is updated.

所以我们可以看到,当浏览器执行代码进行页面渲染的时候,会依次执行创建组件的Hook函数(beforeCreate()created())和挂载的Hook函数(beforeMount()mounted())。

当我们进行点击或者其他交互行为时,页面元素或组件更新进行再次渲染,会触发更新的Hook函数(beforeUpdate()updated()),而当卸载组件时才会触发卸载的Hook函数(beforeDestroy()destroyed()

以上就是在Vue开发过程中主要会使用到的内容,至于其他更加细致针对具体应用场景的用法,直接在遇到具体开发场景时,查阅Vue文档即可。


本系列下一篇文章传送门

  • 「网页开发|前端开发|Vue」05 Vue实战:从零到一实现一个网站导航栏

写文不易,如果对你有帮助的话,来一波点赞、收藏、关注吧~👇

相关文章:

「网页开发|前端开发|Vue」04 快速掌握开发网站需要的Vue基础知识

本文主要介绍使用Vue进行前端开发的一些必备知识&#xff0c;比如&#xff1a;Vue应用实例&#xff0c;Vue的组件概念&#xff0c;模板语言和模板语法&#xff0c;计算属性&#xff0c;路由配置等等。 文章目录 本系列前文传送门前言一、Vue实例&#xff1a;项目入口二、模板语…...

解决Redis分布式锁主从架构锁失效问题的终极方案 含面试题

面试题分享 2023最新面试合集链接 2023大厂面试题PDF 面试题PDF版本 java、python面试题 项目实战:AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 史上最全文档AI绘画stab…...

建站系列(三)--- 网络协议

目录 相关系列文章前言一、定义二、术语简介三、协议的组成要素四、网络层次划分五、常见网络协议划分六、常用协议介绍&#xff08;一&#xff09;TCP/IP&#xff08;二&#xff09;HTTP协议&#xff08;超文本传输协议&#xff09;&#xff08;三&#xff09;SSH协议 相关系列…...

jetson orin nx无显示器启动

sudo apt-get install xserver-xorg-core-hwe-18.04 sudo apt-get install xserver-xorg-video-dummy在 /usr/share/X11/xorg.conf.d/ 中添加 xorg.conf 文件。 Section "Monitor"Identifier "Monitor0"HorizSync 28.0-80.0VertRefresh 48.0-75.0Modeline…...

【APUE】标准I/O库

目录 1、简介 2、FILE对象 3、打开和关闭文件 3.1 fopen 3.2 fclose 4、输入输出流 4.1 fgetc 4.2 fputc 4.3 fgets 4.4 fputs 4.5 fread 4.6 fwrite 4.7 printf 族函数 4.8 scanf 族函数 5、文件指针操作 5.1 fseek 5.2 ftell 5.3 rewind 6、缓冲相关 6.…...

es6---模块化

main.js import { bar } from "./module1"; import module2 from "./module2"; bar() module2()module1.js // 多变量导出&#xff0c;导入变量需要变量名一对一映射 export const module1module1 export function bar(params) {console.log(module1) }m…...

【项目 计网12】4.32UDP通信实现 4.33广播 4.34组播 4.35本地套接字通信

文章目录 4.32UDP通信实现udp_client.cudp_server.c 4.33广播bro_server.cbro_client.c 4.34组播multi_server.cmulti_client.c 4.35本地套接字通信ipc_server.cipc_client.c 4.32UDP通信实现 udp_client.c #include <stdio.h> #include <stdlib.h> #include <…...

创建简单的 Docker 数据科学映像

推荐&#xff1a;使用NSDT场景编辑器快速搭建3D应用场景 为什么选择 Docker for Data Science&#xff1f; 作为一名数据科学家&#xff0c;拥有一个标准化的便携式分析和建模环境至关重要。Docker 提供了一种创建可重用和可共享的数据科学环境的绝佳方法。在本文中&#xff…...

angualr:CSS一个div内两个子元素的高度自适应

问题&#xff1a; 如题 参考&#xff1a; CSS一个div内两个子元素的高度自适应-腾讯云开发者社区-腾讯云...

Java基础之static关键字

目录 静态的特点第一章、静态代码块第二章、静态属性第三章、静态方法调用静态方法时静态方法中调用非静态方法时 第四章、static关键字与其他关键字 友情提醒 先看文章目录&#xff0c;大致了解文章知识点结构&#xff0c;点击文章目录可直接跳转到文章指定位置。 静态的特点…...

iPhone 15 Pro有5项重大设计升级,让iPhone 15看起来很无聊

距离苹果9月份的发布会还有不到一周的时间&#xff0c;我们很快就会第一次看到iPhone 15系列。源源不断的传言表明&#xff0c;这一代人将对大多数机型进行另一次增量更新&#xff0c;这对那些想换iPhone 14或更旧手机的人来说是个坏消息。 但这一次的高端选择&#xff0c;iPh…...

xCode14.3.1运行MonkeyDev出现“Executable Not Found“的解决办法

安装MonkeyDev遇到的坑 环境&#xff1a;Xcode Version 14.3.1 (14E300c) 错误提示 is not a valid path to an executable file. 报错 /Users/xxxx//Library/Developer/Xcode/DerivedData/MonTest-ccparhdyzjuqhjdergwrngpfwwoh/Build/Products/Debug-iphoneos/MonTest.app…...

C# Emgu.CV+Tesseract实现识别图像验证码

效果图&#xff0c;简单的还行&#xff0c;复杂的。。。拉跨 懒得写讲解了&#xff0c;全部源码直接上吧 /// <summary>/// 验证码识别/// </summary>public partial class FrmCodeIdentify : FrmBase{private string _filePath;// 原图像Image<Bgr, byte> …...

ORACLE 11.2.0.4 RAC Cluster not starting cssd with Cannot get GPnP profile

最近&#xff0c;处理一次oracle 11.2.0.4 rac cluster由于cssd无法启动&#xff0c;导致集群一个节点的CRS集群无法正常启动的故障。原本&#xff0c;计划变更是从ASM剔除磁盘&#xff0c;解除存储到数据库服务器的映射&#xff1b;磁盘已经成功从ASM剔除&#xff0c;也已经成…...

Converting Phase Noise to Random Jitter(Cycle-to-Cycle)

借用Phase Noise to Random Jitter(Period)的转换过程推导了Cycle to Cycle random Jitter&#xff0c;一般展频时钟调制,用来评估相邻周期的随机抖动。...

HashMap知识总结

HashMap: 1. 扰动函数hash值右移16位与原hash值做异或运算得出的新hash值散列程度高. 2. 负载因子0.75,就是说一个数组初始化new HashMap(17)容量会比17最小2的n次方大,就是32,想要已空间换时间,就是负载因子小于0.75这样的话hash冲突更低,但是扩容频率更高.3 扩容,jdk…...

PLC编码器测速(限幅滤波+中心差分法求导SCL源代码)

M法测速的基本原理,大家可以查看专栏的系列文章,这里不再赘述常用链接如下: PLC通过编码器反馈值计算速度的推荐做法(算法解析+ST代码)_编码器脉冲怎么转换为速度_RXXW_Dor的博客-CSDN博客PLC如何测量采集编码器的位置数据,不清楚的可以参看我的另一篇博文:三菱FX3U PLC…...

SW的stp文件转成CAD格式文件学习笔记

SW的stp文件转成CAD格式文件 文章目录 SW的stp文件转成CAD格式文件另存为part文件&#xff08;零件图&#xff09;另存为CAD文件 另存为part文件&#xff08;零件图&#xff09; 如图一个STP文件&#xff0c;右上角标注是什么文件呢 另存为零件图&#xff0c;即另存为part …...

【数据结构】栈---C语言版(详解!!!)

文章目录 &#x1f438;一、栈的概念及结构&#x1f344;1、栈的概念定义&#x1f344;2、动图演示&#x1f332;入栈&#x1f332;出栈&#x1f332;整体过程 &#x1f438;二、栈的实现&#x1f438;三、数组结构栈详解&#x1f34e;创建栈的结构⭕接口1&#xff1a;定义结构…...

sqlserver 联表查询、子查询、窗口函数、聚合函数等概念与例子

with cte as的用法 查询的一个有用工具&#xff0c;允许创建临时命名结果集&#xff0c;可在查询中多次引用相同的子查询结果&#xff0c;可以提高查询的可读性和维护性 WITH cte_name (column1, column2, ...) AS (-- 这里是子查询SELECT column1, column2, ...FROM your_ta…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...