vue
前端js框架
乔木木木木
这个作者很懒,什么都没留下…
展开
-
axios的基本使用
网络模块封装axios几种网络模块选择一:传统的Ajax是基于XMLHttpRequest(XHR)为什么不用:配置和调用方式等混乱编码复杂真实开发很少用选择二:JQuery-ajax相对于传统Ajax非常好用为什么不用:vue的整个开发中不需要JQuery为了网络请求特意引用jQuery不方便vue的代码比jQuery的代码少选择三:Vue1.x中推出了Vue-resource体积小,是官方退出的为什么不用:在vue2.0以后不在更新维护对以后的项目开发和维护有原创 2020-06-24 00:26:25 · 280 阅读 · 0 评论 -
vue-router动态路由
动态路由的使用、导航守卫在某一些情况下,一个页面的path可能是不确定的比如进入用户界面时,url可能是/user/jane这样,希望除了有/user外还有用户的id一、动态url首先我们按照原本的方式创造一个user.vue<template> <div> <h2>用户界面</h2> <p>hello world</p> </div></template><script&g原创 2020-06-19 01:30:30 · 322 阅读 · 1 评论 -
Vue-router:router-link
router-link标签的属性补充、页面跳转router-link除了to=""属性还有其他属性:tag属性:会按照我们想要的方式渲染成别的标签的样子<router-link to="/home" tag="button">首页</router-link>replace属性:在正常情况下vue使用history.pushState()来进行url的变更,但是有时我们不希望用户可以回退,所以要使用history.replace()来变更url,可以通过replace属性原创 2020-06-19 01:29:09 · 106 阅读 · 0 评论 -
路由懒加载
vue-router懒加载的使用 当打包构建应用是,jacascript包会非常大,印象页面加载,如果可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才对组件进行加载,就可以更加高效了懒加载:用到时再加载懒加载主要作用是将路由对应的组件打包成一个个js代码块,只有在这个路由被访问到的时候才加载对应的组件懒加载的方式方式一:结合vue异步组件和webpack的代码分析const home =resolve=>{require.ensure{['../components/h原创 2020-06-19 01:27:51 · 128 阅读 · 0 评论 -
嵌套路由
路由的嵌套使用实现嵌套的两个步骤1、创建对应的子组件,并且在路由映射中配置对应的子路由{ path:'/home', component:home, children:[ { path:'news', component:news }, { path:'message', component:message } ] },2、在组件内部使用<router-view>标签<template> <原创 2020-06-19 01:27:08 · 117 阅读 · 0 评论 -
Vue-router:router-link、页面跳转
router-link标签的属性补充、页面跳转router-link除了to=""属性还有其他属性:tag属性:会按照我们想要的方式渲染成别的标签的样子<router-link to="/home" tag="button">首页</router-link>replace属性:在正常情况下vue使用history.pushState()来进行url的变更,但是有时我们不希望用户可以回退,所以要使用history.replace()来变更url,可以通过replace属性原创 2020-06-18 15:23:59 · 1942 阅读 · 0 评论 -
Vue路由:安装、配置、基本使用
Vue-Router路由中的映射关系一、路由路由是通过互联网把信息从源地址传输到目的地址的活动通过映射表进行路由和转发,这个映射表表示了数据包转向哪里1.1前端渲染、后端渲染阶段1:后端路由,后端渲染网页最早用的都是后端渲染,原本用的大多数都是jsp(java server page),php等服务器直接生产生成好url对应的html页面,返回给客户端展示一个页面有自己对应的url,url会发送到服务器,服务器通过正则对该url进行匹配,最后交给一个Controller进行处理,Contro原创 2020-06-18 15:07:32 · 436 阅读 · 0 评论 -
VueCLI:起步
VueCLI3的创建和起步一、创建CLI3项目vue create 项目名每个选项的含义如上图为什么CLI3比CLI2的文件结构和配置更简单:这个组件帮助我们管理了很多包的版本1.1 文件夹结构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QVkp10VE-1592450741681)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200618010128782.png)]原创 2020-06-18 11:29:37 · 97 阅读 · 0 评论 -
Vue笔记:Vue模块化
webpack中使用Vue的配置过程安装Vue的三种方式1、直接下载应用2、CDN引入3、npm配置1、用npm安装vuenpm install --save vue2、在main.js中引入vueimport Vue from 'vue'const app=new Vue({ el:'#app', data:{ message:'hello world' }})3、配置webpack.jsmodule.export={ resolve:{ a原创 2020-06-17 21:40:40 · 460 阅读 · 0 评论 -
Vue笔记:webpack模块化
模块化常见的模块化规范:commonJS,AMD,CMD,ES6的ModulesCommonJS模块化了解核心是导入、导出导出:module.exports={ flag:true, test(a,b){ return a+b }, demo(a,b){ return a*b }}导入:let{test,demo,flsg}=require('moduleA');一、Es6中的模块化在model.js文件中:var name="乔木"var age=18var原创 2020-06-17 11:30:54 · 171 阅读 · 0 评论 -
Vue笔记:slot插槽
solt插槽的基本使用一、为什么使用插槽组件的插槽是为了让封装的组件有更好的扩展性,让使用者决定要展示什么东西二、插槽的简单实现组件模板:<template id="cpn"> <div> <h2>我是cpn</h2> <!-- <button type="button" @click="btnClick">确定</button> --> <slot></slot&g原创 2020-06-15 23:42:21 · 171 阅读 · 2 评论 -
Vue笔记:组件化(一)
Vue组件化开发入门可以一个完整的页面分成很多个组件,每个组件实现一个功能模块,每一个组件又可以细分一、Vue的组件化思想Vue提供了一种抽象,可以开发复用的小组件来构造应用,每一个应用都可以被抽象成一颗组件树二、注册组件的步骤step 1:通过Vue.extend()创建组件构造器step2 :注册组件Vue.component()注册组件step3 :使用三、组件简单实现:<!DOCTYPE html><html> <head> <me原创 2020-06-15 15:54:07 · 226 阅读 · 0 评论 -
Vue笔记:v-model
Vue中的双向绑定表单控件,用于用户信息的提交一、v-model实现原理v-model其实是v-bind:value="“和v-on:input=”"的两个操作,input是监听用户输入的事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2020-06-13 22:25:21 · 121 阅读 · 0 评论 -
Vue笔记:JavaScript高阶函数
一些好用的循环方式1、for infor(let i in array){}这里 i是数组每一项的index2、for offor(let item of array){}这里的item取到的是数组中每一项3、js中的数组高阶函数filterarrayObject.filter(function(n){ //process})每从数组中取得一个元素,就会执行这个filter的回调函数这个回调函数的要求的 返回值必须是 boolean,当返回为true时,函数内部会自动将这原创 2020-06-12 17:29:21 · 157 阅读 · 0 评论 -
Vue笔记:图书购物车案例
BookShop案例:一、搭建使用了semantic-ui框架,搭建整个页面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="st原创 2020-06-12 16:44:15 · 978 阅读 · 0 评论 -
Vue笔记:v-for
一、向数组中插入某元素使用v-for来循环显示list中的项<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>原创 2020-06-12 14:56:48 · 372 阅读 · 0 评论 -
Vue笔记:v-on
Vue、Vue.js笔记v-on的参数问题定义方法时省略了小括号,但方法本身是需要一个参数时,Vue会默认将浏览器自动生成的event时间对象作为参数传入。<div id="app"> <button @click="btnClick">按钮</button></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><s原创 2020-06-12 14:59:02 · 89 阅读 · 0 评论 -
Vue笔记:登陆切换的小案例
v-if&v-else通过v-if和v-else达到切换不同登录方式的形式,当v-if的值为true时显示v-if所在的内容,当值为false时显示v-else所在的内容<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <.原创 2020-06-12 13:53:54 · 152 阅读 · 0 评论