介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
安装
直接用 <script> 引入
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
下载 开发版本 包含完整的警告和调试模式
下载 生产版本 删除了警告，33.46KB min+gzip
也可以使用CDN远程文件：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
使用npm安装
# 最新稳定版 $ npm install vue
使用命令行工具（CLI）
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。
# 全局安装 vue-cli npm install --global vue-cli # 检测vue-cli是否安装正确 vue --version # 运行命令来创建一个myapp的新项目 vue create myapp
Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})
可以在实例中添加数据：
var vm = new Vue({
data: {
}
})
在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
<div id="app">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
string: "hello world"
}
})
</script>
数据渲染
声明式渲染
使用两对花括号进行数据渲染 {{ }}
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: "hello world"
}
})
</script>
条件渲染 v-if
通过 v-if 指令，判断if中的内容是否为true，从而控制数据是否渲染
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
同 v-if 类似的还有 v-show 指令
<div id="app">
<p v-show="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
v-show指令用法和v-if几乎一样，区别在于：
v-if 控制元素是否渲染
v-show 控制元素是否显示
列表渲染 v-for
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo }}
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
todos: [
'学习 JavaScript',
'学习 Vue',
'整个牛项目'
]
}
})
v-for 中 v-for="todo in todos" todos代表数据源，todo则是被迭代的数组元素的别名。
v-for 还支持一个可选的第二个参数，即当前项的索引。
<li v-for="(todo,index) in todos">
{{index+1}}、{{ todo }}
</li>
此外v-for也可以循环对象：
<div id="app">
<ol>
<li v-for="value in object">
{{ value }}
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2022-01-01'
}
}
})
你也可以提供第二个的参数为 property 名称 (也就是键名)：
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
还可以用第三个参数作为索引：
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
优化列表渲染
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
<li v-for="item in todos" v-bind:key="item.id">
{{ item }}
</li>
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
文本渲染 v-text
<div id="app">
<p v-text="msg"></p>
<p v-text="5+3"></p>
<p v-text="msg+' v-text'"></p>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
msg:'这是一个字符串'
}
}
})
</script>
文本渲染 v-html
<div id="app">
<p v-html="htext"></p>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
htext:"<b>这是</b>字符串"
}
}
})
</script>
属性渲染
v-model 指令
v-model 指令在表单控件或者组件上创建双向绑定：
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-model 负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-bind 属性绑定
动态地绑定一个或多个属性 (attribute)
<p v-bind:title="msg">{{msg}}</p>
<!-- 缩写 -->
<p :title="msg">{{msg}}</p>
<!-- 表单的属性绑定 -->
<button :disabled="false">提交</button>
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
动态绑定class
通过对象方式：
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data: {
isActive: true,
hasError: false
}
通过数组方式：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
动态绑定style
通过对象方式：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
通过数组方式
可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
事件处理
绑定事件
为元素绑定一个事件，使用 v-on 指令，例如绑定一个单击事件：
<button v-on:click="num++">{{num}}</button>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
num:1
}
}
})
</script>
v-on 也可以简写成：
<button @click="num++">{{num}}</button>
响应事件函数
<div id="app">
<button @click="calc(-1)" :disabled="num<=1">-</button>
<input type="text" v-model.number="num">
<button @click="calc(1)" :disable="num >= 999">+</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
num:1
}
},
methods:{
calc(step){
// js中使用data中的数据 需使用this
this.num += step
if(this.num < 1) this.num = 1
if(this.num > 999) this.num = 999
}
}
})
</script>
事件修饰符
.once
.once表示事件只执行一次
.stop
.stop 用于阻止事件冒泡
.prevent
.prevent 用于阻止默认事件
<style>
.parent{
background-color: #f00;
padding: 30px;
}
.son{
background-color: #ff0;
}
a{
line-height: 80px;
}
</style>
<div id="app">
<div class="parent" @click="say1">
<div class="son" @click.stop.once="say2">
<a href="https://www.baidu.com" @click.prevent.stop="say3">跳转百度</a>
</div>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
}
},
methods:{
say1(){
alert("这是父元素")
},
say2(){
alert("这是子元素")
},
say3(){
alert("这是a标签")
}
}
})
</script>
还有更多事件修饰符可以参考官方文档 事件修饰符
按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit">
另外还有 .tab .delete .space 等按键修饰符，详情参考官方文档 按键修饰符
表单输入绑定
复选框
单个复选框：
<input type="checkbox" v-model="flag">
<p>{{flag}}</p>
多个复选框：
<input type="checkbox" name="g" value="听歌1" v-model="list">听歌<br>
<input type="checkbox" name="g" value="看书1" v-model="list">看书<br>
<input type="checkbox" name="g" value="游泳1" v-model="list">游泳<br>
<input type="checkbox" name="g" value="跑步1" v-model="list">跑步<br>
<p>{{list}}</p>
表单绑定修饰符
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg">
<!-- 只允许数字类型 --> <input v-model.number="age" type="number">
<!-- 过滤用户输入的首尾空白字符 --> <input v-model.trim="msg">
todo案例
侦听器
侦听data中的某一个数据，当发生变化时触发某些操作：
<div id="app">
<button @click='num++'>{{num}}</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
num:5
}
},
watch:{
// 通过方法中的两个参数 来监听改变前和改变后的数据
num:function(nvalue,ovalue){
console.log(ovalue,nvalue)
}
}
})
</script>
<div id="app">
<button @click='num++'>{{num}}</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
num:{n:5}
}
},
watch:{
// 如果监听的数据为引用类型 需加deep
// 如果为引用类型 只能监听到 nval
"num":{
handler(nval,oval){
console.log(`数据由${oval.n}变化为${nval.n}`)
},
deep:true
}
}
})
</script>
计算属性
使用 computed 属性在实例中通过计算得出新的数据：
<div id="app">
<p>{{str}}</p>
<p>{{newStr}}</p>
{{totalMarks}}
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
str:"hello",
results:[
{name:'englist',marks:70},
{name:'math',marks:81},
{name:'history',marks:90}
]
}
},
computed:{
newStr:function(){
return '123'
},
totalMarks:function(){
let total = 0;
for(let i = 0; i < this.results.length; i++){
total += parseInt(this.results[i].marks)
}
return total;
}
}
})
</script>
自定义指令
通过 directives 属性设置自定义指令
自定义指令可以对普通 DOM 元素进行底层操作
<div id="app">
<input type="text" v-focus="true">
</div>
<script>
var vm = new Vue({
el:"#app",
// 自定义v-focus 指令 实现自动获取焦点
directives:{
"focus":{
//
inserted(el,binding){
el.focus();
}
}
}
})
</script>
动画
通过 transition 组件使用vue内置动画效果，在下列情形中， transition 可以给元素和组件添加进入/离开过渡：
-
条件渲染 (使用
v-if) -
条件展示 (使用
v-show) -
动态组件
-
组件根节点
transition 组件中使用 name 属性来指定过渡类名
过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。
-
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 -
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 -
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。 -
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 -
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 -
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
<style>
.fade-enter-active{
transition: all ease 1s;
}
.fade-enter{
opacity: 0;
}
.fade-enter-to{
opacity: 1;
}
.fade-leave-active{
transition: all ease 1s;
}
.fade-leave{
opacity: 1;
}
.fade-leave-to{
opacity: 0;
}
</style>
<transition name="fade"> <img src="a.jpg" alt="" width="120px" srcset="" v-if="flag"> </transition>
自定义过渡的类名
通过设置组件的属性来自定义过渡类名：
-
enter-class -
enter-active-class -
enter-to-class(2.1.8+) -
leave-class -
leave-active-class -
leave-to-class(2.1.8+)
过渡模式
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。 -
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
列表过渡
使用 <transition-group> 组件渲染整个列表：
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
<transition-group> 新增的 v-move class会在元素的改变定位的过程中应用，也可以通过 move-class attribute 手动设置。
组件
组件是可复用的 Vue 实例，且带有一个名字，组件在vue项目中的有点体现：
-
拆分项目为多个组件，降低项目的复杂度
-
组件让多人合作 团队开发更加便捷
-
组件复用 项目开发更加便捷
通常一个应用会以一棵嵌套的组件树的形式来组织：
vue大致有两种组件的注册类型：全局注册和局部注册。
全局组件
定义一个全局组件：
Vue.component("counter",{
template:`<button @click="n++">{{n}}</button>`,
data(){
return {n:100}
}
})
使用组件：
<counter></counter>
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
局部组件
1、通过一个普通的 JavaScript 对象来定义局部组件：
const stepper={
template:`<span>
<button @click="count--">-</button>
<input type="text" v-model="count">
<button @click="count++">+</button>
</span>`,
data(){
return{
count:5
}
}
}
2、在vue实例中注册组件：
var vm = new Vue({
el:"#app",
components:{
stepper
}
})
3、在模板中使用组件：
<stepper></stepper>
组件间通讯
父向子传参
通过使用 props 属性向子组件传参（子组件通过props接受父组件的参数）：
<stepper :num="mynum"></stepper>
<script>
const stepper={
template:`<span>
<button @click="count--">-</button>
<input type="text" v-model="count">
<button @click="count++">+</button>
</span>`,
data(){
return{
count:this.num
}
},
props:{
"num":{
type:Number,
default:1
}
}
}
var vm = new Vue({
el:"#app",
components:{
stepper
},
data:{
mynum:10
}
})
</script>
子向父传参
<stepper :num="apple" @numchange="apple=$event"></stepper>
<script>
const stepper={
template:`<span>
<button @click="count--,$emit('numchange',count)">-</button>
<input type="text" v-model="count">
<button @click="count++,$emit('numchange',count)">+</button>
</span>`,
data(){
return{
count:this.num
}
},
props:{
"num":{
type:Number,
default:1
}
}
}
var vm = new Vue({
el:"#app",
components:{
stepper
},
data:{
apple:5
}
})
</script>
组件插槽
在使用组件标签的时候有时候需要在标签内插入其他元素，这时候就用到了插槽：
<div id="app">
<price>
<span>元</span>
</price>
</div>
<script>
const price = {
template:`
<span>
100 <slot></slot>
</span>
`
}
var vm = new Vue({
el:"#app",
components:{
price
}
})
</script>
使用 slot 标签来定义插槽，当需要多个插槽的时候需要在插槽中定义一个 name 名，用来区分对应关系：
<div id="app">
<price>
<span slot="f">￥</span>
<span slot="n">元</span>
</price>
</div>
<script>
const price = {
template:`
<span>
<slot name="f"></slot>100<slot name="n"></slot>
</span>
`
}
var vm = new Vue({
el:"#app",
components:{
price
}
})
</script>
cmd与npm
cmd
cmd命令
使用键盘的 win + R 键打开windows系统的运行窗口，输入 cmd 打开cmd命令窗口程序
# cd 命令 # cd / 切换到当前磁盘根目录 C:\>cd / # cd Users 切换到当前目录下的Users目录 C:\>cd Users # cd ../ 切换到上级目录 C:\Users> cd ../ # 也可以cd到某一个目录地址 C:\>cd ./Users/Windows
使用cd命令切换目录的时候也可以使用 tab 键自动补全文件/文件夹名
删除与创建文件夹
在目录下，使用 dir 命令查看当前目录的属性，包裹当前目录下的所有文件及文件夹，以及当前磁盘的信息。
# dir命令 查看当前目录属性及目录下文件树 C:\>dir 驱动器 C 中的卷没有标签。 卷的序列号是 2EB5-9C73 C:\ 的目录 2019/12/07 17:14 <DIR> PerfLogs 2021/12/26 19:28 <DIR> Program Files 2021/12/19 14:27 <DIR> Program Files (x86) 2021/10/26 22:51 <DIR> Users 2021/12/19 14:27 <DIR> Windows 0 个文件 0 字节 5 个目录 25,481,732,096 可用字节
使用 md （makeDir）命令创建文件夹：
C:\>md abc
使用 rd （rmDir）删除一个空文件夹：
C:\>rd abc
如果文件夹不为空，可以在使用 rd 命令的时候添加其他参数：
# 递归删除 即 删除目录及其所有子文件 C:\>rd /S abc # 静默删除 删除目录树时不要求确认 C:\>rd /Q abc
删除文件
使用 del 命令删除一个文件：
# 删除index.php文件 C:\>del index.php # 删除前确认提示 C:\>del /P index.php # 强制删除只读文件 C:\>del /F index.php # 静默删除 不要求确认 C:\>del /Q index.php
其他常用命令
ping 查看某个域名或ip与本机连通信息
cls 清空当前命令窗口
ipconfig 查看网卡信息
help 帮助命令
npm命令
NPM是随同NodeJS一起安装的包管理工具，主要功能有：
-
允许用户从NPM服务器 下载 别人编写的第三方包到本地使用。
-
允许用户从NPM服务器 下载 并安装别人编写的命令行程序到本地使用。
-
允许用户将自己编写的包或命令行程序 上传 到NPM服务器供别人使用。
# 使用npm -v 查看当前环境的npm版本 C:\Users\admin>npm -v 8.1.2 # 使用 npm -g 更新当前npm版本 C:\Users\admin>npm install npm -g
使用npm创建项目模块
使用 npm init 命令创建模块，改命令会帮我们自动创建一个package.json文件：
D:\vueapp>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (vueapp) mynpm
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\vueapp\package.json:
{
"name": "mynpm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
npm init 命令会自动为我们生成一个package.json文件，文件中包含了项目的一些基本信息，如 项目名 作者 项目版本 项目描述 以及项目中用到的依赖包等信息。也可以使用 -y 参数，默认全部选项都选择yse创建模块。
安装包
# 使用 npm install <Module Name> 命令安装包 D:\vueapp>npm install jquery --save added 1 package in 1s
npm install 命令也可以简写成：npm i jquery
这是在项目目录中会发现npm帮我们下载了jquery项目，并且放在了node_modules文件夹下，同时package.json文件中也多了关于jquery包的一些相关信息：
{
"name": "mynpm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
}
}
然后还会发现，在项目目录下还多了一个package-lock.json文件，这个文件相当于package.json的备份文件，其主要作用是：
-
锁定包版本，确保其他人在使用这个项目时保证依赖统一；
-
声明包的下载安装地址
其中版本号前的 “ ^ ” 符号表示版本锁定：向后(新)兼容依赖，以上面的jquery为例，意思是指我们的项目需要依赖jquery包，且版本不低于3.6.0
当然，有些情况下我们仅需要安装一些本地开发依赖，例如less，作为线上生产环境，我们并不需要less，所以就需要在安装包的时候添加 --save-dev 参数：
D:\vueapp>npm install less --save-dev added 20 packages in 2s # 命令简写及其他模式： # 默认安装生产环境 D:\vueapp>npm install jquery # --save缩写 D:\vueapp>npm install jquery -S # –save-dev缩写 D:\vueapp>npm install jquery -D # 全局安装 D:\vueapp>npm install jquery -g # 指定包版本 D:\vueapp>npm install jquery@2.1 -D
我们会发现package.json文件有一些不同：
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"less": "^4.1.2"
}
其中 dependencies 项中代表开发和生产环境都需要的依赖包，
devDependencies 项中代表仅开发环境需要的依赖包。
卸载包
使用 npm uninstall < Module Name > 卸载依赖包
D:\vueapp>npm uninstall jquery removed 1 package in 778ms # 一次下载多个包 D:\vueapp>npm install jquery less # 一次卸载多个包 D:\vueapp>npm uninstall jquery less
更新包
可以使用 npm outdated 查看当前项目所用到的包及版本信息
D:\vueapp>npm outdated Package Current Wanted Latest Location Depended by jquery 2.2.4 2.2.4 3.6.0 node_modules/jquery vueapp
使用npm update express命令更新模块
D:\vueapp>npm update jquery
使用npm search express搜索模块
D:\vueapp>npm search express
初始化项目
一般node_modules文件夹中会包含当前项目所需要的所有依赖模块，如果想要把这个项目发给别人会十分的不方便，这时候package.json就起到了作用：
# 使用 npm i 命令会自动查找package.json文件中声明到的模块并自动安装 D:\vueapp>npm i
切换安装源
# 使用npm config get registry命令 查看当前使用的镜像源 C:\Users\admin>npm config get registry https://registry.npmjs.org/
npm镜像默认使用境外镜像，使用nrm工具可以切换npm的下载源：
# 安装nrm插件 D:\vueapp>npm i nrm -g # 查看可以使用的镜像 D:\vueapp>nrm ls npm ---------- https://registry.npmjs.org/ yarn --------- https://registry.yarnpkg.com/ tencent ------ https://mirrors.cloud.tencent.com/npm/ cnpm --------- https://r.cnpmjs.org/ taobao ------- https://registry.npmmirror.com/ npmMirror ---- https://skimdb.npmjs.com/registry/ # 切换镜像源 D:\vueapp>nrm use taobao Registry has been set to: https://registry.npmmirror.com/
yarn命令
yarn 是 Face-book, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具，其大部分命令与npm类似，但毕竟是进化改良版，功能上还是有了一定的优化：
-
yarn实现了离线模式的机制
-
yarn命令更加语义化
-
yarn运行安装等操作速度得到了显著的提升
-
npm输出的信息比较冗长，yarn的输出信息更加清楚明了，简洁了许多
-
使用yarn创建安装的项目更加安全
安装
方法一：
官方下载安装包，https://yarnpkg.com/zh-Hans/docs/install，安装完毕后，一定要配置环境变量。
方法二：
# 通过npm安装yarn npm install yarn -g # 查看yarn版本 验证是否安装成功 yarn --version
常用命令
# 初始化一个新项目 yarn init #添加依赖包 yarn add [package] yarn add [package]@[version] yarn add [package]@[tag] #将依赖项添加到不同依赖项类别中 yarn add [package] --dev yarn add [package] --peer yarn add [package] --optional #升级依赖包 yarn upgrade [package] yarn upgrade [package]@[version] yarn upgrade [package]@[tag] #移除依赖包 yarn remove [package] #安装项目的全部依赖 yarn #或者 yarn install
cnpm命令
安装
npm install -g cnpm [--registry=https://registry.npm.taobao.org]
命令
cnpm 只是切换了npm镜像源的别名，用法与npm一样
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
