ckk727的博客

文章目录一、代码结构上的一些注意点二、Object.defineProperty一、代码结构上的一些注意点在（二）中，render()函数已被实现，但一些地方尚未说明，现在先来扫个尾。首先，回顾一下代码结构：function LnVue( options ) { this._el = options.el; this._data = options.data; this._template = document.querySelector(this._el); this.moun.

文章目录一、将渲染出的DOM转换为虚拟DOM二、将虚拟DOM转换为真实DOM三、函数柯里化（1）区分模板标签（2）虚拟DOM的render()方法一、将渲染出的DOM转换为虚拟DOMVue为了提示性能而引入了VNode，即虚拟DOM，简单来说，虚拟DOM是一个记录着真实DOM信息的对象，VNode存储在内存中，因为js操作内存的速度远比浏览器渲染刷新真实DOM的时间来的快，因此Vue用VNode来记录页面的变化并映射DOM，最后再反映到页面上。接下来实现将DOM转换为VNode的功能：//再次强调.

文章目录一、Vue的数据驱动二、使用步骤1.引入库2.读入数据总结一、Vue的数据驱动我们最一般的使用Vue的步骤可能如下：（1）编写模板（可能有以下几种方式）直接在HTML中写标签通过使用template通过使用.vue文件（中的template）（2）创建Vue实例（3）把Vue挂载到页面中（mount）而Vue是如何实现数据驱动的呢？Vue将通过this.$options.template获取到模板，二、使用步骤1.引入库代码如下（示例）：import.

在手机端上使用js原生的滚动效果时会有非常卡顿的现象，此时我们可以使用第三方库 better-scroll 来解决该问题。<div class="wrapper"> <ul class="content"> <li>...</li> </ul></div>首先你的html结构需要长这样，用一个大的wrapper套一个唯一个标签，标签中是你希望滚动的内容，当然wrapper与content的名字不是非它不可，你可.

一、发送get请求axios({ url:'***', method:'get' //该句可省略，默认是get请求}).then(data => { console.log(data);})axios.get(url).then()//get请求附带参数axios({ url:'url1', params:{ type:'', page:'' }}).then()二、发送并发请求不使用axios的话，发送并发请求有以下方法：（1）通过ajaxl.

一、配置路径别名如果在项目中大量使用 …/…/…/ 这种方式来指定路径，显然不是一个好办法，webpack支持在项目中配置路径别名，具体方法如下：（1）在项目根目录创建vue.config.js文件（2）在该文件中写下如下代码：const path = require('path') // 引入path模块function resolve(dir) { return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径}modul.

问题：启动vue项目后，重复点击路由会报Avoided redundant navigation to current location的错误，虽然不影响运行，但控制台会报错。解决办法：这里想要看情况，网上看到的解决方法大多不全面。如果你是用replace方法更新路由的，那么，在你的路由的index.js中添加如下代码：import VueRouter from 'vue-router'const originalReplace = VueRouter.prototype.replaceVue.

npm install axios --save//axios的简单使用axios({ url:'', method:''}).then()axios.get( url:'', ...).then()axios.post().then()//axios处理并发请求axios.all([axios({ url:'', //... }), axios...

npm install vuex --save-dev //安装vuex// src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.store({ state:{ }, mutation:{ }, action:{ }, g...

Vuex是一个专门为Vuejs开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，然后巴拉巴拉…好了，用概念来解释概念那是大佬做的事，Vuex说白了就是一个保存多个组件的公共变量（你可以暂时把状态理解为变量）的一个对象，把这个对象封装在顶层的Vue实例中，以后不管哪个组件想用这些变量，都可以直接从中获得，或者是向其中写入新变量。为什么要有这个东西呢？倘若现在你开发了许多个组件，组件1...

效果图：src源码目录结构：//TabbarItem.vue<template> <div class="tabbar-item" @click="itemclick"> <div v-if="!isActive"><slot name="item-icon"></slot></div> &l...

keep-alive是Vue内置的一个组件，它可以使被包含的组件保留状态，或避免重新被渲染。在vue-router中，我们使用router-view组件来显示内容时，你会发现随着页面被刷新，之前的页面并没有缓存下来，也就是哪怕是一些页面用户曾经浏览过，但当再次点击链接回到该页面时，该页面上曾经被执行过的一些状态也不会被保存。换句话说，就是一旦用户使用这个页面，该页面对应的组件就会被创建，而一旦...

考虑一下这个需求：当页面发生跳转时，自动更改页面的标题。比如跳转到home页面，标题改为首页，跳转到about页面，标题改为关于。首先，可以通过生命周期函数实现这个需求，但使用生命周期函数的话，需要在每一个组件中都添加实现代码，如果组件过多的话，这将不是一个好的选择。这时，就可以考虑使用导航守卫的功能。什么是导航守卫呢？导航守卫对全局跳转进行监听，并且可以根据你的需求在跳转时执行一些代码。...

params方式：//index.jsroutes = [ { path:'/user/:userId', component:User }]//App.vue<router-link :to="'/user/' + userId">用户</router-link>//获取path中的信息this.$route.params.userId ...

首先需要知道，当我们用 npm run build 去打包项目的时候，在生成的dist文件中，它会按照内容分成一个个独立的文件，比如css、js等，其中，在js文件下，默认会生成三种类型的js文件以及相对应的js.map文件，分别是：app.js //自己写的业务逻辑代码manifest.js //提供底层支撑服务的js代码vendor.js //第三方引用的js代码随着我们项目的...

#1 安装vue-router：npm install vue-router --save#2 在src文件夹下新建router目录，在该目录下新建一个index.html文件#3 在刚才创建的index.html文件中写入如下代码：import VueRouter from 'vue-router'import Vue from 'vue'// 1. 通过vue.use(插件...

前端路由的核心就在于更改url，页面不刷新，如何做到这一点呢？第一种方法是改变url的hash值。location.href>>> http://localhost:8080/#location.hash = 'foo'>>> http://localhost:8080/#/foo改变hash值，页面不刷新，页面会根据前端的路由映射关系找到相应...

后端路由阶段因此，后端路由都是由服务器来生成页面，然后返回给客户端，这种方式渲染的页面，不需要单独再加载js或css代码，可以直接交给浏览器显示。缺点就是 后端开发人员的任务太多太杂，而前端要想处理这部分工作，就必须学习额外的技术，比如Java、PHP等；另外，HTML代码与数据混合在一起，造成逻辑混乱。前后端分离阶段这种模式显然没有路由的概念，因为数据都是通过ajax请求获得。...

Vue CLI3.x版本之后，大部分的webpack配置都被隐藏了起来，但有时我们可能会需要修改这些配置，这里介绍三种方法。vue ui在终端输入 vue ui 指令打开Vue项目管理器；可以看到，我们可以通过项目管理器来管理项目，创建项目，或者导入项目。这里因为我们是要修改原有项目的配置，所以选择导入项目，找到我们希望修改配置的Vue项目，然后导入；在如下界面修改配置：在项...

npm install -g @vue/cli //安装CLInpm install -g @vue/cli-init //安装桥接工具，拉取CLI旧版本vue init webpack myproject //vue2.x版本初始化项目vue create myproject //vue3.x以上版本初始化项目Vue2.x初始化项目过程：vue init webpack v...

在用Vue脚手架快速搭建一个项目时，在初始化时有一个选择runtime+compiler还是runtime-only的选项，那么这两个配置有什么区别呢？如下图，当一个Vue程序被运行时，一般它会经历如下过程。#1 template加载如vm.options中#2 解析为ast（抽象语法树）#3 编译为一个render()函数#4 渲染为虚拟DOM#5 渲染为真实DOM（呈现出UI界...

首先需要知道，在Vue根实例下，template 中的内容会自动嵌入到 el 挂载的HTML块中。//即本来是这样:<div id="app"> <h2>{{message}}</h2></div>new Vue({ el:'#app', data:{ message:'Hello,VueJs!' }})//可以修改成这...

配置vue：npm install --save vueimport Vue from 'vue'仅仅是这样还不够，这样在使用Vue时会出现runtime-only错误，因为Vue分为runtime-only（代码中不允许有template）与runtime-compiler（代码中允许template）。因此还需要一些配置：//webpack.config.jsmodule.e...

一、入门在Vue中，需要了解应用、实例以及组件之间的关系。每个Vue应用都是通过创建一个新的Vue实例开始的，通常，一个Vue应用由一个Vue根实例，以及多个可选的、嵌套的、可复用的Vue组件构成。data当一个Vue实例被创建时，它会将data中的所有属性加入到Vue的响应式系统中，这些属性一旦被再度更改，视图将产生响应，即匹配更新为新的值。data = {a:1}var vm ...