09 2021 档案
摘要：全局指令 <input v-color="'green'" v-focus="" type="text" v-model:value="msg" /> Vue.directive(参数一：名字不带V- 参数二 对象 )对象中三个钩子函数{ 一、bind 只调用一次，指令第一次绑定到元素时调用，用于初
阅读全文
摘要：@before-enter="beforeEnter" @enter='enter' @after-enter="afterEnter" @before-leave="beforeLeave" @leave='leave' @after-leave="afterLeave" 相对应在methods中
阅读全文
摘要：1、什么是vue vue.js是一套构建用户界面的渐进式框架，逐渐进入项目，将js替换为vue 2、框架和库的区别 框架是一套完整的解决方案；对项目的侵入性较大 库（插件）提供某个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，很容易切换到其他库实现需求 3、mvc和mvvc的区别 mvc是
阅读全文
摘要：1、Vuex的核心模块有哪些，分别描述用途 答： ①state:定义全局状态 ②getters:对全局状态进行加工(计算)，并不会改变状态值 ③mutations:同步修改全局状态 ④actions:异步修改全局状态，一般用于请求接口 ⑤modules:将store模块化 2、组件中如何获取vuex
阅读全文
摘要：//存入缓存 localStorage.setItem("dataList",JSON.stringify(res)) //判断是否有缓存 haveLocalStorage(key){ if(localStorage.getItem(key)){ this.isLogin = true return
阅读全文
摘要：获取当前页面路由 history模式获取路由可以用 window.location.pathname 完整url可以用 window.location.href 路由路径可以用 this.$route.path 结果： /customizationCompareAnalysis 路由路径参数para
阅读全文
摘要：1、后端直接放开 2、JSONP 3、配置代理 module.exports = { devServer: {//不设置 重写 http://wkt.myhope365.com/weChat //设置重写 http://wkt.myhope365.com proxy: { //代理名称 '/cour
阅读全文
摘要：与path平级处写 path:'mine', component:Mine, //需要登录 meta:{ needLogin:true } const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, rout
阅读全文
摘要：1、计时器为异步操作，在同步修改时使用计时器会出现问题，第一次点击修改后页面的值会发生变化，但state中不会改变，所以需要进行异步修改数据 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new
阅读全文
摘要：1、index.js创建vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //1、全局状态 初始值 state: { num:66 }, //3、加工数据，
阅读全文
摘要：/deep/深层覆盖 用法：直接用在style中类名前，和>>>用法一致，功能类似!important 例如： >>>.ant-tabs-nav{ width: 100%; } /deep/.ant-tabs-nav{ width: 100%; }
阅读全文
摘要：声明式跳转+传参 <router-link to="/father">声明式跳转</router-link>//声名式query传参 <router-link :to='{path:"/father/son",query:{courseId:103}}'>路由嵌套</router-link> //声
阅读全文
摘要：1、webpack介绍 webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具； 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。 2、webpack的安装 全局安装运行npm i webpack -g这样就可以在全
阅读全文
摘要：1、在项目根目录下创建vue.config.js 2、复制代码 module.exports = { devServer: { // --open --contentBase src --port 3000 --hot", open: true, contentBase: 'src', port:
阅读全文
摘要：官网 https://cli.vuejs.org/zh/guide/installation.html 安装vue-cli npm install -g @vue/cli 创建项目 1、切换到我们需要创建项目的目录，在这个目录下打开cmd 2、vue create 项目名 vue create 项目
阅读全文
摘要：Jetbrains系列产品重置试用方法 本站惯例：本文假定你知道Jetbrains家的产品。不知道可以问问搜索引擎。 没错，jetbrains-agent这个项目停止了。市面上漫天飞的各种最新都是其他大神的魔改版本。[/斜眼]我不是要专门写个博文来说明jetbrains-agent项目已经停止，然后
阅读全文
摘要：关键词：children children属性与path和component同级使用 1、在routes中加入children属性 const router = new VueRouter({ routes: [ { path: "/", redirect: "/index", }, // 首页 {
阅读全文
摘要：<!-- query传参，对象中两个属性，跳转地址和传递参数 --> <router-link :to="{path:'/mine',query:{course:103}}" tag='span'>去个人中心</router-link> 完整代码展示： <!DOCTYPE html> <html>
阅读全文
摘要：引入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 1、创建路由实例 // 创建index路由实例 let index = { template: '#index' } // 创建mine路由实例 le
阅读全文
摘要：computed与data、methods等同级使用，默认只有getter计算属性 method、computed和watch的区别 computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）； methods方法表示一个具体的操作，主要书写业务
阅读全文
摘要：1、给标签设置ref属性 <h2 ref='midautumn'>中秋快乐111</h2> 2、在mounted()中使用$refs对获取到的标签使用（methods与data等平级） mounted(){ //打印出所有带ref属性的值，是一个对象，{midautumn: h2, mid-autu
阅读全文
摘要：watch和data、methods等同级 watch两个参数（newValue,odlValue） 分别为新数据和旧数据 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
阅读全文
摘要：created() { axios .get( "http://wkt.myhope365.com//weChat/applet/course/banner/list?number" ).then((res) => { this.swiperList = res.data.data; // 等界面下
阅读全文
摘要：1、子组件created中this.$emit两个参数(要传给谁（自定义事件类型）,要传的信息) || 微信小程序用this.traggerevent() 2、@定义一个方法,用于接收son传过来的信息 3、得到son传过来的信息，固定参数data 4、父元素data中定义数据用来接收使用来自son
阅读全文
摘要：1、在father中给子组件传参 2、子组件props接受传值 props表示类型三种方式： 1、单类型 表示接收的值为string类型 sonname: String 2、多类型 表示接受的值类型可以为string或number sonname:[String,Number] 3、设置默认值 表示
阅读全文
摘要：slot插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。 普通插槽 <slot></slot> 具名插槽 <slot name='top'></
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com
阅读全文
摘要：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。 组件化和模块化的不同： 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一 组件化：是从UI界面的角度进行划分的；前端的
阅读全文
摘要：一、基本使用， 动画进入三个阶段 .v-enter → .v-enter-to → .v-enter-active 离开三个阶段 .v-leave → .v-leave-to → .v-leave-active 二、自定义属性 自定义属性名name 动画进入三个阶段 .自定义属性名-enter →
阅读全文
摘要：Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。 安装方法 使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min
阅读全文
摘要：直接在页面中，通过script标签，引入vue-resource的脚本文件； 注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件 get请求 getInfo() { // get 方式获取数据 this.$http.get('http://yapi.shan
阅读全文
摘要：vue生命周期 1、beforeCreate 拿不到data数据和methods方法，一般用于重定向 2、created 能拿到data数据和methods方法，一般用于接口请求数据初始化 3、beforeMount dom元素渲染前，此时页面数据尚未渲染 4、Mounted dom元素渲染完毕，一
阅读全文
摘要：一、设置→用户代码片段 二、输入vue打开 三、将内容全部替换 代码如下 { "html:5": { "prefix": "vue-base", "body": [ "<!DOCTYPE html>", "<html>", "<head>", "\t<meta charset=\"UTF-8\">"
阅读全文
摘要：// 四、字符串对象 var str = "qwertyui" var str1 = new String("qwertyui"); console.log(str1); console.log(typeof str1); // 1、charAt() 获取指定位置处的字符 索引 console.lo
阅读全文
摘要：// 日期对象 var date = new Date(); console.log(date); console.log(typeof date); console.log(date);//获取到的是当前的时间 console.log(typeof date); // 1、getTime();获取
阅读全文
摘要：// 数组对象 // 1、创建数组 var arr = [1,2,3,4,5,6]; var arr1 = new Array(1,2,3,4,5,6,7,8); console.log(arr); console.log(arr1); // 2、检测是否是数组 console.log(arr1 i
阅读全文
摘要：// 一、数学对象 console.log(Math.PI); // 向下取整floor console.log(Math.floor(13.02)); console.log(Math.floor(13.92)); // 向上取整ceil console.log(Math.ceil(9.1));
阅读全文
摘要：padStart() 这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串 这个方法里两个参数 .padStart（显示的位数，位数不足时在前面补充的内容）例： .padStart(2,0)不足两位时在前面补零 padEnd() 和上面用法一样，这个是在后面补一个值 附倒计时案例 <!DOC
阅读全文
摘要：1 注册一个监听按键事件 监听所有按键：v-on:keyup 监听指定按键：v-on:keyup.按键码 2 使用按键别名 vue提供的按键别名 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 举例：如何使用
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：使用语法 {{变量 | 过滤器名}} {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值 定义语法 全局定义： 通过Vue提供的filter方法定义：Vue.filter() 参数1：过滤器的名字 参数2：过滤器执行函数 <!DOCTYP
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com
阅读全文
摘要：a) 区别： i. v-if删除dom元素 ii. v-show设置display:none b) 应用场景： i. v-if只修改一次的时候可以使用v-if ii. v-show频繁切换的时候可以使用v-show
阅读全文
摘要：a) 遍历数组，参数(item,index) in list b) 遍历对象，参数(value,key,index) in list c) 遍历数字，num in 10 (1~10) d) key在使用v-for的时候都需要去设置key i. 让界面元素和数组里的每个记录进行绑定 ii. key只能
阅读全文
摘要：a) 作用：数据双向绑定 b) 注意：绑定的是表单控件 c) 示例：计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
阅读全文
摘要：a) .stop 阻止冒泡，冒泡由内到外 b) .prevent 阻止默认事件 c) .capture 添加事件侦听器时使用事件捕获模式，捕获右外到内 d) .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 e) .once 事件只触发一次
阅读全文
摘要：a) 进行事件的绑定，我们用的最多的是click事件绑定 b) 简写@ c) 实现跑马灯的效果 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c
阅读全文
摘要：v-text 不能解析富文本 v-html 可以解析富文本 v-bind 属性绑定，简写为: （一个冒号） v-cloak 隐藏vue渲染前的界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq
阅读全文
摘要：a) 引入vue.js b) 写视图层，我们要展示的内容 c) 实例化Vue() data：存放数据 el：这个控制是哪块视图 methods：放我们的方法 示例 <!-- 视图层 --> <div id="app"> <!-- 插值表达式，可以读取我们的变量 --> {{ message }} <
阅读全文
摘要：a) MVC 是后端的分层开发概念; b) MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;
阅读全文
摘要：什么是vue.js a) Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 b) Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，
阅读全文
