文章分类 - vue从入门到进阶
摘要：【一】安装 cnpm install -S vue-router 【二】app.vue <router-link to=""></router-link> 【三】路由跳转（不携带数据） 【1】js跳转三种方式 <button @click="handleTo">js跳转--跳转到about页面</b
阅读全文
摘要：【一】相关API 指的是：this.$router >方法 常用的: this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面) this.$router.b
阅读全文
摘要：【一】路由守卫 全局守卫、独享守卫、组件内守卫 是否登录，登录后才能访问，没登录重定向到login router/index.js //全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用 router.beforeEach((to, from, next) => { console.
阅读全文
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 【一】vuex 【1】原理 【二】使用步骤 【1】安装 cnpm instlal vuex -S 【2】新建 store/index.
阅读全文
摘要：【一】开源的样式库，方便在vue中使用 elementui：饿了么团队开源的 web端 https://element.eleme.cn/#/zh-CN vant：有赞团队，移动端 https://vant-ui.github.io/vant/#/zh-CN ant design:阿里团队 http
阅读全文
摘要：单页面应用，就无法实现页面的跳转 借助于 vue-router-->实现组件切换 效果就是页面跳转 【一】使用 【1】App.vue >固定成 <template> <div id="app"> <router-view></router-view> </div> </template> 【2】写页
阅读全文
摘要：ES6特性 1 let 和 const let 和 const 关键字用于声明变量和常量，取代了 var。 let 声明的变量具有块级作用域，而 var 声明的变量具有函数级作用域。 const 声明的常量在声明后不能再被重新赋值 # 在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域
阅读全文
摘要：【一】 创建vue项目 要按vue要求的套路写代码--》写的都是vue的东西 最终上线--》要编译 》把vue的代码--》编译成 html，css，js 创建工程，编译需要使用：nodejs--》webpack 【二】Vue-CLI 项目搭建 【1】 环境搭建 - 安装node 官网下载安装包，傻瓜
阅读全文
摘要：【一】组件使用 1.组件是什么？有什么用？ [](http://photo.liuqingzheng.top/2023 02 15 18 56 34 /image-20201216150836004.png) 组件就是：扩展 HTML 元素，封装可重用的代码，目的是复用 例如：有一个轮播图，可以在很
阅读全文
摘要：【一】动态组件 【1】不使用动态组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue/vue.js"></script> <style> .i
阅读全文
摘要：【一】定义局部组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue/vue.js"></script> <style> </style> </
阅读全文
摘要：【一】Axios 【1】简介 ① Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 ② axios官网：http://www.axios-js.com/ 【二】实例 【1】电影网址和解析Json网站 https://m.maizuo.com/v5/?co
阅读全文
摘要：默认isSms是false > 用户名密码进行登录 当点击了登录短信那个按钮将isSms置为了true >手机短信登录 点击登录按钮触发点击事件 获取用户输入的值，通过this.isSms,跳转到不同的IP地址 成功的话跳到登录地址，失败的话返回错误信息 <!DOCTYPE html> <html
阅读全文
摘要：购物 全选/全不选 加减数量 删除不想要的商品 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue/vue.js"></script> <link
阅读全文
摘要：【一】v-model进阶 【1】v-model 之 lazy、number、trim lazy：等待input框的数据绑定时区焦点之后再变化 number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留 trim：去除首位的空格 v-model 之 lazy、number、trim {{m
阅读全文
摘要：【一】箭头函数 【1】匿名函数 var f=function(name){ console.log(name) } f('hope') 【2】箭头函数(无参数无返回值) var f1= ()=>{ console.log('我是箭头函数') } f1() 【3】箭头函数(有多个参数无返回值) var
阅读全文
摘要：【一】条件与判断 【1】v-if v-else-if v-else <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue/vue.js"></scr
阅读全文
浙公网安备 33010602011771号