1.环境搭建
1官网下载
Node.js 官方网站下载:https://nodejs.org/en/download/ 选择64-bin .misi
https://nodejs.org/zh-cn/download/releases/可指定版本
2.配置环境变量
在系统变量path里添加 D:\develop\vue\node18
安装成功测试安装是否成功,运行CMD,分别输入node -v 和 npm -v 分别查看node和npm的版本号
3.修改配置
配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹 node_global和node_cache
npm get prefix
npm config set prefix "D:\develop\vue\node14\node_global"
npm get cache
npm config set cache "D:\develop\vue\node14\node_cache"
#设置源(设置完成后不安装淘宝镜像)
npm config set registry https://registry.npm.taobao.org/ #淘宝源
npm config set registry https://registry.npmmirror.com/ #清华源
#获取源设置
npm config get registry
#恢复官方源
npm config set registry https://registry.npmjs.org/
#测试模块
npm install express -g
sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
执行成功后,会生成文件C:\Users\xxx(用户).npmrc
4.安装淘宝镜像
#已修改仓库源后无需安装
#需要用管理员打开终端
npm install -g cnpm --registry=https://registry.npmmirror.com
#卸载
npm uninstall cnpm -g
#清空缓存
npm cache clean --force
#查看版本
cnpm -v
5.全局安装vue-cli
cnpm install -g @vue/cli #安装
npm uninstall @vue/cli -g #卸载
vue -V #查看全局vue脚手架版本
6.安装yarn
npm install -g yarn
yarn --version
# 更换源
yarn config get registry
yarn config set registry https://registry.npm.taobao.org/
#恢复官方源
yarn config set registry https://registry.yarnpkg.com --global
# 改变yarn全局安装位置
yarn global dir
yarn config set global-folder "D:\develop\vue\yarn\global"
# 改变yarn 缓存位置
yarn cache dir
yarn config set cache-folder "D:\develop\vue\yarn\cache"
# 改变 yarn bin位置
yarn global bin
yarn config set prefix "D:\develop\vue\yarn"
7.查看配置
#1.可以命令行输入
npm config list
#2.直接查看C:\Users\12735下的.npmrc文件,删除后回归默认配置
8.报错
cnpm install --global windows-build-tools
cnpm install gulp-sass@6.0.1 --save-dev
cnpm install --global node-gyp
9.卸载node
- 控制面板卸载nodejs
- 去C:\Users\对应用门下 删除 .pmrc
- 删除对应文件夹
2.创建vue项目
1.创建文件夹
先创建一个文件夹作为项目的工作空间,通过cmd命令切换到该文件夹下
2.创建项目
#1.使用全局安装的vue脚手架创建项目
vue create 项目名
#2.使用局部安装的vue脚手架创建项目
npm init -y # 初始化项目依赖文件
cnpm i -D @vue/cli@4.5.15 # 局部安装脚手架
npx vue -V # 查看vue-cli版本号
npx vue create 项目名 # 创建项目
cd 项目名 #进入项目文件夹
yarn serve #启动项目 npm run serve也可
#3.图形安装
vue ui #图形化安装,对应vue create 项目名
npx vue ui #图形化局部安装创建项目,对应npx vue create 项目名
3.使用预处理器Scss
官网:[https://www.sass.hk/]
- 3.1安装
cnpm i sass-loader@7 node-sass@4 -S
- 3.2使用
<style lang="scss"></style>
4.使用预处理器Less
- 4.1安装
cnpm i less@3 less-loader@7 -S
- 4.2 使用
<style lang="less"></style>
5.使用reset.css
任何一个项目都需要做样式重置,这里我们使用官方的样式重置内容,如果需要补充可以自己手动添加。
官网: [https://meyerweb.com/eric/tools/css/reset/]
我们把代码复制下来放在项目中新建的reset.css文件,然后在app.vue的style中进行引入使用:
@import url('./assets/css/reset.css');
6.图标库的使用
font-awesome图标库官网:[https://fontawesome.dashgame.com/]
- 6.1 安装
cnpm i font-awesome -D
- 6.2 在main.js中引入
import 'font-awesome/css/font-awesome.min.css'
- 6.3 使用
<i class='fa fa-users'></i>
7.配置路由
- 7.1 下载vue-router
cnpm i vue-router@3 -S
- 7.2 配置路由(新建router文件夹和index.js文件)
// index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Home
}
],
mode: 'history'
})
- 7.3 挂载使用
// main.js
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
<!-- 在App.vue设置路由出口 -->
<router-view></router-view>
- 7.4 路由懒加载
//官方推荐的方法,使用ES中的import
component: () => import('@/components/Login')
//使用Vue异步组件
component: resolve => require(['@/components/Home'], resolve)
8.axios的二次封装
- axios二次封装,在src文件夹下新建service.js,写入封装的内容,然后再在main.js中引入service
import axios from 'axios'
import { getToken } from '@/utils/setToken.js'
import { Message } from 'element-ui'
const service = axios.create({
baseURL: '/api', // baseURL会自动加在请求地址上
timeout: 3000
})
// 添加请求拦截器
service.interceptors.request.use((config) => {
// 在请求之前做些什么(获取并设置token)
config.headers['token'] = getToken('token')
return config
}, (error) => {
return Promise.reject(error)
})
// 添加响应拦截器
service.interceptors.response.use((response) => {
// 对响应数据做些什么
let { status, message } = response.data
if(status !== 200) {
Message({message: message || 'error', type: 'warning'})
}
return response
}, (error) => {
return Promise.reject(error)
})
export default service
// main.js
import service from './service'
Vue.prototype.service = service // 挂载到原型,可在全局使用
9.跨域的处理
- 跨域的处理在vue.config.js中设置代理
// vue.config.js
module.exports = {
devServer: {
open: true,
proxy: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/api': ''
}
}
}
}
}
10.setToken.js
//设置token和获取token以及删除token的方法
export function setToken(tokenKey, token) {
return localStorage.setItem(tokenKey, token)
}
export function getToken(tokenKey) {
return localStorage.getItem(tokenKey)
}
export function removeToken(tokenKey) {
return localStorage.removeItem(tokenKey)
}
11.登录界面
<template>
<div class="login">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>通用后台管理系统</span>
</div>
<el-form label-width="80px" :model="form" ref="form" :rules="rules">
<el-form-item label="用户名" prop="username" >
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login('form')">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import {nameRule,passRule} from "../utils/vaildate";
import {setToken} from '@/utils/setToken.js'
import { login } from '@/api/api.js'
export default {
name: "Login",
data() {
return {
form: {
username:'',
password:''
},
rules: {
username: [{validator: nameRule,trigger: 'blur'}],
password: [{validator: passRule,trigger: 'blur'}]
}
}
},
methods: {
login(form) {
this.$refs[form].validate((valid) => {
if (valid) {
console.log(this.form);
/* 把这个登录单独封装成api进行调用
this.service.post('/login', this.form)
.then((res) => {
if (res.data.status === 200) {
setToken('username', res.data.username)
setToken('token', res.data.token)
this.$message({message: res.data.message, type: 'success'})
this.$router.push('/home')
}
})
*/
login(this.form).then((res) => {
if (res.data.status === 200) {
setToken('username', res.data.username)
setToken('token', res.data.token)
this.$message({message: res.data.message, type: 'success'})
this.$router.push('/home')
}
})
} else {
console.error(this.form);
}
});
},
}
}
</script>
<style lang="scss">
.login {
width: 100%;
height: 100%;
position: absolute;
background: aqua;
.box-card {
width: 450px;
margin: 200px auto;
.el-card_header{
font-size: 34px;
}
.el-button {
width: 100%;
}
}
}
</style>
12.匹配用户密码
//vaildate,js
//用户名匹配
export function nameRule(rule,value,callback) {
//请输入4-10位用户名;
let reg = /(^[a-zA-Z0-9]{4,10}$)/;
if(value === '') {
callback(new Error('请输入用户名'))
}else if (!reg.test(value)){
callback(new Error('请输入4-10位用户名'))
}else {
callback()
}
}
//密码匹配
export function passRule(rule,value,callback) {
//6-12位密码包含大小写字母数字以及特殊符号
let pass = /(^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$)/;
if(value === '') {
callback(new Error('请输入密码'))
}else if (!pass.test(value)){
callback(new Error('6-12位密码包含大小写字母数字以及特殊符号'))
}else {
callback()
}
}
13.el报错
//.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
"indent": ["off", 2] //解决error Unexpected trailing comma comma-dangle
}
}
//vue.config.js
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false //error and 0 warnings potentially fixable with the `--fix` option.
})
3.Element-ui
3.1使用ElementUI
- 安装element-ui
npm i element-ui -S
- 在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3.2label和:label
el-radio-group中的label和:label
- :label = “1” 数字1
- :label= “‘1’” 字符串1
- label = “1” 字符串1
3.3多选框问题
- selected为禁用方法,控制返回值设置是否禁用
<el-table-column type="selection"
:selecttable="selected"
></el-table-column>
selected(row,index){
if(row.status == 1){
return turn; //可选择
} else {
return false; //不可选择,禁用
}
}
3.4菜单展开长度变化
.el-menu {
border-right-width: 0;
}
4.地图
4.1刷新地图
- 解决标绘多个图标时地图卡顿问题
var dataManager = Mgs.GDataManager;
dataManager.beginUpdate();//开始刷新
//多个图标创建
dataManager.endUpdate();//结束刷新
5.Vue语法
5.1指令
1.内容渲染指令
- v-text 文本,会覆盖元素内的默认值
- v-html 文本+标签绑定
- {{}} 文本绑定,和v-text不会覆盖默认值
2.属性绑定指令
- ==v-bind:==设置元素的属性值 简写:
3.事件绑定指令
-
v-on: 为元素绑定事件 简写@
-
$event 原生dom的事件对象
$event.target
得到标签对象$event.preventDefault
阻止元素发生默认的行为@click.prevent
阻止元素发生 默认的行为@click.stop
阻止事件冒泡
4.双向绑定指令
-
v-model 双向绑定
.number
自动将用户输入值转为数值类型.trim
自动过滤用户输入的首尾空白字符.lazy
中间过程不改变,失焦时改变
5.条件渲染指令
-
v-model 获取和设置表单元素的值(双向数据绑定)
.number
自动将用户的输入值转为数值类型.trim
自动过滤用户的首尾空白字符.lazy
在chang
-
v-show 切换显示或隐藏(操作css的display)
-
v-if 切换显示或隐藏(操作DOM)
v-if v-else-if v-else
6.列表渲染指令
-
v-for 遍历数据
<!--只要用到v-for指令,那么一定要绑定一个:key属性,保证有状态的列表被正确更新,不要用index当做key没有意义--> <tr v-for="item in list" :key="item.id"> <td>{{item.id}}</td> </tr> <!--index非必选--> <tr v-for="(item,index) in list" :key="item.id"> <td>{{index}</td> <td>{{item.id}}</td> </tr>
5.2过滤器filter
过滤器常用于文本的格式化用管道符“|”进行调用
vue3没有过滤器
关键词filter
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>message 的值是:{{ message | capi }}</p>
</div>
<div id="app2">
<p>message 的值是:{{ message | capi }}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 使用 Vue.filter() 定义全局过滤器
Vue.filter('capi', function (str) {
return str + '~~~'
})
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
// 过滤器函数,必须被定义到 filters 节点之下
// 过滤器本质上是函数
filters: {
// 注意:过滤器函数形参中的 val,永远都是“管道符|”前面的那个值
capi(val) {
// 强调:过滤器中,一定要有一个返回值
return val + '~~~'
}
}
})
const vm2 = new Vue({
el: '#app2',
data: {
message: 'heima'
}
})
</script>
</body>
</html>
5.3监听器watch
<template>
<div>
<h3>watch 侦听器的用法</h3>
<input type="text" class="form-control" v-model.trim="info.username" />
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'MyWatch',
data() {
return {
username: 'admin',
info: {
username: 'zs',
age: 20,
},
}
},
// 所有的侦听器,都应该被定义到 watch 节点下
watch: {
//1.侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
async username(newVal, oldVal) {
//axios.get()返回结果位primise对象,前面添加await可直接解构
//{data: res}得到primise对象的data数据,并重命名为res
const {data: res} = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
//2.是否初始化自动触发immediate
username: {//定义对象格式的侦听器
//handler(newVal, oldVal)固定写法,当username变化时调用
async handler(newVal, oldVal) {
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
immediate: true, //默认false 作用:控制侦听器是否自动触发一次 ,true表示加载完毕后立即调用一次
},
//3.深度监听deep
info: {
async handler(newVal) {
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal.username)
console.log(res)
},
deep: true, // 开启深度监听,只要对象中任何一个属性变化了,都会触发“对象的侦听器”
},
//4.监听对象中单个属性的变化
'info.username': {
async handler(newVal) {
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
},
},
}
</script>
<style lang="less" scoped></style>
5.4计算属性
计算属性指的是通过一系列运算之后,最后得到一个属性值
这个动态计算出来的属性值可以被模板结构或methods方法使用
es6中也可以采用==${XXX}==来在字符串中插入变量(这个记住要利用v-bind)
计算属性 vs 侦听器
计算属性和侦听器侧重的应用场景不同:
计算属性侧重于监听多个值的变化,最终计算并返回一个新值
侦听器侧重于监听单个数据的变化,最终执行特定的业务处理,不需要有任何返回值
特点:
- 定义的时候,要被定义为“方法”
- 在使用计算属性的时候,当普通的属性使用即可
好处:
- 实现了代码的复用
- 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!
computed
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
<div>
<span>R:</span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G:</span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B:</span>
<input type="text" v-model.number="b">
</div>
<hr>
<!-- 专门用户呈现颜色的 div 盒子 -->
<!-- 在属性身上,: 代表 v-bind: 属性绑定 -->
<!-- :style 代表动态绑定一个样式对象,它的值是一个 { } 样式对象 -->
<!-- 当前的样式对象中,只包含 backgroundColor 背景颜色 -->
<div class="box" :style="{ backgroundColor: rgb }">
{{ rgb }}
</div>
<button @click="show">按钮</button>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
// 红色
r: 0,
// 绿色
g: 0,
// 蓝色
b: 0
},
methods: {
// 点击按钮,在终端显示最新的颜色
show() {
console.log(this.rgb)
}
},
// 所有的计算属性,都要定义到 computed 节点之下
// 计算属性在定义的时候,要定义成“方法格式”
computed: {
// rgb 作为一个计算属性,被定义成了方法格式,
// 最终,在这个方法中,要返回一个生成好的 rgb(x,x,x) 的字符串
rgb() {
return `rgb(${this.r}, ${this.g}, ${this.b})`
}
}
});
console.log(vm)
</script>
</body>
</html>
5.5axios
axios是一个专注于网络请求的库
1 安装
cnpm install axios //安装axios
import axios from 'axios'
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.全局配置
- vue2
- vue3
2. request.js(推荐)
//1.request.js内容
import axios from 'axios'
// 调用 axios.create() 函数,创建一个 axios 的实例对象,用 request 来接收
const request = axios.create({
// 指定请求的根路径
baseURL: 'https://www.escook.cn'
})
export default request
//2.调用request.js
import request from '@/utils/request.js'
const {data: res} = await request.get('/find'{
params:{
page:this.page,
limit:this.limit
}
});
2.基本使用
发起 GET 请求:
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
contentType: "application/json",//使数据传递变为json格式(选填)
// URL 中的查询参数
params: {
id: 1
}
}).then(function (result) {
console.log(result)
})
axios.get("地址"?key=vaule&key2=value2).then(function(response){}).catch(function(error){})
axios.get('地址',{params:{ID: 12345}}).then(function(response){}).catch(function (error){})
发起 POST 请求:
document.querySelector('#btnPost').addEventListener('click', async function () {
// 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!
// await 只能用在被 async “修饰”的方法中
//{ data: res }解构赋值,使用:重命名为res
const { data: res } = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
//请求体参数
data: {
name: 'zs',
age: 20
}
})
console.log(res)
})
axios.post('/user',{firstName:'Fred',lastName:'Flintstone'}).then(function(response){})
5.6生命周期
- Vue2
组件创建阶段–>组件运行阶段–>组件销毁阶段
组件创建阶段:breoreCreate–>created(ajax请求一般用这个)–>beforeMount–>mounted
组件运行阶段:beforeUpdate–>updated
组件销毁阶段:berforDestory–>destroyed
- Vue3
如何监听组件的更新
当组件的 data 数据更新之后,vue 会自动重新渲染组件的 DOM 结构,从而保证 View 视图展示的数据和Model 数据源保持一致。
当组件被重新渲染完毕之后,会自动调用updated生命周期函数。
brforeCreate前有setup(Composition API)
5.7数据共享
1.父向子
-
props是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值,组件的使用者可以通过props把数据传递到子组件内部,供子组件内部进行使用
props:['init'],
-
props是只读的
-
props的default默认值props要改为对象形式
props:{ init:{ //用default属性定义属性的默认值 default:0, //用type属性定义属性的值类型 type:Number, //必填项校验 required:true } }
2.子向父
-
子组件中声明自定义事件,emits: [‘numchange’], 和methods并列 (不写应该也行)
-
子组件中触发this.$emit(‘numchange’,this.ouunt)
-
父组件监听<Son @numchange=“getSonCount”>
methods:{ getSonCount(val){ this.sonCount = val;//val就是子组件通过自定义传过来的值 } }
3.兄弟组件
必须保证 $on()监听事件先被创建,否则无法正常监听消息
- 新兄弟组件
4.父子孙
必须嵌套才能使用
5.8ref引用
-
定义
ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。
每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,
组件的 $refs 指向一个空对象。
-
获取文本框焦点
//this.$nextTick(cd),把cd回调推迟到下一个DOM更新周期之后执行。就是等组件的DOM更新完成之后,再执行cd回调函数 this.$nextTick(()=>{ this.$refs.名字.focus(); })
5.9插槽
==插槽(Slot)==是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的
部分定义为插槽。
5.10自定义指令
5.11 其他
5.12.1获得绝对路径
const path = require('path')
const themePath = path.join(__dirname,'./src/theme.less')//绝对路径
//使用
hack:'true;@import "${themePath}"'
5.12.2配置打包
//vue.config.js
module.exports = {
publicPath: './',//打包后可直接双击打开
}
5.12.3样式冲突
scoped让样式只适用用当前vue
<style lang="less" scoped>
//使用/deep/改变内部样式,可以用来修改组件库的样式
/deep/ h5{
color:pink;
}
</style>
5.12.4动态组件
动态组件指的是动态切换组件的显示与隐藏。
7.1.工作方式
7.2.路由实例
7.3.补充
8.其他
8.1 VScode
1.常用插件
- Vetur vue文件的语法高亮显示
- Vue 3 Snippets 自动生成vue的一些代码片段
- ESLint 统一JavaScript代码风格的工具
- Chinese(Simplified) 中文
- Autocomplete 配置@
- Live Server 实时服务器实时查看开发的网页或项目效果
- Auto Close Tag 自动闭合标签
2.配置
插件名:Path Autocomplete
//左下角小齿轮->设置->文本编辑器->Code Actions On Save->在settings.json中编辑
//导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
//配置@路径提示
"path-autocomplete.pathMappings": {
"@":"${folder}/src"
},
8.2 devtools工具
谷歌扩展程序 ,带bate的是vue3,不带是vue2
10正则表达式
11.ESlint
12.文件操作
12.1.触发文件选择框
//普通js 'myfile'是input的id
document.getElementById('myfile').click();
使用input标签创建一个type类型为file的文件选择框,同时给input标签添加一个id属性。
2、在js中,通过id获得input对象,使用click()方法让文件选择框自动点击,弹出file文件框。
npm install vanta@0.5.24
npm install three@0.121.0
13.其他操作
1.全屏
安装Vue Fullscreen库
npm install vue-fullscreen
<template>
<div>
<button v-fullscreen @click="toggleFullscreen">切换全屏</button>
<!-- 内容 -->
</div>
</template>
<script>
import { fullscreen } from 'vue-fullscreen';
export default {
directives: {
fullscreen
},
methods: {
toggleFullscreen() {
if (this.$fullscreen.isActive) {
this.$fullscreen.exit();
} else {
this.$fullscreen.request();
}
}
}
};
</script>
ose Tag 自动闭合标签
2.配置
插件名:Path Autocomplete
//左下角小齿轮->设置->文本编辑器->Code Actions On Save->在settings.json中编辑
//导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
//配置@路径提示
"path-autocomplete.pathMappings": {
"@":"${folder}/src"
},
8.2 devtools工具
谷歌扩展程序 ,带bate的是vue3,不带是vue2
10正则表达式
11.ESlint
[外链图片转存中…(img-eTDhlZGk-1697424624992)]
12.文件操作
12.1.触发文件选择框
//普通js 'myfile'是input的id
document.getElementById('myfile').click();
使用input标签创建一个type类型为file的文件选择框,同时给input标签添加一个id属性。
2、在js中,通过id获得input对象,使用click()方法让文件选择框自动点击,弹出file文件框。
npm install vanta@0.5.24
npm install three@0.121.0
13.其他操作
1.全屏
安装Vue Fullscreen库
npm install vue-fullscreen
<template>
<div>
<button v-fullscreen @click="toggleFullscreen">切换全屏</button>
<!-- 内容 -->
</div>
</template>
<script>
import { fullscreen } from 'vue-fullscreen';
export default {
directives: {
fullscreen
},
methods: {
toggleFullscreen() {
if (this.$fullscreen.isActive) {
this.$fullscreen.exit();
} else {
this.$fullscreen.request();
}
}
}
};
</script>