SadnessPineapple

Vue数据响应ref123456```### reactive

setup的初识vue2中写法123456789101112export default ({ name: 'App', data(){ return { count:0 } },methods:{ updateCount(){ this.count++ } }}) vue3中的写法1234567891011121314151617181920export default { /* 使用vue3的composition API */ setup () { // 定义响应式数据 ref对象 const count = ref(1) console.log(count) // 更新响应式数据的函数 function update () { // alert( ...

vue3安装与初识安装123456789101112131415161718安装vue31.脚手架方式安装命令 npm install -g @vue/cli vue --version vue create 项目名 2.使用vite创建特定: 1.快速的冷启动 2.即时的热模块更新,替换性能和模块的解耦让更新飞起 3.真正的按需编译，不再等待整个应用编译完成命令: npm init vite-app 项目名 cd 项目名 npm install npm run dev App.vue代码123456789101112131415161718192021222324252627282930313233<template><!-- Vue2中的html必须要有一对根标签，Vue3组件的html模板中可以没有根标签 --> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg=& ...

webpackwebpack是什么webpack就是一个打包工具，浏览器只能识别.js.jpg等少部分的文件，通过webpack可以将一些不同文件后缀名的转换成浏览器可以识别的文件 webpack与node的关系webpack 本身依赖于node执行，必须先安装node之后才能安装webpack,node安装之后会自带一个包管理工具npm，我们可以使用npm安装对应的包 webpack安装1npm install webpack -g webpack打包js文件1234#对main文件进行打包，这样子就会将main文件中所有引用的内容以及本身的内容进行打包，存放到budle.js文件中webpack ./src/main.js ./dist/bundle.js然后在主文件中我们只需要引用bundle.js就可以了 webpack配置文件webpack配置文件12345678910webpack.config.js const path = require('path') # 导入node包，用于找到当前文件路径 ...

前端模块化1234567为了代码的复用，es6中也有导入导出的方式，可以将复用的js代码进行抽取。新建一个文件，在该文件中定义一些变量或函数使用export{变量名1,变量名2}import '变量名1' from '文件路径';简单的说前端就是通过导出的方式去判断是内部函数或变量还是外部可以调用的方式。 使用方式1231.html:<script src="info.js" type="module"/> #引入js文件2.两个js互相导入导出import {s,b,c} from '文件路径' # 引入default关键字的变量不需要加大括号 导出方式1234567891.在需要导出的函数名前加exportexport function 变量名2.先定义好，定义好后集体导出export{函数1，函数2}3.让导入者自己命名export default aaa # 只能有一个defaultim ...

计算属性123456789101112131415161718192021该属性与data,methods这些属于同一级别,你可以在这个属性里面写一个函数，这个函数的结果就会成为外界使用这个函数的结果。效果类似于methods.基本语法:html方面:<div id="demo"> {{demo}}</div>vue方面:<script> var vm = new Vue({ el:'#demo', computed:{ demo:function(){ return '123' } }, })</script>#该属性与methods的区别 methods你每次都需要重新调用一遍函数，若是一个确定的固定的值，那这是很没有必要的。会浪费大量的计算资源 ...

Vue组件组件基本使用1234567891011121314151617vue组件的功能简单的说就是帮助我们将一些复用的代码进行封装,然后我们在前端的页面上就可以通过特定的标签将这些组件渲染在页面上，这样子我们就可以省去写重复代码的情况html代码:<div id="demo"> <component_test></component_test></div>js代码:Vue.component('component_test', { data: function() { return{ count:0 } }, template: '<button v-on:click="count--">You clicked me {{ count }} times.</button>' #将 ...

vue基本语法1234567891011121314151617<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> #vue导入<div id="app"></div><script>#导入后实例化一个新的Vue对象var app = new Vue({ el:'选择器',#使用这个找到你需要的标签，然后你就可以在这个标签内找到该对象内的值 methods:{ },#这里面写各种函数 data:{ }#这里写各种数据，你可以在标签内通过{{ }}获得数据 })</script> 取值12345678910<div id="app"> {{ message ...

vue使用swiper123456789101112131415161718192021222324251.首先需要安装cnpm install swiper vue-awesome-swiper --save2.在main.js中导入import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)3.在组件中使用#在mounted中进行实例化import 'swiper/swiper-bundle.css' #导入样式，也可以在main.js中导入，代表全局mounted() { this.$swiper = new Swiper('.swiper-container', { #这里写配置的各种属性 slidesPerView: 'auto', #一个页面中显示几个 virtual: true, // loop: true, #是否开启循环 ...

Vue_CLI环境搭建12345678910111.安装node官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2.安装cnpm #淘宝源，下载速度较快npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装脚手架cnpm install -g @vue/cli4.清空缓存处理npm cache clean --force 项目创建123456781.项目创建vue create 项目名 #项目会创建在当前文件夹下2.启动服务npm run serve #需要进入项目根目录3.打包项目npm run build #需要进入项目根目录 项目目录12345678910111213dist: 打包的项目目录(打包后会生成)node_modules: 项目依赖public: 共用资源src: 项目目标,书写代码的地方 -- assets:资源 -- components:组件 -- views:视图组件 -- App.vue:根组件 -- main.js: 入口js -- ...