本文目录
前言
在前端开发的浩瀚星空中,
Vue.js
以其轻量级、易上手和强大的响应式数据绑定特性,成为了众多开发者构建用户界面的首选框架。本篇文章将引领你踏上Vue.js
的学习之旅,从Vue
的概述与入门开始,逐步深入到Vue
的模板语法、数据绑定、双向数据绑定、事件处理及修饰符等核心功能。
我们将首先为你揭开Vue
的神秘面纱,通过Vue
概述与入门章节,让你快速了解Vue
是什么、它能做什么以及为什么选择Vue
。随后,我们将深入Vue
的模板语法,探讨前端渲染的奥秘以及Vue
指令的神奇之处,让你学会如何利用Vue
指令来操作DOM
和数据。
通过本篇文章的学习,你将掌握Vue.js
的基础知识和常用技巧,为后续的Vue2
Vue3
项目开发打下坚实的基础。让我们一起踏上Vue
的征途,探索前端开发的无限可能吧!
1、Vue概述及入门
1.1 Vue概述
Vue
作者:尤雨溪。
Vue
是国产优质前端框架。
Vue
:渐进式JavaScript
框架。
Vue.js
发布时间:2014年2月正式发布。Vue.js 1.0.0
发布时间: 2015年10月正式发布。Vue.js 2.0
预览版本:2016年4月正式发布。
2.0 及以上的版本与1.0.0 的版本发生了比较大的变化,接下来接触的是2.0以上的版本。
Vue
的优点:
- 易用:掌握
html
、css
、javascript
,就能够快速上手。 - 灵活:可以只使用部分库,也可以全部使用。
- 高效:超快虚拟
dom
,双向数据绑定。
1.2 Vue入门
无论我们学习什么语言还是框架,都是从打印Hello World
开始,这个已经成为IT
不成文的规定了,好的我们开始吧。
- 在桌面创建
Vue-base
文件夹,我们基础入门练习将在这个文件夹开始,并采用CDN
的方式引入Vue
,先了解Vue
的语法,等到后面再开始脚手架的搭建。 - 将
Vue-base
文件夹拖到vscode
编辑器里,然后创建文件01vue.html
。
在01vue.html
文件下输入如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello World'
}
})
</script>
</body>
</html>
用浏览器打开改文件,运行如下:
代码解读:
- 首先我们在
body
标签中,有个div
标签并且id
为app
,然后有了双大花括号渲染msg
; - 接着我们引入了
Vue CDN
,会让我们全局有个Vue
对象。 - 然后我们
new Vue
并往里面传一个对象,el
字段代表着,这个Vue
控制着哪个dom
,我们控制这id="app"
这个div
标签。 data
字段里面存储着我们要渲染到页面的一些数据,可以看到我们渲染了msg
,而msg
就是Hello World
,可以看到它被解析到页面了。
1.3 总结
- 在
Vue
实例中el
字段:元素的挂载那个标签,值为css
选择器。 data
:对象。在html中需要渲染的值存储位置。{{ }}
:插值表达式,将数据填充到html
。里面也可以支持一些简单的运算方式、三步运算符、字符串拼接。
2、Vue模板语法
2.1 前端渲染理解
如何理解前端渲染,其实Vue
的差值表达式,浏览器是不认识的,但是Vue
通过自己的编译过程,将语法渲染成功浏览器能够认识的代码,其实就是将数据填充到HTML
中。图片理解如下:
2.2 Vue指令
什么是指令?
指令的本质就是自定义属性。
指令格式
指令的格式就是以v-指令名称
v-
开头,具体有哪些指令,得看Vue
开放出哪些指令。
v-cloak指令的用法
打开我们刚刚用Vue
写的Hello World
的网页,然后快速刷新,会发现双大花括号出现下马上替换成Hello World
:
那为什么会出现这种情况呢,那这个就要取决于Vue
,因为它一开始是将插值表达式渲染到页面中,然后迅速替换,所以当我们快速刷新时就能看到。
那么我们就可以用v-cloak
指令来解决这个问题。在01vue.html
的title
标签上面添加如下代码:
<style>
[v-cloak] {
display: none;
}
</style>
并且在id="app"
标签上使用指令c-cloak
,如下:
然后我们再去快速刷新页面,就不存在这个问题了:
总结
Vue
中的指令就是以v-
开头的,具体的指令要看Vue
开放的api
,后面会了解常用指令。
3、数据绑定指令
3.1 v-text 填充纯文本。
页面展示效果:
v-text
更加简洁,如果使用插值表达式,还要使用指令v-cloak
。
3.2 v-html 填充 HTML 片段。
页面效果点击百度会跳转到百度的连接:
不过不推荐这样直接将html
插入,因为可能会有安全隐患,所以最好不要使用。
3.3 v-pre 填充原始信息。
效果如下:
v-pre
它会跳过编译过程。
4、数据响应式
数据响应式是什么?
数据响应其实就是数据发生改变,页面会随着数据改变而呈现最新的数据的值。
数据绑定
数据绑定其实就是将数据和标签联系。
4.1 v-once指令只编译一次
效果如下:
可以发现绑定了v-once
指令后,再去修改数据不生效,而没绑定这个指定的数据会随着的值的改变而改变。那这个有什么用呢,如果确定这个值只获取一次,后面不发生改变就可以使用这个数据,可以减少Vue
底层监听的开销。
4.2 总结
数据响应式其实就是,数据改变驱动我们页面视图的改变,让我们不需要再像以前那样还要操作dom
的操作,只需要关注数据层面。
5、双向数据绑定
什么是双向数据绑定?
双向数据绑定其实Vue
里的一大特点,甚至连React
都没要双向数据绑定,双向数据绑定其实就是input
输入框值的改变会使页面同一数据发生改变。运用指令v-model
,例如:
效果如下:
5.2 双向数据绑定的原理
其实就是使用了,input
框的监听事件input
,当用户触发事件时,会获取input
框里的值,从而去设置我们data
里的值。后面学了事件后,我们将会自己利用原理实现。
5.3 MVVM的设计思想
M(Model)
数据,V(View)
视图,VM(View-Model)
实现控制逻辑。
6、事件绑定
6.1 Vue中如何处理原生的事件
v-on
指令绑定事件,例如点击事件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div v-cloak id="app">
<p>{{num}}</p>
<button v-on:click = "clickFunc">加</button>
<button @click = "clickFunc">加</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num: 0,
},
methods: {
clickFunc () {
this.num++
}
}
})
</script>
</body>
</html>
代码解读:
- 我们使用了
v-on:click = "clickFunc"
,绑定了点击事件,当每次点击时都会触发clickFunc
这个函数。 - 这个
clickFunc
函数在Vue
实例的methods
对象字段中去定义。 - 在
Vue
对象实例中要获取data
里的值,直接使用this
,因为Vue
做了处理,里面字段全部挂载到Vue
实例下,包括方法字段中,一个方法要调用另一个方法,直接this.
方法名 v-on:
指令可以简写成@
接下来我们去运行下:
6.2 事件的基本使用
函数如果没有传递参数过来那么默认会接受一个事件对象,例如:
clickFunc (event) {
this.num++
console.log(event)
}
我们让这个函数去接受一个参数,因为没有传值,所以默认事件对象会被传进来,我们打印查看如下:
事件对象被打印出来了。
很显然上面的代码只是每次简单加1,那么我们如果想自己传几每次就加几该怎么做呢?通过函数参数传值的方式,那如果通过函数传值的话,事件对象要用特殊的字段$event
传递过来如下:
可以看到每次点击加,每次都加10,并且事件对象也会被打印出来。
7、事件修饰符
7.1 事件修饰符值阻止冒泡
我们有如下例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
[v-cloak] {
display: none;
}
</style>
<title>Document</title>
</head>
<body>
<div v-cloak id="app">
<h1>{{num}}</h1>
<div @click="clickReduceFunc(5)">
<button @click="clickAddFunc(10)">开始</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num: 0,
},
methods: {
clickAddFunc (base) {
this.num += base
},
clickReduceFunc (base) {
this.num -= base
console.log('我通过冒泡触发了')
}
}
})
</script>
</body>
</html>
点击开始按钮,会触发绑定在它上面的点击事件clickAddFunc
,然后会冒泡到父级所以就也会触发clickReduceFunc
事件,一个加10,一个减5,最后只能加5,打开控制台查看:
可以看到父级绑定的点击事件也被触发了,我们如果只想触发clickAddFunc
这个函数让它老老实实加10,不想它冒泡触发父级绑定的函数,通过原生js
,我们是不是采用事件对象event.stopPropagation()
去阻止冒泡。但是在Vue
里我们只需要将clickAddFunc
这个函数这样写就能阻止冒泡:
<button @click.stop="clickAddFunc(10)">开始</button>
在click
后面加.stop
,同样可以接受链式调用,这样
<button @click.stop.prevent="clickAddFunc(10)">开始</button>
.prevent
阻止默认事件
更多事件修饰符可以点我查看
8、按键修饰符
8.1 enter是回车键,.65是a键
当我们想这个按钮不止用过鼠标点击会触发,我通过回车键或者键盘上a键也能触发可以这样写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div v-cloak id="app">
<input @keyup.enter.65="keyupFunc" type="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
methods: {
keyupFunc (event) {
console.log(event.target.value)
console.log(event.keyCode)
}
}
})
</script>
</body>
</html>
现在输入值后就可以通过a键或者回车进行打印了:
回车键也可以改成13,它也会生效因为它的keyCode
就是13
更多按键修饰符点我查看
8.2 自定义按键修饰符
- 全局
Vue.config.keyCodes.
这样的话更直观a
就是a
键,我们去点击:
发现是可以触发的。
好的接下来我们就可以用这些所学的做个简单的小案例。
在学习的路上,如果你觉得本文对你有所帮助的话,那就请关注点赞评论三连吧,谢谢,你的肯定是我写博的另一个支持。