vue
vue的系统化学习
ehehjgx
这个作者很懒,什么都没留下…
展开
-
vue脚手架
Vue脚手架可以快速生成Vue项目基础的架构。A.安装3.x版本的Vue脚手架:npminstall-g@vue/cliB.基于3.x版本的脚手架创建Vue项目:1.使用命令创建Vue项目命令:vuecreatemy-project选择Manuallyselectfeatures(选择特性以创建项目)勾选特性可以用空格进行勾选。是否选用历史模式的路由:nESLint选...原创 2021-08-21 15:42:15 · 63 阅读 · 0 评论 -
es6模块化开发之webpack
.webpack的基本使用创建项目目录并初始化创建项目,并打开项目所在目录的终端,输入命令: npminit-y创建首页及js文件在项目目录中创建index.html页面,并初始化页面结构:在页面中摆放一个ul,ul里面放置几个li在项目目录中创建js文件夹,并在文件夹中创建index.js文件安装jQuery打开项目目录终端,输入命令:npminstalljQuery-S导入jQuery打开index.js文件,编写代码导入jQuery并实现功能...原创 2021-08-20 16:24:24 · 112 阅读 · 0 评论 -
es6模块化开发babel的使用
配置es6运行环境定义:npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/nodenpm install --save @babel/polyfil导入模块用import关键字,暴露模块用export关键字babel:项目跟目录创建文件babel.config.js babe...原创 2021-08-20 10:12:52 · 134 阅读 · 0 评论 -
vue路由
后端路由:根据不同的用户url请求,返回不同的内容本质:url请求地址与服务器资源之间的对应关系spa:用来支持前端地址的前进和后退操作前段路由:用户事件与事件处理函数之间的对应关系window.onhashchange:监听事件对象路由,location.hash获取到值vue.router是vue官方的管理器基本使用:1.引入相关文件2.添加路由链接(router-link,是vue中提供的标签默认渲染为a标签)3.添加路由填充位(router-view),渲染规则原创 2021-08-19 14:57:31 · 63 阅读 · 0 评论 -
异步函数前后端交互案例
1.首先先做界面渲染,用mounted函数,一般在初始化页面完成后,再对dom节点进行相关操作,2.要获取到后台的数据,用axions方法通过url地址,获取到在function函数的data数据,但是这里的this不是全局,所以要用箭头函数3.因为要获取到数据,可以用拦截器axios.interceptors.response.use(function(res){returnres.data; },function(error){ console.log(erro...原创 2021-08-19 09:40:24 · 133 阅读 · 0 评论 -
bug问题解决库
Error: Cannot find module ‘destroy第一步:删除node_modules和package-lock.json第二步:在命令行工具中输入npm install 重新下载项目所依赖的第三方模块,然后就可以顺利运行了。原创 2021-08-19 09:23:32 · 58 阅读 · 0 评论 -
组件化案例开发总结
1:整个案例要用模块化开发的模式2.首先定义全局中心3.将要开发的模块分为几个部分,用来做局部变量4.采用components定义局部变量的名称 例:components:{'cart-title':CartTitle,'cart-list':CartList,'cart-total':CartTotal },5.局部变量例定义:var Cartotal,要...原创 2021-08-19 09:21:47 · 97 阅读 · 0 评论 -
vue前后端交互axios用法
基本用法:axios.get('/adata').then(ret=>{data属性名固定的,用于获取后台响应的数据 console.log(ret.data))可以通过params直接传参get方法,比较方便,也可以用deleteaxios.get('/adata'),{params:{id:123.then(ret=>{data属性名固定的,用于获取后台响应的数据 console.log(ret.data))用p...原创 2021-08-18 15:16:59 · 1013 阅读 · 0 评论 -
vue前后端交互promise方法和fetch方法
promise基本用法:实例化promise对象,构造函数传递函数,函数用来处理异步任务,resove和reject两个参数用来处理成功和失败两种清空,通过p.then获取处理结果data接受正确的参数info接受错误的参数。onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。在原创 2021-08-18 14:02:03 · 214 阅读 · 0 评论 -
vue基础4
组件化规范:web componentsVue.component('button-counter'(组件名称),{ (组件的属性) data:function(){return{count:0 }},(提供一个具体的对象) template:'<button@click="handle">点击了{{count}}次</button>'(模板内容)组件注册注意事项1、组件参数的data值必须...原创 2021-08-18 09:06:06 · 49 阅读 · 0 评论 -
vue基础3
表单操作:在表单加上属性value,在data里面进行选择numer:转化为数值,trim:去掉开始和结尾的空格,lazy将input事件转化为change事件lazy事件,失去焦点触发例:v-model.number自定义指令:用法:v-focus 通过指令来控制规则例:Vue.directive('focus',{inserted:function(el){//el表示指令所绑定的元素el.focus(); }})...原创 2021-08-16 14:49:10 · 46 阅读 · 0 评论 -
vue基础2
v-bind()处理动态的跳转 也可以缩写为:hrefv-bind()可以绑定class=(类名,is属性),也可以写成数组形式(v-bind:class='[activeClass,errorClass])v-bind()也可以混合使用data:{ activeClass:'active',errorClass:'error',(数组写法)isTest:true, (对象写法)}...原创 2021-08-15 15:52:51 · 46 阅读 · 0 评论 -
vue基础1
第一步:引入vue.js的库文件var vm=new Vue({el:'元素位置',:元素关联位置,可以是css选择器或者是dom元素data:{msg :'内容'}}) :模型数据{{插值表达式}}(支持简单的计算) vue模板语法指令:v-cloak 解决闪动问题(闪动:当浏览器反应速度慢,会先显示括号的内容) v-text 指令用于...原创 2021-08-15 10:27:09 · 52 阅读 · 0 评论